Coffee 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. 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

5. 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

6. 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

---

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 + 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
|   |   +-- register/page.tsx # Trang đăng ký
|   |   +-- payment/page.tsx # Trang thanh toán
|   +-- (feed)/            # Feed route group
|       +-- layout.tsx     # Feed layout
|       +-- feed/page.tsx  # Trang khám phá quán nước
+-- components/            # Shared UI components
|   +-- Navbar.tsx         # Sidebar danh mục (collapsible)
|   +-- CartProduct.tsx    # Card sản phẩm
|   +-- CartFab.tsx        # FAB - nút giỏ hàng floating
|   +-- COMPONENTS.md      # Tài liệu chi tiết components & contexts
+-- layouts/               # Layout-level components
|   +-- header.tsx         # Sticky top header + auth demo
|   +-- 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, 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
|   +-- 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/
+-- 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
+-- 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

Đ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

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

Data & Integration

• Mock data nằm trong lib/constants.ts
• Context providers trong app/providers.tsx - Sử dụng: AuthProvider, MenuProvider, CartProvider
• 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
• APP.md - Chi tiết các routes, layouts, pages
• COMPONENTS.md - Tài liệu từng component + contexts
• LAYOUTS.md - Header, Footer, responsive behavior
• LIB.md - Constants, Types, Contexts