MÔ TẢ CHI TIẾT DỰ ÁN PIZZAMA SHOP
I. TỔNG QUAN DỰ ÁN
Tên dự án: Pizzama Shop
Loại hình: Hệ thống quản lý nhà hàng pizza đầy đủ với tính năng đặt hàng online,
đặt bàn và thanh toán điện tử
Kiến trúc: Full-stack application với kiến trúc Monorepo
- Backend: Java Spring Boot RESTful API
- Frontend: Next.js (React) với TypeScript
- Database: PostgreSQL (Supabase) hoặc PostgreSQL/MySQL Local
- Cache & Real-time: Redis, WebSocket
II. CÔNG NGHỆ BACKEND
A. FRAMEWORK & CORE TECHNOLOGIES
---------------------------------
1. Spring Boot 3.4.3
- Java 23
- Spring Boot Starter Web (RESTful API)
- Spring Boot Starter Data JPA (ORM)
- Spring Boot DevTools
2. Database & ORM
- PostgreSQL (Supabase Cloud Database hoặc Local)
- Hibernate ORM
- Spring Data JPA
- Flyway/Liquibase (Database Migration)
3. Security & Authentication
- Spring Security
- JWT (JSON Web Token) - io.jsonwebtoken v0.11.5
+ Access Token (1 giờ)
+ Refresh Token (24 giờ)
- OAuth2 Client (Google Login)
- Password Encryption (BCrypt)
B. REDIS & CACHING
------------------
- Spring Boot Starter Data Redis
- Jedis Client
- Keyspace notifications cho delayed events
- Session management
- Token blacklist
C. REAL-TIME COMMUNICATION
--------------------------
- Spring Boot Starter WebSocket
- STOMP Protocol
- SockJS
- Real-time notifications
D. PAYMENT INTEGRATION
----------------------
- VNPay Payment Gateway
- Sandbox Environment cho testing
- Payment callback handling
- Transaction verification
E. EMAIL SERVICE
----------------
- Spring Boot Starter Mail
- SMTP Gmail Integration
- Email templates
- Booking confirmation emails
- Order notifications
F. FILE UPLOAD & STORAGE
------------------------
- Cloudinary Integration
+ Image upload
+ Image optimization
+ CDN delivery
G. UTILITIES & TOOLS
--------------------
1. Lombok
- Annotation processing
- Boilerplate code reduction
- @Data, @Builder, @Slf4j annotations
2. MapStruct v1.5.5.Final
- DTO ↔ Entity mapping
- Type-safe mapping
- Compile-time code generation
3. Validation
- Spring Boot Starter Validation
- Jakarta Bean Validation
- Custom validators
4. Jackson
- JSON serialization/deserialization
- Java 8 Date/Time support
- Custom serializers
III. CÔNG NGHỆ FRONTEND
================================================================================
A. FRAMEWORK & CORE
-------------------
1. Next.js 15.1.6
- App Router (React Server Components)
- Turbopack (--turbopack mode)
- Image Optimization
- Font Optimization (Geist font)
2. React 18.3.1
- React DOM
- React Hooks
- Context API
3. TypeScript 5
- Type-safe development
- Interface definitions
- Enum types
B. STATE MANAGEMENT
-------------------
1. Zustand v5.0.3
- Global state management
- zustand-cookie-storage (Persistent state)
2. TanStack React Query v5.71.1
- Server state management
- API caching
- Automatic refetching
- Optimistic updates
- Mutation handling
C. UI COMPONENT LIBRARIES
--------------------------
1. Radix UI (Headless Components)
- @radix-ui/react-accordion
- @radix-ui/react-alert-dialog
- @radix-ui/react-avatar
- @radix-ui/react-checkbox
- @radix-ui/react-dialog
- @radix-ui/react-dropdown-menu
- @radix-ui/react-label
- @radix-ui/react-navigation-menu
- @radix-ui/react-popover
- @radix-ui/react-radio-group
- @radix-ui/react-scroll-area
- @radix-ui/react-select
- @radix-ui/react-separator
- @radix-ui/react-slider
- @radix-ui/react-slot
- @radix-ui/react-switch
- @radix-ui/react-tabs
- @radix-ui/react-toast
2. Custom UI Components (shadcn/ui pattern)
- Located in src/components/ui/
- Customizable và reusable components
D. STYLING
----------
1. Tailwind CSS v3.4.1
- Utility-first CSS framework
- tailwindcss-animate (Animations)
- tailwind-merge (Conditional classes)
- PostCSS v8.5.3
- Autoprefixer v10.4.21
E. FORMS & VALIDATION
---------------------
- React Hook Form v7.55.0
- Zod v3.24.2 (Schema validation)
- @hookform/resolvers (Form validation)
- input-otp v1.4.2 (OTP input)
F. ANIMATIONS & UI EFFECTS
---------------------------
1. Framer Motion v12.0.5
- Advanced animations
- Gestures
- Layout animations
2. React Spring v9.7.5
- Spring physics animations
- Smooth transitions
3. Other Animation Libraries
- embla-carousel-react v8.5.2 (Carousel)
- Swiper v11.2.1 (Touch slider)
G. DRAG & DROP
--------------
- @dnd-kit/core v6.3.1
- @dnd-kit/sortable v10.0.0
- @dnd-kit/utilities v3.2.2
H. DATA VISUALIZATION
---------------------
- Recharts v3.0.2 (Charts & graphs)
I. DATE & TIME
--------------
- date-fns v3.6.0 (Date utilities)
- react-day-picker v8.10.1 (Date picker)
J. MAPS INTEGRATION
-------------------
- @react-google-maps/api v2.20.7
K. REAL-TIME COMMUNICATION
--------------------------
- @stomp/stompjs v7.0.0 (WebSocket)
- sockjs-client v1.6.1 (SockJS client)
L. HTTP CLIENT
--------------
- Axios v1.8.4
+ Request/Response interceptors
+ API client configuration
+ Error handling
M. AUTHENTICATION & SECURITY
-----------------------------
- JWT Decode v4.0.0
- jsonwebtoken v9.0.2
- Cookie-based authentication
- Protected routes
N. UI/UX ENHANCEMENTS
---------------------
- lucide-react v0.474.0 (Icon library)
- sonner v2.0.3 (Toast notifications)
- ogl v1.0.11 (WebGL library)
O. UTILITIES
------------
- nanoid v5.1.6 (Unique ID generation)
P. DEVELOPMENT TOOLS
--------------------
- @faker-js/faker v9.8.0 (Mock data)
- ESLint v9
- @eslint/eslintrc
- eslint-config-next
- TypeScript types:
+ @types/node
+ @types/react
+ @types/react-dom
+ @types/jsonwebtoken
+ @types/jwt-decode
+ @types/sockjs-client
IV. CẤU TRÚC DỰ ÁN
================================================================================
A. BACKEND STRUCTURE
--------------------
backend/
├── src/main/java/com/Pizzama/
│ ├── PizzamaApplication.java (Main application)
│ ├── booking/ (Booking/Reservation system)
│ │ ├── controller/
│ │ ├── service/
│ │ ├── model/
│ │ ├── repository/
│ │ ├── dto/
│ │ ├── mapper/
│ │ └── events/ (Redis delayed events)
│ ├── cart/ (Shopping cart)
│ ├── order/ (Order management)
│ ├── product/ (Product & category management)
│ ├── users/ (User management & addresses)
│ ├── security/ (Authentication & authorization)
│ │ ├── controller/ (Auth endpoints)
│ │ ├── service/ (JWT, OAuth2)
│ │ ├── jwt/ (JWT utilities)
│ │ └── config/ (Security configuration)
│ ├── tablemap/ (Floor plan & table management)
│ ├── vnpay/ (VNPay payment integration)
│ ├── notifications/ (Notification system)
│ ├── messages/ (Chat & messaging)
│ ├── upload/ (File upload - Cloudinary)
│ ├── cache/ (Redis caching)
│ └── common/ (Shared utilities & exceptions)
│ ├── exception/ (Global exception handler)
│ └── dto/ (Shared DTOs)
└── src/main/resources/
└── application.yml (Configuration)
B. FRONTEND STRUCTURE
---------------------
frontend/
├── src/
│ ├── app/ (Next.js App Router)
│ │ ├── (admin)/ (Admin dashboard routes)
│ │ ├── (auth)/ (Authentication routes)
│ │ ├── (main)/ (Public routes)
│ │ ├── admin/ (Admin panel)
│ │ ├── oauth-success/ (OAuth callback)
│ │ ├── layout.tsx (Root layout)
│ │ ├── globals.css (Global styles)
│ │ ├── loading.tsx (Loading state)
│ │ └── not-found.tsx (404 page)
│ ├── components/
│ │ ├── admin/ (Admin components)
│ │ │ ├── booking/ (Booking management)
│ │ │ ├── order/ (Order management)
│ │ │ ├── pages/ (Admin pages)
│ │ │ └── ... (Other admin modules)
│ │ ├── auth/ (Authentication components)
│ │ ├── ui/ (Reusable UI components - shadcn/ui)
│ │ ├── providers/ (Context providers)
│ │ ├── theme/ (Theme components)
│ │ └── ... (Other components)
│ ├── lib/
│ │ ├── api/ (API client & services)
│ │ │ ├── axios.ts (Axios configuration)
│ │ │ └── services/ (API service modules)
│ │ │ ├── bookingService.ts
│ │ │ └── ... (Other services)
│ │ └── utils/ (Utility functions)
│ ├── hooks/ (Custom React hooks)
│ ├── types/ (TypeScript type definitions)
│ │ ├── booking.ts
│ │ ├── api.ts
│ │ └── ... (Other types)
│ ├── data/ (Static data)
│ └── middleware.ts (Next.js middleware)
├── package.json
└── tailwind.config.ts
V. TÍNH NĂNG CHÍNH
A. AUTHENTICATION & AUTHORIZATION
----------------------------------
✓ JWT-based authentication
✓ Google OAuth2 login
✓ Refresh token mechanism
✓ Token blacklist (Redis)
✓ Role-based access control (USER, ADMIN)
✓ Protected routes (Frontend & Backend)
✓ Cookie-based session management
B. USER MANAGEMENT
------------------
✓ User registration & login
✓ User profile management
✓ Address management
✓ Order history
✓ Booking history
C. PRODUCT CATALOG
------------------
✓ Product listing với pagination
✓ Category management
✓ Product search & filtering
✓ Price range filtering
✓ Sort options
✓ Product details
✓ Image upload (Cloudinary)
✓ Size & pricing variations
D. SHOPPING CART
----------------
✓ Add to cart
✓ Update quantity
✓ Remove items
✓ Cart persistence (Zustand + Cookie)
✓ Real-time cart updates
E. ORDER MANAGEMENT
-------------------
✓ Place order
✓ Order tracking
✓ Order status updates
✓ Admin order management
✓ Order history
✓ Payment integration (VNPay)
✓ Order notifications
F. BOOKING/RESERVATION SYSTEM
------------------------------
✓ Table reservation
✓ Available tables check
✓ Auto table assignment
✓ Booking confirmation
✓ Booking cancellation
✓ Email notifications
✓ Admin booking management
✓ Booking status workflow:
- PENDING (Initial request)
- ASSIGNED (Table assigned)
- CONFIRMED (Confirmed by admin)
- SEATED (Guest arrived)
- COMPLETED (Finished)
- CANCELLED (Cancelled)
- NO_SHOW (Guest didn't show up)
- EXPIRED (Reservation expired)
✓ Redis delayed events cho auto status updates
✓ Guest booking (không cần đăng nhập)
G. TABLE MANAGEMENT
-------------------
✓ Floor plan visualization
✓ Table layout management
✓ Table availability tracking
✓ Drag & drop table arrangement
✓ Table status management
H. PAYMENT INTEGRATION
----------------------
✓ VNPay payment gateway
✓ Payment URL generation
✓ HMAC SHA512 signature
✓ Payment callback handling
✓ Transaction verification
✓ Payment status tracking
I. NOTIFICATIONS
----------------
✓ Real-time notifications (WebSocket)
✓ Email notifications
✓ In-app notifications
✓ Booking confirmations
✓ Order updates
✓ Push notifications
J. ADMIN DASHBOARD
------------------
✓ Order management
✓ Product management
✓ Category management
✓ Booking management
✓ User management
✓ Table management
✓ Analytics & reports
✓ Notification management
K. CACHING & PERFORMANCE
------------------------
✓ Redis caching
✓ Session caching
✓ API response caching
✓ React Query caching
✓ Image optimization (Cloudinary)
✓ Lazy loading
L. REAL-TIME FEATURES
---------------------
✓ WebSocket connections
✓ STOMP messaging
✓ Real-time notifications
✓ Order status updates
✓ Booking status updates
VI. DATABASE SCHEMA
A. MAIN TABLES
--------------
- users (User accounts)
- roles (User roles)
- addresses (User addresses)
- products (Product catalog)
- categories (Product categories)
- sizes (Product sizes & pricing)
- orders (Order records)
- order_items (Order line items)
- cart (Shopping cart)
- cart_items (Cart items)
- bookings (Table reservations)
- tables (Restaurant tables)
- floor_plans (Table layouts)
- notifications (User notifications)
- refresh_tokens (JWT refresh tokens)
B. FEATURES
-----------
- JPA Auditing (createdAt, updatedAt, createdBy, modifiedBy)
- Soft delete support
- UUID primary keys
VIII. CONFIGURATION
A. ENVIRONMENT VARIABLES (Backend)
-----------------------------------
# Database
SPRING_DATASOURCE_URL=jdbc:postgresql://...
SPRING_DATASOURCE_USERNAME=postgres
SPRING_DATASOURCE_PASSWORD=...
# JWT
JWT_SECRET=...
JWT_EXPIRATION=3600000 (1 hour)
JWT_REFRESH_SECRET=...
JWT_REFRESH_EXPIRATION=86400000 (24 hours)
# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
# Email
SPRING_MAIL_HOST=smtp.gmail.com
SPRING_MAIL_PORT=587
SPRING_MAIL_USERNAME=...
SPRING_MAIL_PASSWORD=...
# OAuth2
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
# VNPay
VNPAY_TMN_CODE=...
VNPAY_SECRET_KEY=...
VNPAY_PAY_URL=...
VNPAY_RETURN_URL=...
# Cloudinary
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...
# CORS
CORS_ALLOWED_ORIGINS=http://localhost:3000
# Cookie
COOKIE_DOMAIN=
COOKIE_SECURE=false
# Server
SERVER_PORT=8080
APP_PREFIX=/api/v1
APP_BASE_URL=http://localhost:3000
IX. DEPLOYMENT
A. BACKEND
----------
- Build: mvn clean package
- Run: java -jar target/KoalaAI-0.0.1-SNAPSHOT.jar
- Port: 8080
- Database: PostgreSQL (Supabase hoặc Local)
- Cache: Redis
B. FRONTEND
-----------
- Build: npm run build
- Dev: npm run dev
- Production: npm run start
- Port: 3000
C. REQUIREMENTS
---------------
- Java 23+
- Node.js 20+
- PostgreSQL 14+ (hoặc MySQL 8+)
- Redis 7+
X. THƯ VIỆN NỔI BẬT
================================================================================
A. BACKEND
----------
1. MapStruct 1.5.5
- DTO mapping tự động
- Compile-time code generation
- Type-safe mapping
2. JWT (JJWT) 0.11.5
- Secure token generation
- Signature verification
- Claims management
3. Cloudinary
- Cloud image storage
- Image optimization
- CDN delivery
B. FRONTEND
-----------
1. TanStack React Query v5.71.1
- Server state management hiện đại nhất
- Smart caching strategies
- Optimistic updates
- Automatic background refetching
2. Radix UI
- Headless component library
- Accessibility-first
- Unstyled, fully customizable
- Keyboard navigation support
3. Framer Motion v12.0.5
- Advanced animation library
- Layout animations
- Gesture support
- Spring physics
4. @dnd-kit
- Modern drag & drop library
- Accessibility support
- Touch support
- Performance optimized
5. Zustand v5.0.3
- Lightweight state management
- No boilerplate
- Cookie persistence
XI. ĐIỂM NỔI BẬT CỦA DỰ ÁN
1. FULL-STACK MODERN
✓ Next.js 15 với App Router
✓ Spring Boot 3.4.3 với Java 23
✓ TypeScript full-stack
✓ Real-time features (WebSocket)
2. PAYMENT INTEGRATION
✓ VNPay integration hoàn chỉnh
✓ Secure payment flow
✓ Transaction verification
3. ADVANCED BOOKING SYSTEM
✓ Table management
✓ Auto-assignment algorithm
✓ Email notifications
✓ Redis delayed events
✓ Status workflow automation
4. SCALABLE ARCHITECTURE
✓ Microservices-ready
✓ Redis caching
✓ PostgreSQL database
✓ Cloud storage (Cloudinary)
✓ OAuth2 integration
5. MODERN UI/UX
✓ Responsive design
✓ Smooth animations
✓ Drag & drop interface
✓ Real-time updates
✓ Toast notifications
6. SECURITY
✓ JWT authentication
✓ Role-based access control
✓ OAuth2 (Google)
✓ CORS protection
✓ SQL injection prevention
✓ XSS protection
7. DEVELOPER EXPERIENCE
✓ TypeScript
✓ Hot reload
✓ Type-safe API
✓ Auto-generated DTOs
✓ Code generation (MapStruct, Lombok)
KẾT LUẬN
Đây là một dự án full-stack hoàn chỉnh với:
- Backend: Spring Boot + PostgreSQL + Redis
- Frontend: Next.js + TypeScript + Radix UI
- Payment: VNPay integration
- Real-time: WebSocket + STOMP
- Cloud: Cloudinary, Supabase
Dự án sử dụng các công nghệ và thư viện hiện đại nhất, với kiến trúc scalable
và maintainable, phù hợp cho production deployment.
Ngày cập nhật: 2026-02-02
Phiên bản: 0.1.0
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Có file hướng dẫn chi tiết cài đặt từng thư viện, config từng thư viện mình sử dụng, hướng dẫn tạo và đăng ký ứng dụng.
MỤC LỤC:
I. YÊU CẦU HỆ THỐNG
II. CÀI ĐẶT CÁC CÔNG CỤ CƠ BẢN
III. THIẾT LẬP DATABASE
IV. THIẾT LẬP BACKEND (Spring Boot)
V. THIẾT LẬP FRONTEND (Next.js)
VI. THIẾT LẬP CÁC DỊCH VỤ BÊN NGOÀI
VII. CHẠY DỰ ÁN
VIII.KIỂM TRA VÀ DEBUG
Nguồn: Topcode.vn
