How vietthangpq099-prog/vietthangcnpm works
OpticShop is a Vietnamese eyewear storefront with customer shopping, account, and warranty pages, alongside staff order handling and admin catalog, inventory, order, and user screens. The visible product-to-cart interaction updates reducer-managed cart state, which the cart provider restores from and persists to browser localStorage. The README is only the Next.js starter README, so it does not document deeper business behavior; sampled excerpts also do not establish backend services or checkout-to-order persistence.
Main entry points: ProductCard.tsx Product card · CartContext.tsx Cart state · don-hang/page.tsx Staff orders · quan-tri/page.tsx Admin dashboard
Components 26
Storefront
- Home
app/(shop)/page.tsx - Product catalog
app/(shop)/san-pham/page.tsx - Product detail
app/(shop)/san-pham/[id]/page.tsx - Product search
app/(shop)/tim-kiem/page.tsx - Mock product data
lib/data/mock-products.ts - Product card
components/product/ProductCard.tsx
Cart and checkout
- Cart state
lib/context/CartContext.tsx - Browser localStorage
- Cart page
app/(shop)/gio-hang/page.tsx - Checkout
app/(shop)/thanh-toan/page.tsx - Order confirmation
app/(shop)/dat-hang-thanh-cong/page.tsx - Customer orders
app/(shop)/don-hang/page.tsx
Accounts and warranty
- Registration
app/(auth)/dang-ky/page.tsx - Sign in
app/(auth)/dang-nhap/page.tsx - Customer account
app/(shop)/tai-khoan/page.tsx - Warranty
app/(shop)/bao-hanh/page.tsx
Staff and administration
- Staff orders
app/(nhan-vien)/nhan-vien/don-hang/page.tsx - Processed orders
app/(nhan-vien)/nhan-vien/da-xu-ly/page.tsx - Admin dashboard
app/(admin)/quan-tri/page.tsx - Product management
app/(admin)/quan-tri/san-pham/page.tsx - Add product
app/(admin)/quan-tri/san-pham/them-moi/page.tsx - Inventory
app/(admin)/quan-tri/kho-hang/page.tsx - Order management
app/(admin)/quan-tri/don-hang/page.tsx - User management
app/(admin)/quan-tri/nguoi-dung/page.tsx - Mock admin data
lib/data/mock-admin.ts
Other components
- Shopper
Connections 16
- Shopper → Home: visits
- Product card → Mock product data: formats price
- Product card → Cart state: adds item
- Cart state → Browser localStorage: restores and saves
- Shopper → Product catalog: browses
- Shopper → Product search: searches
- Shopper → Product detail: views
- Shopper → Cart page: manages cart
- Shopper → Checkout: checks out
- Shopper → Customer orders: tracks orders
- Shopper → Registration: registers
- Shopper → Sign in: signs in
- Shopper → Customer account: manages account
- Shopper → Warranty: checks warranty
- Staff orders → Processed orders: reviews processing
- Admin dashboard → Mock admin data: uses mock data