How hamza0718/shopping_cart works
This is a React storefront: users browse and filter products, open a product detail, add items to a shared cart, and navigate to checkout. React Router selects the page components; product data is fetched from Fake Store API, while Redux holds cart state. The tree also includes home, about, contact, and login pages. Source excerpts establish the catalog and cart wiring; details of unsampled pages and checkout behavior are limited to their presence and routes.
Main entry points: App.js App Router · Product.js Product Detail · store.js Redux Store · Cart.js Cart Page
Components 18
Application Shell
- App Router
src/App.js - Navigation
src/components/Navbar.js - Footer
src/components/Footer.js - React Entry
src/index.js
Product Catalog
- Product Listing
src/components/Products.js - Product Detail
src/components/Product.js
Cart State
- Cart Page
src/components/Cart.js - Cart Actions
src/redux/action/index.js - Redux Store
src/redux/store.js - Cart Reducer
src/redux/reducer/handle.Cart.js - Reducer Setup
src/redux/reducer/index.js
Storefront Pages
- Home Page
src/components/Home.js - Checkout Page
src/components/Checkout.js - Login Page
src/components/Login.js - About Page
src/components/About.js - Contact Page
src/components/Contact.js
Other components
- Shopper
- Fake Store API
Connections 22
- Shopper → React Entry: opens app
- React Entry → App Router: renders
- App Router → Navigation: renders
- App Router → Home Page: routes to
- App Router → Product Listing: routes to
- App Router → Product Detail: routes to
- App Router → Cart Page: routes to
- App Router → Checkout Page: routes to
- App Router → Login Page: routes to
- App Router → About Page: routes to
- App Router → Contact Page: routes to
- Product Listing → Fake Store API: fetches products
- Product Detail → Fake Store API: fetches detail
- Product Listing → Product Detail: links to detail
- Product Detail → Cart Actions: creates add action
- Product Detail → Redux Store: dispatches action
- Cart Page → Cart Actions: creates cart actions
- Cart Page → Redux Store: dispatches actions
- Navigation → Redux Store: reads cart state
- Cart Page → Redux Store: reads cart state
- Redux Store → Reducer Setup: uses reducers
- Reducer Setup → Cart Reducer: includes