# h-thanh0603/fe_project architecture
> Architecture diagram of the GitHub repository h-thanh0603/fe_project, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/h-thanh0603/fe_project
- Repository: https://github.com/h-thanh0603/fe_project
## Overview
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: [`src/pages/ProductDetail.jsx`](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/ProductDetail.jsx) (Product Detail), [`src/context/CartContext.jsx`](https://github.com/h-thanh0603/fe_project/blob/main/src/context/CartContext.jsx) (Cart State), [`src/hooks/useLocalStorage.js`](https://github.com/h-thanh0603/fe_project/blob/main/src/hooks/useLocalStorage.js) (Local Storage Hook), [`src/pages/Checkout.jsx`](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Checkout.jsx) (Checkout)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_app["Application Shell"]
node_routing["Route Dispatch
[App.jsx]"]
node_layout["Main Layout
[MainLayout.jsx]"]
end
subgraph group_shopping["Shopping Experience"]
node_home["Homepage
[Home.jsx]"]
node_home_sections["Home Sections"]
node_catalog["Product Catalog
[Products.jsx]"]
node_product_detail["Product Detail
[ProductDetail.jsx]"]
node_product_card["Product Card
[ProductCard.jsx]"]
node_recent["Recently Viewed
[RecentlyViewed.jsx]"]
node_product_data["Product Data
[productService.js]"]
node_pagination["Pagination
[Pagination.jsx]"]
node_cart_page["Cart Page
[Cart.jsx]"]
node_wishlist_page["Wishlist Page
[Wishlist.jsx]"]
end
subgraph group_state["Local State"]
node_cart_state["Cart State
[CartContext.jsx]"]
node_wishlist_state["Wishlist State"]
node_recent_state["Recent State"]
node_local_storage["Local Storage Hook
[useLocalStorage.js]"]
node_cart_math["Cart Totals
[cartService.js]"]
end
subgraph group_orders["Checkout and Orders"]
node_checkout["Checkout
[Checkout.jsx]"]
node_order_history["Order History
[Orders.jsx]"]
node_order_detail["Order Detail
[OrderDetail.jsx]"]
node_order_service["Order Service
[orderService.js]"]
end
subgraph group_account["Account and Addresses"]
node_user["Account User
[AuthContext.jsx]"]
node_address_state["Address Book
[AddressContext.jsx]"]
node_profile["User Profile
[Profile.jsx]"]
node_addresses["Address Management
[Addresses.jsx]"]
node_auth_pages["Sign In and Register
[Login.jsx]"]
node_auth_layout["Authentication Layout
[AuthLayout.jsx]"]
end
node_shopper(("Shopper"))
node_shopper -->|"opens routes"| node_routing
node_routing -->|"wraps routes"| node_layout
node_layout -.->|"renders route"| node_home
node_home -->|"renders sections"| node_home_sections
node_shopper -->|"browses products"| node_catalog
node_catalog -->|"loads products"| node_product_data
node_catalog -->|"renders cards"| node_product_card
node_catalog -->|"uses pagination"| node_pagination
node_product_card -->|"gets brand names"| node_product_data
node_product_card -->|"adds item"| node_cart_state
node_product_card -->|"toggles favorite"| node_wishlist_state
node_shopper -->|"opens product"| node_product_detail
node_product_detail -->|"loads product"| node_product_data
node_product_detail -->|"adds selected size"| node_cart_state
node_product_detail -->|"toggles favorite"| node_wishlist_state
node_product_detail -->|"records viewed item"| node_recent_state
node_product_detail -->|"renders recently viewed"| node_recent
node_recent -->|"loads products"| node_product_data
node_recent -->|"renders cards"| node_product_card
node_cart_page -->|"reads cart"| node_cart_state
node_wishlist_page -->|"reads favorites"| node_wishlist_state
node_wishlist_page -->|"loads products"| node_product_data
node_cart_state -->|"persists items"| node_local_storage
node_wishlist_state -->|"persists favorites"| node_local_storage
node_recent_state -->|"persists history"| node_local_storage
node_cart_state -->|"calculates totals"| node_cart_math
node_shopper -->|"submits order"| node_checkout
node_checkout -->|"reads and clears cart"| node_cart_state
node_checkout -->|"reads account"| node_user
node_checkout -->|"uses delivery addresses"| node_address_state
node_checkout -->|"saves order"| node_order_service
node_order_history -->|"loads orders"| node_order_service
node_order_detail -->|"updates order"| node_order_service
node_order_service -->|"stores order history"| node_local_storage
node_shopper -->|"signs in or registers"| node_auth_pages
node_auth_pages -->|"uses account state"| node_user
node_auth_pages -->|"renders auth shell"| node_auth_layout
node_user -->|"persists profile"| node_local_storage
node_addresses -->|"manages addresses"| node_address_state
node_address_state -->|"scopes addresses by user"| node_user
node_address_state -->|"persists address books"| node_local_storage
node_profile -->|"updates profile"| node_user
click node_routing "https://github.com/h-thanh0603/fe_project/blob/main/src/App.jsx"
click node_layout "https://github.com/h-thanh0603/fe_project/blob/main/src/components/layout/MainLayout.jsx"
click node_home "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Home.jsx"
click node_home_sections "https://github.com/h-thanh0603/fe_project/tree/main/src/components/home"
click node_catalog "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Products.jsx"
click node_product_detail "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/ProductDetail.jsx"
click node_product_card "https://github.com/h-thanh0603/fe_project/blob/main/src/components/product/ProductCard/ProductCard.jsx"
click node_recent "https://github.com/h-thanh0603/fe_project/blob/main/src/components/product/RecentlyViewed.jsx"
click node_product_data "https://github.com/h-thanh0603/fe_project/blob/main/src/services/productService.js"
click node_pagination "https://github.com/h-thanh0603/fe_project/blob/main/src/components/common/Pagination/Pagination.jsx"
click node_cart_page "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Cart.jsx"
click node_wishlist_page "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Wishlist.jsx"
click node_cart_state "https://github.com/h-thanh0603/fe_project/blob/main/src/context/CartContext.jsx"
click node_wishlist_state "https://github.com/h-thanh0603/fe_project/blob/main/src/context/WishlistContext.jsx"
click node_recent_state "https://github.com/h-thanh0603/fe_project/blob/main/src/context/RecentlyViewedContext.jsx"
click node_local_storage "https://github.com/h-thanh0603/fe_project/blob/main/src/hooks/useLocalStorage.js"
click node_cart_math "https://github.com/h-thanh0603/fe_project/blob/main/src/services/cartService.js"
click node_checkout "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Checkout.jsx"
click node_order_history "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Orders.jsx"
click node_order_detail "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/OrderDetail.jsx"
click node_order_service "https://github.com/h-thanh0603/fe_project/blob/main/src/services/orderService.js"
click node_user "https://github.com/h-thanh0603/fe_project/blob/main/src/context/AuthContext.jsx"
click node_address_state "https://github.com/h-thanh0603/fe_project/blob/main/src/context/AddressContext.jsx"
click node_profile "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Profile.jsx"
click node_addresses "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Addresses.jsx"
click node_auth_pages "https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Login.jsx"
click node_auth_layout "https://github.com/h-thanh0603/fe_project/blob/main/src/components/layout/AuthLayout.jsx"
classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_routing,node_layout toneBlue
class node_home,node_home_sections,node_catalog,node_product_detail,node_product_card,node_recent,node_product_data,node_pagination,node_cart_page,node_wishlist_page toneAmber
class node_cart_state,node_wishlist_state,node_recent_state,node_local_storage,node_cart_math toneMint
class node_checkout,node_order_history,node_order_detail,node_order_service toneRose
class node_user,node_address_state,node_profile,node_addresses,node_auth_pages,node_auth_layout,node_shopper toneIndigo
```
## Components
### Application Shell
- [Route Dispatch](https://github.com/h-thanh0603/fe_project/blob/main/src/App.jsx): `src/App.jsx`
- [Main Layout](https://github.com/h-thanh0603/fe_project/blob/main/src/components/layout/MainLayout.jsx): `src/components/layout/MainLayout.jsx`
### Shopping Experience
- [Homepage](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Home Sections](https://github.com/h-thanh0603/fe_project/tree/main/src/components/home): `src/components/home`
- [Product Catalog](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Products.jsx): `src/pages/Products.jsx`
- [Product Detail](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/ProductDetail.jsx): `src/pages/ProductDetail.jsx`
- [Product Card](https://github.com/h-thanh0603/fe_project/blob/main/src/components/product/ProductCard/ProductCard.jsx): `src/components/product/ProductCard/ProductCard.jsx`
- [Recently Viewed](https://github.com/h-thanh0603/fe_project/blob/main/src/components/product/RecentlyViewed.jsx): `src/components/product/RecentlyViewed.jsx`
- [Product Data](https://github.com/h-thanh0603/fe_project/blob/main/src/services/productService.js): `src/services/productService.js`
- [Pagination](https://github.com/h-thanh0603/fe_project/blob/main/src/components/common/Pagination/Pagination.jsx): `src/components/common/Pagination/Pagination.jsx`
- [Cart Page](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Cart.jsx): `src/pages/Cart.jsx`
- [Wishlist Page](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Wishlist.jsx): `src/pages/Wishlist.jsx`
### Local State
- [Cart State](https://github.com/h-thanh0603/fe_project/blob/main/src/context/CartContext.jsx): `src/context/CartContext.jsx`
- [Wishlist State](https://github.com/h-thanh0603/fe_project/blob/main/src/context/WishlistContext.jsx): `src/context/WishlistContext.jsx`
- [Recent State](https://github.com/h-thanh0603/fe_project/blob/main/src/context/RecentlyViewedContext.jsx): `src/context/RecentlyViewedContext.jsx`
- [Local Storage Hook](https://github.com/h-thanh0603/fe_project/blob/main/src/hooks/useLocalStorage.js): `src/hooks/useLocalStorage.js`
- [Cart Totals](https://github.com/h-thanh0603/fe_project/blob/main/src/services/cartService.js): `src/services/cartService.js`
### Checkout and Orders
- [Checkout](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Checkout.jsx): `src/pages/Checkout.jsx`
- [Order History](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Orders.jsx): `src/pages/Orders.jsx`
- [Order Detail](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/OrderDetail.jsx): `src/pages/OrderDetail.jsx`
- [Order Service](https://github.com/h-thanh0603/fe_project/blob/main/src/services/orderService.js): `src/services/orderService.js`
### Account and Addresses
- [Account User](https://github.com/h-thanh0603/fe_project/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Address Book](https://github.com/h-thanh0603/fe_project/blob/main/src/context/AddressContext.jsx): `src/context/AddressContext.jsx`
- [User Profile](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Profile.jsx): `src/pages/Profile.jsx`
- [Address Management](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Addresses.jsx): `src/pages/Addresses.jsx`
- [Sign In and Register](https://github.com/h-thanh0603/fe_project/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Authentication Layout](https://github.com/h-thanh0603/fe_project/blob/main/src/components/layout/AuthLayout.jsx): `src/components/layout/AuthLayout.jsx`
### Other components
- **Shopper**
## Connections
- Shopper → Route Dispatch: opens routes (evidence: `README.md`)
- Route Dispatch → Main Layout: wraps routes (evidence: `src/App.jsx`)
- Main Layout → Homepage: renders route
- Homepage → Home Sections: renders sections (evidence: `src/pages/Home.jsx`)
- Shopper → Product Catalog: browses products (evidence: `README.md`)
- Product Catalog → Product Data: loads products (evidence: `src/pages/Products.jsx`)
- Product Catalog → Product Card: renders cards (evidence: `src/pages/Products.jsx`)
- Product Catalog → Pagination: uses pagination (evidence: `src/pages/Products.jsx`)
- Product Card → Product Data: gets brand names (evidence: `src/components/product/ProductCard/ProductCard.jsx`)
- Product Card → Cart State: adds item (evidence: `src/components/product/ProductCard/ProductCard.jsx`)
- Product Card → Wishlist State: toggles favorite (evidence: `src/components/product/ProductCard/ProductCard.jsx`)
- Shopper → Product Detail: opens product (evidence: `README.md`)
- Product Detail → Product Data: loads product (evidence: `src/pages/ProductDetail.jsx`)
- Product Detail → Cart State: adds selected size (evidence: `src/pages/ProductDetail.jsx`)
- Product Detail → Wishlist State: toggles favorite (evidence: `src/pages/ProductDetail.jsx`)
- Product Detail → Recent State: records viewed item (evidence: `src/pages/ProductDetail.jsx`)
- Product Detail → Recently Viewed: renders recently viewed (evidence: `src/pages/ProductDetail.jsx`)
- Recently Viewed → Product Data: loads products (evidence: `src/components/product/RecentlyViewed.jsx`)
- Recently Viewed → Product Card: renders cards (evidence: `src/components/product/RecentlyViewed.jsx`)
- Cart Page → Cart State: reads cart (evidence: `src/pages/Cart.jsx`)
- Wishlist Page → Wishlist State: reads favorites (evidence: `src/pages/Wishlist.jsx`)
- Wishlist Page → Product Data: loads products (evidence: `src/pages/Wishlist.jsx`)
- Cart State → Local Storage Hook: persists items (evidence: `src/context/CartContext.jsx`)
- Wishlist State → Local Storage Hook: persists favorites (evidence: `src/context/WishlistContext.jsx`)
- Recent State → Local Storage Hook: persists history (evidence: `src/context/RecentlyViewedContext.jsx`)
- Cart State → Cart Totals: calculates totals (evidence: `src/context/CartContext.jsx`)
- Shopper → Checkout: submits order (evidence: `README.md`)
- Checkout → Cart State: reads and clears cart (evidence: `src/pages/Checkout.jsx`)
- Checkout → Account User: reads account (evidence: `src/pages/Checkout.jsx`)
- Checkout → Address Book: uses delivery addresses (evidence: `src/pages/Checkout.jsx`)
- Checkout → Order Service: saves order (evidence: `src/pages/Checkout.jsx`)
- Order History → Order Service: loads orders (evidence: `src/pages/Orders.jsx`)
- Order Detail → Order Service: updates order (evidence: `src/pages/OrderDetail.jsx`)
- Order Service → Local Storage Hook: stores order history (evidence: `src/services/orderService.js`)
- Shopper → Sign In and Register: signs in or registers (evidence: `README.md`)
- Sign In and Register → Account User: uses account state (evidence: `src/pages/Login.jsx`)
- Sign In and Register → Authentication Layout: renders auth shell (evidence: `src/pages/Login.jsx`)
- Account User → Local Storage Hook: persists profile (evidence: `src/context/AuthContext.jsx`)
- Address Management → Address Book: manages addresses (evidence: `src/pages/Addresses.jsx`)
- Address Book → Account User: scopes addresses by user (evidence: `src/context/AddressContext.jsx`)
- Address Book → Local Storage Hook: persists address books (evidence: `src/context/AddressContext.jsx`)
- User Profile → Account User: updates profile (evidence: `src/pages/Profile.jsx`)