{"id":25169725,"url":"https://github.com/sofiane-abou-abderrahim/react-food-order","last_synced_at":"2026-04-17T10:31:40.885Z","repository":{"id":235812346,"uuid":"791172554","full_name":"sofiane-abou-abderrahim/react-food-order","owner":"sofiane-abou-abderrahim","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-05T23:04:41.000Z","size":3901,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T20:27:29.533Z","etag":null,"topics":["createportal","e-commerce-website","forwardref","http-requests","javascript","modal","react-components","react-dom","react-hooks","reactjs","shopping-cart","state-management","usecallback","usecontext","useeffect","useimperativehandle","usereducer","useref","usestate"],"latest_commit_sha":null,"homepage":"https://sofiane-abou-abderrahim.github.io/react-food-order/","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/sofiane-abou-abderrahim.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-24T08:18:40.000Z","updated_at":"2024-05-05T23:04:44.000Z","dependencies_parsed_at":"2024-05-01T15:00:13.967Z","dependency_job_id":null,"html_url":"https://github.com/sofiane-abou-abderrahim/react-food-order","commit_stats":null,"previous_names":["sofiane-abou-abderrahim/react-food-order"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sofiane-abou-abderrahim/react-food-order","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-food-order","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-food-order/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-food-order/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-food-order/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofiane-abou-abderrahim","download_url":"https://codeload.github.com/sofiane-abou-abderrahim/react-food-order/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofiane-abou-abderrahim%2Freact-food-order/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31925318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T10:19:20.377Z","status":"ssl_error","status_checked_at":"2026-04-17T10:19:18.682Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["createportal","e-commerce-website","forwardref","http-requests","javascript","modal","react-components","react-dom","react-hooks","reactjs","shopping-cart","state-management","usecallback","usecontext","useeffect","useimperativehandle","usereducer","useref","usestate"],"created_at":"2025-02-09T08:36:23.796Z","updated_at":"2026-04-17T10:31:40.859Z","avatar_url":"https://github.com/sofiane-abou-abderrahim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Time To Practice: Food Order App\n\n## Components, State, Context, Effects, HTTP Requests \u0026 More!\n\n- Building a Complete Project From the Ground Up\n- Building \u0026 Configuring Components\n- Using State \u0026 Context\n- Managing HTTP Requests \u0026 Side Effects\n\n# A Challenge For You\n\n## Build a \"Food Order\" web app\n\n- Use the starting project attached to this lecture\n- Add components for displaying products, the cart (in a modal) and a checkout form (also in a modal)\n- Fetch the (dummy) meals data from the backend \u0026 show it on the screen (Get /meals)\n- Allow users to add \u0026 remove products to / from the cart\n- Send cart data along with user data (full name, email, street, postal code, city) to the backend (POST /orders)\n- Handle loading \u0026 error states\n\n# Steps\n\n## 0. Starting Project\n\n1. run `npm install` in the `backend` folder\n2. run `npm install` in the main project folder (frontend)\n3. run `npm start` in the `backend` folder\n4. run `npm run dev` in the main project folder (frontend)\n5. create a `README.md` file\n\n## 1. Planning the App \u0026 Adding a First Component\n\n1. add a `components` folder\n2. inside of it, add a `Header.jsx` file\n3. use this header in the `App.jsx` component\n\n## 2. Fetching Meals Data (GET HTTP Request)\n\n1. add a new `Meals.jsx` component\n2. send a GET HTTP request to the dummy backend from inside `Meals.jsx`\n3. output the meals items (just the names for now) from inside `App.jsx`\n\n## 3. Adding a \"MealItem\" Component\n\n1. add a `MealItem.jsx` file\n2. output the `\u003cMealItem\u003e` component in `Meals.jsx`\n3. prepend the image source data in `MealItem.jsx` to load the images from the backend\n\n## 4. Formatting \u0026 Outputting Numbers as Currency\n\n1. add a new `util` folder \u0026 add a new `formatting.js` file inside it for formatting the price\n2. use the `currencyFormatter` function in `MealItem.jsx`\n\n## 5. Creating a Configurable \u0026 Flexible Custom Button Component\n\n1. add a `UI` subfolder inside the `components` folder for UI core generic building blocks\n2. add a new `Button.jsx` inside that `UI` folder\n3. use this `\u003cButton\u003e` component in your app, for example:\n   1. a text only button style in the `Header.jsx`component\n   2. an other button style in the `MealItem.jsx` component\n\n## 6. Getting Started with Cart Context \u0026 Reducer\n\n1. use React's context feature to manage the cart data in a more general centralized way\n   1. add a `store` folder\n   2. inside it, add a `CartContext.jsx` file where you manage this cart data \u0026 this cart context\n2. use React's Reducer feature instead of State\n\n## 7. Finishing \u0026 Using the Cart Context \u0026 Reducer\n\n1. finish the cart logic inside the `cartReducer` function in `CartContext.jsx`\n2. connect the cart logic with help of `useContext()` to the different components\n   1. use the `useReducer()` hook correctly inside of the `CartContextProvider` component\n   2. pass the cart context value to the `\u003cCartContext.Provider\u003e` component\n3. use the cart context inside of the other components\n   1. wrap all your components with the `\u003cCartContextProvider\u003e` component in `App.jsx`\n   2. use the cart context in `MealItem.jsx` to update your cart\n   3. access the cart context in `Header.jsx` to display the number of meals in the cart\n\n## 8. Adding a Reusable Modal Component with useEffect\n\n1. build a modal as a standalone reusable UI component named `Modal.jsx`\n2. use an `open` prop \u0026 `useEffect()` \u0026 `useRef()` to open this dialog\n\n## 9. Opening the Cart in the Modal via a New Context\n\n1. add a new `Cart.jsx` component for outputting the cart data on the screen\n2. use `useContext()` to get access to the cart items stored in the cart context\n3. add a new `UserProgressContext.jsx` component for taking care of showing or not showing this cart data\n4. use the `UserProgressContextProvider` in `App.jsx` and wrap it around the other components\n5. use the `UserProgressCtx` in `Header.jsx`\n6. show the Cart component in `Cart.jsx` with help of `useContext()`\n7. output the `\u003cCart\u003e` component in `App.jsx`\n8. set the logic for closing the modal in `Cart.jsx` \u0026 `Modal.jsx`\n\n## 10. Working on the Cart Items\n\n1. add a new `CartItem.jsx`\n2. output the `\u003cCartItem\u003e` component in `Cart.jsx`\n3. make sure the buttons increase \u0026 decrease the items quantity in the cart\n\n## 11. Adding a Custom Input Component \u0026 Managing Modal Visibility\n\n1. show the `Go to Checkout` button only if we have an item in the cart in `Cart.jsx`\n2. add a new `Checkout.jsx` component that will show a new page when clicking on the `Go to Checkout` button\n3. it should open a modal\n4. create a new shared `Input.jsx` component\n5. manage opening \u0026 closing the modal\n6. output the `\u003cCheckout\u003e` component in `App.jsx` to show the checkout modal\n7. update the `UserProgress` context whenever the dialog is closed with `escape` by adding an `onClose` prop in `Modal.jsx`\n8. use the `onClose` prop in `Cart.jsx` \u0026 `Checkout.jsx`\n\n## 12. Handling Form Submission \u0026 Validation\n\n1. handle form submission in `Checkout.jsx`\n2. validate the input in `Input.jsx` with help of the `required` attribute\n3. get hold of the entered values with the built-in `FormData` feature in `Checkout.jsx`\n\n## 13. Sending a POST Request with Order Data\n\n1. send the POST request inside the `handleSubmit` function in `Checkout.jsx`\n2. make some order on the app \u0026 check the `orders.json` file to see whether the order was sent successfully\n\n## 14. Adding a Custom HTTP Hook \u0026 Avoiding Common Errors\n\n1. create a new `hooks` folder \u0026 add a new `useHttp.js` file inside of it\n2. define a new `sendHttpRequest` helper function\n3. define another new `sendRequest` function inside of the `useHttp` custom hook function\n4. use `try / catch`\n5. manage some state to reflect those different requests states in the UI\n6. use the `useHttp` custom hook in `Meals.jsx`\n\n## 15. Handling HTTP Loading \u0026 Error States\n\n1. add a new `Error.jsx` component to output some error message\n2. add CSS styles for loading \u0026 error messages in `index.css`\n\n## 16. Finishing Touches\n\n1. use the `useHttp.jsx` hook component in `Checkout.jsx`\n2. handle the `data`, `isLoading` \u0026 `error` states\n3. clear the cart once submitted the order in `Checkout.jsx` with help of a new `clearCart` function defined in `CartContext.jsx`\n4. clear the data after submitted a successful order with help of a new `clearData` function in `useHttp.js` \u0026 call it in `Checkout.jsx`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-food-order","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-food-order","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofiane-abou-abderrahim%2Freact-food-order/lists"}