{"id":22559804,"url":"https://github.com/taurusilver7/foodizone","last_synced_at":"2025-10-24T10:01:59.064Z","repository":{"id":181445532,"uuid":"493767942","full_name":"taurusilver7/foodizone","owner":"taurusilver7","description":"An online food ordering application built completely on React and CSS","archived":false,"fork":false,"pushed_at":"2022-05-20T18:18:05.000Z","size":1028,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T12:36:08.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taurusilver7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-05-18T17:46:07.000Z","updated_at":"2022-05-18T17:46:53.000Z","dependencies_parsed_at":"2023-07-15T16:51:05.707Z","dependency_job_id":null,"html_url":"https://github.com/taurusilver7/foodizone","commit_stats":null,"previous_names":["taurusilver7/foodizone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Ffoodizone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Ffoodizone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Ffoodizone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Ffoodizone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/foodizone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246026111,"owners_count":20711581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T21:09:21.243Z","updated_at":"2025-10-24T10:01:58.993Z","avatar_url":"https://github.com/taurusilver7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FoodiZone\n\n\u003e An online food-ordering application powered by react-js and CSS.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n#### `npm start`\n\nRuns the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes.\nYou may also see any lint errors in the console.\n\n#### `npm test`\n\nLaunches the test runner in the interactive watch mode.\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n#### `npm run build`\n\nBuilds the app for production to the `build` folder.\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n#### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can't go back!**\n\nIf you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.\n\nYou don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.\n\n## Build\n\nRefactor the template to suit the project. Remove unnecessary stylesheets and scripting files.\\\nReplace the default files with suitable project docs. [title icon](https://www.favicon.cc/?action=icon\u0026file_id=951529)\\\n\nCreate three folders in components directory to hold different component for the project.\\\n UI folder for general UI elements, Layout for Header \u0026 related elements, Meals and Cart folders for corresponding components \u0026 elements.\n\nThe header component has header title, the cart button (reusable component). The cartIcon is a svg format file function.\\\n\nThe Meal directory has a MealSummary with hard-coded text, AvailableMeals with an array of meal-list. The Meal component is the combination of the above two. The data mapped in the Meal component is separated into another wrapper component to provide html structure \u0026 css content— `Card`\\\n\nFor induvidual meal items, a customized mealItem compoenent is created with mealForm for markup form.\nAnother component `Input` for form input field. The Input component is a reusable one in UI directory\n\nA Cart component to display items in the cart and implement cart functions. The cart is a modal displayed on the main page. The modal is mounted above the `root` div in the index.html file and the ReactDOM creates a protal for Backdrom and ModalOverlay components.\\\nThe newly creataed portals needs the location to portal (the overlay div above root in index.html) as an argument with what to portal.\\\n\nCreate a state to manage the cart modal in parent component `App`. Control the state from Header component cart button. Point the showcartHandler funtion to the Header component to execute upon cart-click.\\\n The modal close fn should also work when the backdrop is closed. Add the hideCartHandler function to the Backdrop in Modal and add the functionality to Modal in cart. The close button and the backdrop executes the hideCartHandler function in App.\n\n### Cart Context\n\nInstead of managing the states from parent component, set up the context to manage the states. Create the context files in /src/store directory.\\\nThe context and the provider for the states are created. All the components in the App component needs the state props, to rerender the application. Wrap the App with CartProvider to wrap all the components.\n\nBy using the useContext(CartContext) hook, the HeaderButton component will be re-evaluated by react whenever the context changes (update in CartProvider). Change the cart value to dynamic.\nuseReducer to manage the state in CartProvider to add an item to the cart.\n\nSet a state to check the amount validity with a condition and add the item to the cart number in MealItemForm component. Add a forwardRef to the Input component to link the amountRef to the entered cart-item amount.\n\nCreate another context in MealItem to execute addItem to the addCartHandler function. With this, the cart number represents the added items.\n\nNow, to update the items \u0026 order values in cart, create another context in Cart and replace the dummy array with the items in the context. Create functions to derieve the totalAmount, cart items.\n\nCreate a CartItem component to display the order details in the cart modal. Work on complex reducer logic to organize the items in the cart.\\\nCheck for the preexistence of items in the cart before adding a new item. If found, update the item-count \u0026 totalAmount. Extend the logic to the add/minus buttons in the cart modal.\n\n### Backend.\n\n- Create a firebase account to link the Realtime database to the App. Create a realtime database and fill in the database with the meal data in NoSQL structure.\n- Use the https fetch method and useEffect to render the sideeffects in AvailableMeals. Delete the dummy data. Send the https req to the database node.\n  \\*\\* Don't forget to add an extention of /meals.json to the https req node.\n- Once the responseData is parsed and the data is pushed into an array, the component is rerendered with the data once the fetching is complete. Since the fetching is an async task and loaded after the components are rendered for the first time, initially there would be no data.\n- Now the data is changeable and the component should be reevaluated once the data changes, a state is required to avoid discrepencies and bugs.\n- Load the array into the setMeals fn, and map through meals state to render the component. The promise sometimes might take some time to load the data, so a loading state for better UI is initiated.\n- An error state for https error messages is initiated. A toast could also be used as an alternative for issuing error and loading messages.\n\nA Checkout component below the Cart modal to enter the user details for delivary. The order function to handle the checkout form.\n\n- The modal is refactored to display only cart-items until checkout initiation, and then the checkout modal below the cart with form handling.\n\n### Form submission\n\nA useRef() hook to get the inputs are entered. Gather the entered data from ref and create an object to validate and push forward.\\\nCheck if the values are empty and postal code is exactly five number (chars) with handler functions.\\\nGather the user data from the form, but uplift the data to Cart component, to get the order data and forward them to the database.\\\n\n- On the server, a developer shouldn't blindly trust the user data, as the validation could always be circumvented. The data on the server should always be validated.\n\n- Send a fetch req (POST method) to send the order \u0026 user data to the database. To add better UI, clear the form with a confirm message.\n- Add a method in CartProvider to clear out the cart after a successful order sequence. The method clearCart dispatches an action 'CLEAR', upon which the state the returned to its default state.\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `npm run build` fails to minify\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Ffoodizone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Ffoodizone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Ffoodizone/lists"}