How vietthangpq099-prog/nguyenhuuvietthang-cnpm works
OpticShop is a Vietnamese online eyewear shop with customer, staff, and administrator experiences. The main customer journey is browsing/searching the product catalog, adding eyewear to a persistent cart, and submitting checkout; separate pages support order history, accounts, and warranty information. Staff handle order work, while administrators oversee orders, products, inventory, users, and dashboard metrics. The README documents SQLite-backed product and order APIs, but sampled admin and storefront pages also rely on mock data. Some route implementations were not sampled, so uncertain connections are omitted.
Main entry points: mock-products.ts Product mock data · mock-admin.ts Admin mock data · ProductCard.tsx Product cards · CartContext.tsx Cart state
Components 24
Storefront
- Product browsing
app/(shop)/san-pham - Product search
app/(shop)/tim-kiem/page.tsx - Product details
app/(shop)/san-pham/[id]/page.tsx - Product cards
components/product/ProductCard.tsx - Shop homepage
app/(shop)/page.tsx - Account and auth
app/(shop)/tai-khoan/page.tsx - Warranty information
app/(shop)/bao-hanh/page.tsx
Shopping and orders
- Cart state
lib/context/CartContext.tsx - Cart page
app/(shop)/gio-hang/page.tsx - Checkout
app/(shop)/thanh-toan/page.tsx - Order API
app/api/orders/route.ts - Order history
app/(shop)/don-hang/page.tsx - Order confirmation
app/(shop)/dat-hang-thanh-cong/page.tsx
Store operations
- Staff order handling
app/(nhan-vien)/nhan-vien - Admin dashboard
app/(admin)/quan-tri/page.tsx - Order administration
app/(admin)/quan-tri/don-hang/page.tsx - Inventory management
app/(admin)/quan-tri/kho-hang/page.tsx - Product administration
app/(admin)/quan-tri/san-pham - User administration
app/(admin)/quan-tri/nguoi-dung/page.tsx
Application services
- Product mock data
lib/data/mock-products.ts - Admin mock data
lib/data/mock-admin.ts - Product API
app/api/products/route.ts - SQLite database
lib/db.ts
Other components
- Shopper
Connections 26
- Shopper → Shop homepage: visits
- Shopper → Product browsing: browses
- Shopper → Product search: searches
- Shopper → Account and auth: manages account
- Shopper → Warranty information: views warranty
- Product browsing → Product mock data: reads
app/(shop)/san-pham/page.tsx - Product search → Product mock data: searches
app/(shop)/tim-kiem/page.tsx - Product browsing → Product cards: renders
app/(shop)/san-pham/page.tsx - Product search → Product cards: renders
app/(shop)/tim-kiem/page.tsx - Product details → Product mock data: reads
app/(shop)/san-pham/[id]/page.tsx - Product details → Product cards: renders
app/(shop)/san-pham/[id]/page.tsx - Product cards → Cart state: adds item
components/product/ProductCard.tsx - Product details → Cart state: adds item
app/(shop)/san-pham/[id]/page.tsx - Cart page → Cart state: uses state
- Checkout → Cart state: reads and clears
app/(shop)/thanh-toan/page.tsx - Checkout → Order API: submits order
- Order API → SQLite database: reads and writes
app/api/orders/route.ts - Product API → SQLite database: reads products
app/api/products/route.ts - Order history → Admin mock data: reads
app/(shop)/don-hang/page.tsx - Staff order handling → Admin mock data: reads order data
app/(nhan-vien)/nhan-vien/don-hang/page.tsx - Admin dashboard → Admin mock data: reads metrics and orders
app/(admin)/quan-tri/page.tsx - Admin dashboard → Product mock data: reads stock
app/(admin)/quan-tri/page.tsx - Order administration → Admin mock data: reads
app/(admin)/quan-tri/don-hang/page.tsx - Inventory management → Product mock data: reads
app/(admin)/quan-tri/kho-hang/page.tsx - Product administration → Product mock data: reads
app/(admin)/quan-tri/san-pham/page.tsx - User administration → Admin mock data: reads
app/(admin)/quan-tri/nguoi-dung/page.tsx