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.
Tính Năng Hiện Tại
1. Trang Đăng Nhập & Đăng Ký (app/(main)/login, app/(main)/register)
- Form đăng nhập với validation (username, password)
- Form đăng ký với xác thực OTP
- Lưu trữ thông tin người dùng trong localStorage
- Hỗ trợ 3 loại tài khoản: Manager, Staff, Customer
- Hiển thị thông tin shop trong form
2. Trang Khám Phá Quán Nước (app/(feed)/feed)
- Danh sách các quán cà phê
- Tìm kiếm theo tên quán và địa chỉ
- Thẻ quán với ảnh, địa chỉ, nút "Xem menu"
- Responsive layout (grid 1/2/3 cột)
- Empty state khi không tìm thấy quán
3. Trang Chính - Duyệt Thực Đơn (app/(main))
Dành cho khách hàng:
- Sidebar collapsible (64px/240px) - danh mục sản phẩm
- Grid sản phẩm responsive (1-5 cột tuỳ thiết bị)
- 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
- Mobile menu: scrollable category tabs (< md)
4. Trang Thanh Toán (app/(main)/payment)
- Bảng danh sách sản phẩm trong giỏ hàng với điều chỉnh số lượng
- Invoice aside sticky với tổng giá và nút thanh toán (Tiền mặt, QR)
- Modal đánh giá 5 sao dành riêng cho khách hàng (ReviewModal)
5. Hệ Thống Giỏ Hàng (lib/cart-context.tsx)
- Lưu trữ trạng thái giỏ trong localStorage
- Thêm/xóa/tăng/giảm số lượng sản phẩm
- Tính tổng giá và số mặt hàng
- Persist dữ liệu giữa các session
6. Hệ Thống Xác Thực (lib/auth-context.tsx)
- Quản lý trạng thái người dùng (login/logout/register)
- Lưu thông tin user trong localStorage
- Mock auth database với 3 loại tài khoản
- Hỗ trợ hoàn tất đăng ký qua OTP
7. Hệ Thống Danh Mục (lib/menu-context.tsx)
- Chia sẻ trạng thái category giữa Header mobile và Sidebar
- Tự động clear search khi thay đổi category
8. Manager Dashboard (app/(manager)/manager)
Dành cho quản lý:
- Sidebar desktop: Brand, tab navigation (Thực đơn / Combo / Danh mục), link tới Analytics
- CRUD sản phẩm, combo, danh mục qua modals
- Auth guard: tự động redirect non-manager về
/
9. Trang Phân Tích Tài Chính (app/(manager)/manager/analytics)
- Summary cards: Doanh thu, đơn hàng, lợi nhuận, giá trị đơn trung bình (so sánh kỳ trước)
- Bộ chọn kỳ: Ngày / Tuần / Tháng / Năm
- Biểu đồ SVG thuần: Line, Bar, Pie — hover tooltips tương tác
- Bảng top 5 sản phẩm và bảng chi tiết có thể sắp xếp
- Lọc theo danh mục
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 & Format
pnpm lint
pnpm format
Release
pnpm release
Cấu Trúc Thư Mục
frondend/
+-- app/ # Next.js App Router
| +-- layout.tsx # Root layout + Header + Footer
| +-- globals.css # CSS design tokens + Tailwind import
| +-- providers.tsx # Context providers (Auth, Menu, Cart)
| +-- APP.md # Tài liệu chi tiết về routes
| +-- (main)/ # Main route group
| | +-- layout.tsx # Main layout
| | +-- page.tsx # Trang chính - duyệt thực đơn (/)
| | +-- login/page.tsx # Trang đăng nhập (/login)
| | +-- register/page.tsx # Trang đăng ký (/register)
| | +-- payment/page.tsx # Trang thanh toán (/payment)
| +-- (feed)/ # Feed route group
| | +-- layout.tsx # Feed layout
| | +-- feed/page.tsx # Trang khám phá quán nước (/feed)
| +-- (manager)/ # Manager route group
| +-- layout.tsx # Manager layout - auth guard + ManagerProvider
| +-- manager/page.tsx # Manager Dashboard (/manager)
| +-- manager/analytics/page.tsx # Financial Analytics (/manager/analytics)
+-- components/ # Atomic Design UI components
| +-- atoms/ # Nguyên tử: Button, Input, Badge, Text...
| +-- molecules/ # Phân tử: ProductCard, ShopCard, SearchBar...
| +-- organisms/ # Tổ chức: CategorySidebar, CartFab, ProductGrid,
| | # ReviewModal, analytics charts, manager tabs...
| +-- templates/ # Bố cục trang: MainLayout, AuthLayout,
| | # FeedLayout, ManagerLayout
| +-- COMPONENTS.md # Tài liệu chi tiết components (Atomic Design)
+-- layouts/ # Layout-level components
| +-- header.tsx # Sticky top header + auth info
| +-- footer.tsx # Footer + shop info
| +-- LAYOUTS.md # Tài liệu chi tiết layouts
+-- lib/ # Shared logic & data
| +-- constants.ts # Mock data (products, shops, users, analytics, shop info)
| +-- types.ts # TypeScript interfaces
| +-- auth-context.tsx # Authentication context & provider
| +-- cart-context.tsx # Shopping cart context & provider
| +-- menu-context.tsx # Menu/Category context & provider
| +-- manager-context.tsx # Manager CRUD context & provider
| +-- analytics-utils.ts # Financial analytics helper utilities
| +-- LIB.md # Tài liệu chi tiết về lib
+-- types/ # Global TypeScript declarations
| +-- css.d.ts # CSS module type shim
+-- public/ # Static assets
| +-- imgs/
| | +-- logo.png
| | +-- products/ # Ảnh sản phẩm
| +-- favicon/
+-- scripts/ # Release & CI scripts
| +-- release.ts
+-- WORKFLOW.md # Tài liệu kiến trúc tổng thể & quy trình
+-- README.md # (file này) - Mô tả dự án
+-- TODO.md # Danh sách tính năng hoàn thành & chưa làm
+-- Atomic.md # Hướng dẫn cấu trúc Atomic Design
+-- AGENTS.md # Hướng dẫn cho AI agents
+-- next.config.ts
+-- tsconfig.json
+-- postcss.config.mjs
+-- eslint.config.ts
+-- release.config.ts
+-- package.json
+-- pnpm-lock.yaml
+-- pnpm-workspace.yaml
+-- dockerfile
+-- k8s.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.2.2 | 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 |
| Prettier | ^3 | Code formatting |
| semantic-release | ^25 | Automated versioning & release |
Ghi Chú Phát Triển
Điểm Vào Chính
- Trang Chủ (User):
app/(main)/page.tsx- Duyệt thực đơn - Trang Khám Phá:
app/(feed)/feed/page.tsx- Khám phá quán - Đăng Nhập:
app/(main)/login/page.tsx - Đăng Ký:
app/(main)/register/page.tsx - Thanh Toán:
app/(main)/payment/page.tsx - Manager Dashboard:
app/(manager)/manager/page.tsx - Phân Tích Tài Chính:
app/(manager)/manager/analytics/page.tsx
Tài Khoản Demo
| Loại tài khoản | Tên đăng nhập | Mật khẩu |
|---|---|---|
| Manager | admin | admin |
| Staff | Nguyễn Văn An | Nguyễn Văn An |
| Customer | 0987654321 | user1 |
Design & Styling
- Design tokens (CSS variables) định nghĩa trong
app/globals.css - Tailwind CSS v4 + custom properties cho consistent color/spacing
- Dark mode: biến CSS đã chuẩn bị sẵn nhưng chưa kích hoạt
- FontAwesome icons từ CDN
Kiến Trúc Component (Atomic Design)
Dự án tuân theo Atomic Design pattern — chi tiết tại Atomic.md:
- Atoms - Nguyên tố cơ bản: Button, Input, Badge, Text, Heading, Divider
- Molecules - Nhóm atoms: ProductCard, ShopCard, SearchBar, PaymentSummaryCard
- Organisms - Phần UI phức tạp: CategorySidebar, CartFab, ProductGrid, ShopGrid, ReviewModal, analytics charts, manager tabs/modals
- Templates - Bố cục trang: MainLayout, AuthLayout, FeedLayout, ManagerLayout
Data & Integration
- Mock data nằm trong
lib/constants.ts - Context providers trong
app/providers.tsx: AuthProvider, MenuProvider, CartProvider - ManagerProvider được thêm bởi
app/(manager)/layout.tsx - Thay bằng API calls khi backend sẵn sàng
- Ảnh sản phẩm: thêm vào
public/imgs/products/
Tài Liệu Chi Tiết
- WORKFLOW.md - Kiến trúc tổng thể, data flow, quy trình phát triển
- Atomic.md - Cấu trúc Atomic Design và quy ước component
- APP.md - Chi tiết các routes, layouts, pages
- COMPONENTS.md - Tài liệu từng component (Atomic Design)
- LAYOUTS.md - Header, Footer, responsive behavior
- LIB.md - Constants, Types, Contexts
- AGENTS.md - Hướng dẫn cho AI agents làm việc với codebase