How h-thanh0603/fe_project works
ShoeStore is a React shoe-commerce frontend with simulated product data and browser-local state, not a live payment or authentication system. The main shopper journey is browsing/filtering a catalog, viewing a product and selecting a size, adding it to a persistent cart, checking out with delivery details, then viewing or managing the simulated order. Other branches cover the designed homepage, favorites, account/profile, and address book. Relationships reflect the excerpts, source index, and README; several feature sections are documented but their internals were not sampled.
Main entry points: ProductDetail.jsx Product Detail · CartContext.jsx Cart State · useLocalStorage.js Local Storage Hook · Checkout.jsx Checkout
Components 28
Application Shell
- Route Dispatch
src/App.jsx - Main Layout
src/components/layout/MainLayout.jsx
Shopping Experience
- Homepage
src/pages/Home.jsx - Home Sections
src/components/home - Product Catalog
src/pages/Products.jsx - Product Detail
src/pages/ProductDetail.jsx - Product Card
src/components/product/ProductCard/ProductCard.jsx - Recently Viewed
src/components/product/RecentlyViewed.jsx - Product Data
src/services/productService.js - Pagination
src/components/common/Pagination/Pagination.jsx - Cart Page
src/pages/Cart.jsx - Wishlist Page
src/pages/Wishlist.jsx
Local State
- Cart State
src/context/CartContext.jsx - Wishlist State
src/context/WishlistContext.jsx - Recent State
src/context/RecentlyViewedContext.jsx - Local Storage Hook
src/hooks/useLocalStorage.js - Cart Totals
src/services/cartService.js
Checkout and Orders
- Checkout
src/pages/Checkout.jsx - Order History
src/pages/Orders.jsx - Order Detail
src/pages/OrderDetail.jsx - Order Service
src/services/orderService.js
Account and Addresses
- Account User
src/context/AuthContext.jsx - Address Book
src/context/AddressContext.jsx - User Profile
src/pages/Profile.jsx - Address Management
src/pages/Addresses.jsx - Sign In and Register
src/pages/Login.jsx - Authentication Layout
src/components/layout/AuthLayout.jsx
Other components
- Shopper
Connections 42
- Shopper → Route Dispatch: opens routes
README.md - Route Dispatch → Main Layout: wraps routes
src/App.jsx - Main Layout → Homepage: renders route
- Homepage → Home Sections: renders sections
src/pages/Home.jsx - Shopper → Product Catalog: browses products
README.md - Product Catalog → Product Data: loads products
src/pages/Products.jsx - Product Catalog → Product Card: renders cards
src/pages/Products.jsx - Product Catalog → Pagination: uses pagination
src/pages/Products.jsx - Product Card → Product Data: gets brand names
src/components/product/ProductCard/ProductCard.jsx - Product Card → Cart State: adds item
src/components/product/ProductCard/ProductCard.jsx - Product Card → Wishlist State: toggles favorite
src/components/product/ProductCard/ProductCard.jsx - Shopper → Product Detail: opens product
README.md - Product Detail → Product Data: loads product
src/pages/ProductDetail.jsx - Product Detail → Cart State: adds selected size
src/pages/ProductDetail.jsx - Product Detail → Wishlist State: toggles favorite
src/pages/ProductDetail.jsx - Product Detail → Recent State: records viewed item
src/pages/ProductDetail.jsx - Product Detail → Recently Viewed: renders recently viewed
src/pages/ProductDetail.jsx - Recently Viewed → Product Data: loads products
src/components/product/RecentlyViewed.jsx - Recently Viewed → Product Card: renders cards
src/components/product/RecentlyViewed.jsx - Cart Page → Cart State: reads cart
src/pages/Cart.jsx - Wishlist Page → Wishlist State: reads favorites
src/pages/Wishlist.jsx - Wishlist Page → Product Data: loads products
src/pages/Wishlist.jsx - Cart State → Local Storage Hook: persists items
src/context/CartContext.jsx - Wishlist State → Local Storage Hook: persists favorites
src/context/WishlistContext.jsx - Recent State → Local Storage Hook: persists history
src/context/RecentlyViewedContext.jsx - Cart State → Cart Totals: calculates totals
src/context/CartContext.jsx - Shopper → Checkout: submits order
README.md - Checkout → Cart State: reads and clears cart
src/pages/Checkout.jsx - Checkout → Account User: reads account
src/pages/Checkout.jsx - Checkout → Address Book: uses delivery addresses
src/pages/Checkout.jsx - Checkout → Order Service: saves order
src/pages/Checkout.jsx - Order History → Order Service: loads orders
src/pages/Orders.jsx - Order Detail → Order Service: updates order
src/pages/OrderDetail.jsx - Order Service → Local Storage Hook: stores order history
src/services/orderService.js - Shopper → Sign In and Register: signs in or registers
README.md - Sign In and Register → Account User: uses account state
src/pages/Login.jsx - Sign In and Register → Authentication Layout: renders auth shell
src/pages/Login.jsx - Account User → Local Storage Hook: persists profile
src/context/AuthContext.jsx - Address Management → Address Book: manages addresses
src/pages/Addresses.jsx - Address Book → Account User: scopes addresses by user
src/context/AddressContext.jsx - Address Book → Local Storage Hook: persists address books
src/context/AddressContext.jsx - User Profile → Account User: updates profile
src/pages/Profile.jsx