# nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm architecture

> Architecture diagram of the GitHub repository nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm
- Repository: https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm

## Overview

This is a small FreshMilk Mart storefront implemented as a React single-page app; the README describes only the Vite template, not product capabilities. The principal flow is browsing a product catalog, viewing product details, adding items to a persistent cart, and managing quantities or coupons. Separate account screens provide demo registration and login backed by browser storage. The tree lists files at its root, although sampled imports refer to nested directories; graph paths therefore use the exact tree paths. Unsampled page wiring is shown conservatively.

Main entry points: [`App.jsx`](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/App.jsx) (App coordinator), [`AuthContext.jsx`](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/AuthContext.jsx) (Authentication state), [`HomePage.jsx`](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/HomePage.jsx) (Home page), [`CartContext.jsx`](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/CartContext.jsx) (Cart state and pricing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_main["React entry<br/>[main.jsx]"]
  node_approot["App coordinator<br/>[App.jsx]"]
  node_navbar["Navigation and search<br/>[Navbar.jsx]"]
  node_footer["Footer and newsletter<br/>[Footer.jsx]"]
  node_toast["Toast feedback<br/>[Toast.jsx]"]
end

subgraph group_catalog["Product browsing"]
  node_home["Home page<br/>[HomePage.jsx]"]
  node_hero["Hero banner<br/>[HeroBanner.jsx]"]
  node_features["Store features<br/>[Features.jsx]"]
  node_products["Product catalog<br/>[ProductsPage.jsx]"]
  node_productdata["Products and coupons<br/>[products.js]"]
  node_productcard["Product card<br/>[ProductCard.jsx]"]
  node_productmodal["Product details<br/>[ProductModal.jsx]"]
  node_about["About and FAQ<br/>[AboutPage.jsx]"]
end

subgraph group_cart["Cart and pricing"]
  node_cartpage["Cart and checkout summary<br/>[CartPage.jsx]"]
  node_cartcontext["Cart state and pricing<br/>[CartContext.jsx]"]
  node_cartstorage[("Browser cart storage")]
end

subgraph group_account["Accounts"]
  node_login["Login screen<br/>[LoginPage.jsx]"]
  node_register["Registration screen<br/>[RegisterPage.jsx]"]
  node_authcontext["Authentication state<br/>[AuthContext.jsx]"]
  node_authstorage[("Browser account storage")]
end

node_shopper(("Shopper"))

node_shopper -->|"opens"| node_main
node_main -->|"renders"| node_approot
node_approot -->|"renders"| node_navbar
node_approot -->|"selects page"| node_home
node_approot -->|"selects page"| node_products
node_approot -->|"selects page"| node_about
node_approot -->|"selects page"| node_cartpage
node_approot -->|"selects page"| node_login
node_approot -->|"selects page"| node_register
node_approot -->|"renders selection"| node_productmodal
node_approot -->|"renders"| node_footer
node_approot -->|"renders"| node_toast
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_features
node_home -->|"renders products"| node_productcard
node_home -->|"reads products"| node_productdata
node_products -->|"reads products"| node_productdata
node_productcard -->|"selects product"| node_approot
node_productmodal -->|"adds item"| node_cartcontext
node_cartpage -->|"reads and updates"| node_cartcontext
node_cartcontext -->|"reads coupons"| node_productdata
node_cartcontext -->|"persists cart"| node_cartstorage
node_cartpage -->|"reads account"| node_authcontext
node_login -->|"logs in"| node_authcontext
node_register -->|"registers account"| node_authcontext
node_register -->|"shows feedback"| node_cartcontext
node_navbar -->|"manages session"| node_authcontext
node_authcontext -->|"persists session"| node_authstorage
node_authcontext -->|"persists users"| node_authstorage

click node_main "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/main.jsx"
click node_approot "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/App.jsx"
click node_navbar "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Navbar.jsx"
click node_footer "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Footer.jsx"
click node_toast "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Toast.jsx"
click node_home "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/HomePage.jsx"
click node_hero "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/HeroBanner.jsx"
click node_features "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Features.jsx"
click node_products "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/ProductsPage.jsx"
click node_productdata "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/products.js"
click node_productcard "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/ProductCard.jsx"
click node_productmodal "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/ProductModal.jsx"
click node_about "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/AboutPage.jsx"
click node_cartpage "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/CartPage.jsx"
click node_cartcontext "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/CartContext.jsx"
click node_login "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/LoginPage.jsx"
click node_register "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/RegisterPage.jsx"
click node_authcontext "https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/AuthContext.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_main,node_approot,node_navbar,node_footer,node_toast toneBlue
class node_home,node_hero,node_features,node_products,node_productdata,node_productcard,node_productmodal,node_about toneAmber
class node_cartpage,node_cartcontext,node_cartstorage toneMint
class node_login,node_register,node_authcontext,node_authstorage toneRose
class node_shopper toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/main.jsx): `main.jsx`
- [App coordinator](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/App.jsx): `App.jsx`
- [Navigation and search](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Navbar.jsx): `Navbar.jsx`
- [Footer and newsletter](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Footer.jsx): `Footer.jsx`
- [Toast feedback](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Toast.jsx): `Toast.jsx`

### Product browsing

- [Home page](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/HomePage.jsx): `HomePage.jsx`
- [Hero banner](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/HeroBanner.jsx): `HeroBanner.jsx`
- [Store features](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/Features.jsx): `Features.jsx`
- [Product catalog](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/ProductsPage.jsx): `ProductsPage.jsx`
- [Products and coupons](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/products.js): `products.js`
- [Product card](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/ProductCard.jsx): `ProductCard.jsx`
- [Product details](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/ProductModal.jsx): `ProductModal.jsx`
- [About and FAQ](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/AboutPage.jsx): `AboutPage.jsx`

### Cart and pricing

- [Cart and checkout summary](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/CartPage.jsx): `CartPage.jsx`
- [Cart state and pricing](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/CartContext.jsx): `CartContext.jsx`
- **Browser cart storage**

### Accounts

- [Login screen](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/LoginPage.jsx): `LoginPage.jsx`
- [Registration screen](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/RegisterPage.jsx): `RegisterPage.jsx`
- [Authentication state](https://github.com/nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm/blob/main/AuthContext.jsx): `AuthContext.jsx`
- **Browser account storage**

### Other components

- **Shopper**

## Connections

- Shopper → React entry: opens
- React entry → App coordinator: renders
- App coordinator → Navigation and search: renders
- App coordinator → Home page: selects page
- App coordinator → Product catalog: selects page
- App coordinator → About and FAQ: selects page
- App coordinator → Cart and checkout summary: selects page
- App coordinator → Login screen: selects page
- App coordinator → Registration screen: selects page
- App coordinator → Product details: renders selection
- App coordinator → Footer and newsletter: renders
- App coordinator → Toast feedback: renders
- Home page → Hero banner: renders
- Home page → Store features: renders
- Home page → Product card: renders products
- Home page → Products and coupons: reads products
- Product catalog → Products and coupons: reads products
- Product card → App coordinator: selects product
- Product details → Cart state and pricing: adds item
- Cart and checkout summary → Cart state and pricing: reads and updates
- Cart state and pricing → Products and coupons: reads coupons
- Cart state and pricing → Browser cart storage: persists cart
- Cart and checkout summary → Authentication state: reads account
- Login screen → Authentication state: logs in
- Registration screen → Authentication state: registers account
- Registration screen → Cart state and pricing: shows feedback
- Navigation and search → Authentication state: manages session
- Authentication state → Browser account storage: persists session
- Authentication state → Browser account storage: persists users