How nguyen2451220054/24ct1-pham_tran_thao_nguyen-cnpm works
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 App coordinator · AuthContext.jsx Authentication state · HomePage.jsx Home page · CartContext.jsx Cart state and pricing
Components 21
App shell
- React entry
main.jsx - App coordinator
App.jsx - Navigation and search
Navbar.jsx - Footer and newsletter
Footer.jsx - Toast feedback
Toast.jsx
Product browsing
- Home page
HomePage.jsx - Hero banner
HeroBanner.jsx - Store features
Features.jsx - Product catalog
ProductsPage.jsx - Products and coupons
products.js - Product card
ProductCard.jsx - Product details
ProductModal.jsx - About and FAQ
AboutPage.jsx
Cart and pricing
- Cart and checkout summary
CartPage.jsx - Cart state and pricing
CartContext.jsx - Browser cart storage
Accounts
- Login screen
LoginPage.jsx - Registration screen
RegisterPage.jsx - Authentication state
AuthContext.jsx - Browser account storage
Other components
- Shopper
Connections 29
- 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