How devmuhib/react-food-delivery-app works
This is a React pizza-ordering storefront: users browse and filter products, inspect and customize a pizza, add it to a persistent cart, and proceed to checkout. The sampled detail and cart-item code dispatches cart actions; Redux state is persisted in localStorage. The README documents filtering and contact, but contact has no corresponding page or route in the supplied tree. Home, listing, cart, and checkout implementations were not sampled, so their internal wiring is left general.
Main entry points: Routers.js Routes · Layout.js Layout · PizzaDetails.jsx Pizza details · cartSlice.js Cart state
Components 20
Application shell
Product catalog
- Home page
src/pages/Home.jsx - Pizza listing
src/pages/Pizzas.jsx - Pizza details
src/pages/PizzaDetails.jsx - Product data
src/assets/fake-data/products.js - Product card
src/components/UI/product-card/ProductCard.jsx - Ingredient option
src/components/ExtraIngredient/ExtraIngredient.jsx
Cart and checkout
- Cart page
src/pages/Cart.jsx - Checkout page
src/pages/Checkout.jsx - Cart view
src/components/UI/cart/Carts.jsx - Cart item
src/components/UI/cart/CartItem.jsx
Application state
- Redux store
src/store/store.js - Cart state
src/store/shopping-cart/cartSlice.js - Cart UI state
src/store/shopping-cart/cartUiSlice.js
Other components
- Shopper
- Browser storage
Connections 21
- Shopper → Routes: navigates
- App → Layout: renders
- Layout → Header: renders
- Layout → Routes: renders
- Layout → Footer: renders
- Layout → Cart view: conditionally renders
- Routes → Home page: routes to
- Routes → Pizza listing: routes to
- Routes → Pizza details: routes to
- Routes → Cart page: routes to
- Routes → Checkout page: routes to
- Pizza details → Product data: reads
- Pizza details → Ingredient option: renders
- Pizza details → Product card: renders related
- Pizza details → Cart state: dispatches item
- Header → Cart state: reads quantity
- Header → Cart UI state: dispatches toggle
- Cart item → Cart state: dispatches changes
- Redux store → Cart state: registers reducer
- Redux store → Cart UI state: registers reducer
- Cart state → Browser storage: reads and writes