TakahashiNgCoffee Shop Frontend
Dự án Frontend cho hệ thống đặt món cà phê, xây dựng bằng Next.js App Router, React 19, TypeScript và Tailwind CSS v4.
Mô Tả Dự Án
Giao diện người dùng (frontend) cho hệ thống đặt và bán đồ uống trực tuyến.
Trang Người Dùng (User Page - /)
Dành cho khách hàng:
- Duyệt thực đơn theo danh mục (sidebar collapsible)
- Tìm kiếm món theo tên / mô tả
- Xem card sản phẩm với giá và nút Mua
- Lọc tự động theo trạng thái available
Trang Quản Lý (Manager Page - chưa triển khai)
Dành cho chủ quán / nhân viên:
- Quản lý thực đơn (thêm, sửa, xóa món)
- Theo dõi và xử lý đơn hàng
Cách Chạy Dự Án
Yêu cầu hệ thống
- Node.js >= 18
- pnpm (khuyến nghị) hoặc npm
Cài đặt
pnpm install
Dev
pnpm dev
Mở trình duyệt tại http://localhost:3000
Build
pnpm build && pnpm start
Lint
pnpm lint
Cấu Trúc Thư Mục
frondend/
+-- app/ # Next.js App Router
| +-- layout.tsx # Root layout
| +-- page.tsx # Trang chủ - sidebar + product grid
| +-- globals.css # CSS design tokens + Tailwind import
+-- components/ # Shared UI components
| +-- Navbar.tsx # Sidebar danh mục (collapsible)
| +-- CartProduct.tsx # Card sản phẩm
| +-- COMPONENTS.md # Tài liệu component
+-- layouts/ # Layout-level components
| +-- header.tsx # Sticky top header
| +-- footer.tsx # Footer
+-- lib/ # Shared logic & data
| +-- constants.ts # Mock data
| +-- types.ts # TypeScript interfaces
+-- types/ # Global TypeScript declarations
| +-- css.d.ts # CSS module type shim
+-- public/ # Static assets
+-- WORKFLOW.md # Tài liệu kiến trúc & quy trình
+-- next.config.ts
+-- tsconfig.json
+-- postcss.config.mjs
+-- eslint.config.mjs
+-- package.json
+-- pnpm-workspace.yaml
Công Nghệ Sử Dụng
| Công nghệ | Phiên bản | Mục đích |
|---|---|---|
| Next.js | 16.1.7 | React Framework (App Router) |
| React | 19.2.3 | Thư viện UI |
| TypeScript | ^5 | Kiểu dữ liệu tĩnh |
| Tailwind CSS | ^4 | Utility-first CSS framework |
| Geist Font | - | Font chữ (Google Fonts via next/font) |
| FontAwesome | 6.7.2 | Icon library (CDN) |
| pnpm | - | Package manager |
| ESLint | ^9 | Linting |
Ghi Chú Phát Triển
- Trang chủ (app/page.tsx) là điểm vào chính của User Page
- Design tokens định nghĩa trong app/globals.css dưới dạng CSS custom properties
- Mock data nằm trong lib/constants.ts - thay bằng API calls khi backend sẵn sàng
- Dark mode: biến CSS đã chuẩn bị sẵn trong globals.css nhưng chưa kích hoạt
- Ảnh sản phẩm: thêm ảnh thực vào public/imgs/products/
- Xem WORKFLOW.md để hiểu kiến trúc tổng thể và quy trình mở rộng dự án