1 đang xem
Hot
1.500.000 đ
Hệ Thống Đặt Món, Đặt Bàn & Quản Lý Nhà Hàng Fullstack Chuyên nghiệp (Next.js 15, Spring Boot 3, Redis & WebSocket,VNPAY)
Mô tả sản phẩm
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
Chia sẻ ngay
Thông tin sản phẩm
Web Tâm Đức - Code chất lượng cao
1.500.000 đ
122
Lượt xem
0
Đã bán
Công nghệ
Bảo mật
Thanh toán an toàn
Tải ngay
Sau khi thanh toán
Hỗ trợ 24/7
Liên hệ bất cứ lúc nào
Chất lượng
Đảm bảo code sạch
