View Code? Open in Web Editor
NEW
Home Page: https://sofiane-abou-abderrahim.github.io/react-food-order/
JavaScript 77.42%
HTML 1.83%
CSS 20.75%
react-food-order's Introduction
Time To Practice: Food Order App
Components, State, Context, Effects, HTTP Requests & More!
- Building a Complete Project From the Ground Up
- Building & Configuring Components
- Using State & Context
- Managing HTTP Requests & Side Effects
Build a "Food Order" web app
- Use the starting project attached to this lecture
- Add components for displaying products, the cart (in a modal) and a checkout form (also in a modal)
- Fetch the (dummy) meals data from the backend & show it on the screen (Get /meals)
- Allow users to add & remove products to / from the cart
- Send cart data along with user data (full name, email, street, postal code, city) to the backend (POST /orders)
- Handle loading & error states
- run
npm install
in the backend
folder
- run
npm install
in the main project folder (frontend)
- run
npm start
in the backend
folder
- run
npm run dev
in the main project folder (frontend)
- create a
README.md
file
1. Planning the App & Adding a First Component
- add a
components
folder
- inside of it, add a
Header.jsx
file
- use this header in the
App.jsx
component
2. Fetching Meals Data (GET HTTP Request)
- add a new
Meals.jsx
component
- send a GET HTTP request to the dummy backend from inside
Meals.jsx
- output the meals items (just the names for now) from inside
App.jsx
3. Adding a "MealItem" Component
- add a
MealItem.jsx
file
- output the
<MealItem>
component in Meals.jsx
- prepend the image source data in
MealItem.jsx
to load the images from the backend
4. Formatting & Outputting Numbers as Currency
- add a new
util
folder & add a new formatting.js
file inside it for formatting the price
- use the
currencyFormatter
function in MealItem.jsx
5. Creating a Configurable & Flexible Custom Button Component
- add a
UI
subfolder inside the components
folder for UI core generic building blocks
- add a new
Button.jsx
inside that UI
folder
- use this
<Button>
component in your app, for example:
- a text only button style in the
Header.jsx
component
- an other button style in the
MealItem.jsx
component
6. Getting Started with Cart Context & Reducer
- use React's context feature to manage the cart data in a more general centralized way
- add a
store
folder
- inside it, add a
CartContext.jsx
file where you manage this cart data & this cart context
- use React's Reducer feature instead of State
7. Finishing & Using the Cart Context & Reducer
- finish the cart logic inside the
cartReducer
function in CartContext.jsx
- connect the cart logic with help of
useContext()
to the different components
- use the
useReducer()
hook correctly inside of the CartContextProvider
component
- pass the cart context value to the
<CartContext.Provider>
component
- use the cart context inside of the other components
- wrap all your components with the
<CartContextProvider>
component in App.jsx
- use the cart context in
MealItem.jsx
to update your cart
- access the cart context in
Header.jsx
to display the number of meals in the cart
8. Adding a Reusable Modal Component with useEffect
- build a modal as a standalone reusable UI component named
Modal.jsx
- use an
open
prop & useEffect()
& useRef()
to open this dialog
9. Opening the Cart in the Modal via a New Context
- add a new
Cart.jsx
component for outputting the cart data on the screen
- use
useContext()
to get access to the cart items stored in the cart context
- add a new
UserProgressContext.jsx
component for taking care of showing or not showing this cart data
- use the
UserProgressContextProvider
in App.jsx
and wrap it around the other components
- use the
UserProgressCtx
in Header.jsx
- show the Cart component in
Cart.jsx
with help of useContext()
- output the
<Cart>
component in App.jsx
- set the logic for closing the modal in
Cart.jsx
& Modal.jsx
10. Working on the Cart Items
- add a new
CartItem.jsx
- output the
<CartItem>
component in Cart.jsx
- make sure the buttons increase & decrease the items quantity in the cart
11. Adding a Custom Input Component & Managing Modal Visibility
- show the
Go to Checkout
button only if we have an item in the cart in Cart.jsx
- add a new
Checkout.jsx
component that will show a new page when clicking on the Go to Checkout
button
- it should open a modal
- create a new shared
Input.jsx
component
- manage opening & closing the modal
- output the
<Checkout>
component in App.jsx
to show the checkout modal
- update the
UserProgress
context whenever the dialog is closed with escape
by adding an onClose
prop in Modal.jsx
- use the
onClose
prop in Cart.jsx
& Checkout.jsx
12. Handling Form Submission & Validation
- handle form submission in
Checkout.jsx
- validate the input in
Input.jsx
with help of the required
attribute
- get hold of the entered values with the built-in
FormData
feature in Checkout.jsx
13. Sending a POST Request with Order Data
- send the POST request inside the
handleSubmit
function in Checkout.jsx
- make some order on the app & check the
orders.json
file to see whether the order was sent successfully
14. Adding a Custom HTTP Hook & Avoiding Common Errors
- create a new
hooks
folder & add a new useHttp.js
file inside of it
- define a new
sendHttpRequest
helper function
- define another new
sendRequest
function inside of the useHttp
custom hook function
- use
try / catch
- manage some state to reflect those different requests states in the UI
- use the
useHttp
custom hook in Meals.jsx
15. Handling HTTP Loading & Error States
- add a new
Error.jsx
component to output some error message
- add CSS styles for loading & error messages in
index.css
- use the
useHttp.jsx
hook component in Checkout.jsx
- handle the
data
, isLoading
& error
states
- clear the cart once submitted the order in
Checkout.jsx
with help of a new clearCart
function defined in CartContext.jsx
- clear the data after submitted a successful order with help of a new
clearData
function in useHttp.js
& call it in Checkout.jsx
react-food-order's People
Contributors
Watchers