Đồ án tốt nghiệp — Cá nhân

SangGarden

Nền tảng e-commerce fullstack bán cây cảnh — tự xây dựng và triển khai production trên VPS

Spring Boot + Angular + MariaDB. Không chỉ là code demo — hệ thống thực tế có thanh toán VNPay, phân quyền JWT, vận hành qua Nginx + SSL trên Ubuntu VPS.

JavaSpring BootSpring Data JPAHibernateSpring SecurityAngularTypeScriptMariaDBRESTful APIJWTVNPayNginxMavenVPS

Xem trang thực tế

Điểm nổi bật

Production thật

VPS Ubuntu, domain riêng, HTTPS/SSL, Nginx reverse proxy

Kiến trúc enterprise

Controller → Service → Repository (Spring Boot 3-layer)

Thanh toán thật

VNPay — xử lý callback, xác thực giao dịch, cập nhật đơn hàng

JWT + RBAC

Phân quyền ADMIN/USER, stateless authentication

Vấn đề & Mục tiêu

Các cửa hàng cây cảnh vừa và nhỏ chủ yếu bán offline, khó quản lý sản phẩm, tồn kho và đơn hàng khi quy mô tăng. Thao tác thủ công tốn thời gian và dễ sai sót. Khách hàng ngày càng kỳ vọng trải nghiệm online mượt mà, catalog chi tiết, thanh toán tiện lợi.

→ Mục tiêu Thiết kế, phát triển và deploy một nền tảng e-commerce hoàn chỉnh — không dừng ở code demo, đưa thẳng lên production với thanh toán online thật, bảo mật, và khả năng mở rộng.

Chuyển đổi sang Next.js

Mặc dù phiên bản Spring Boot + Angular hoạt động tốt và có kiến trúc enterprise, nhưng việc dùng bộ công nghệ này cho một website e-commerce quy mô nhỏ là không hợp lý và tốn kém chi phí bảo trì. Việc triển khai (deploy) trên VPS tự quản lý cũng phức tạp hơn mức cần thiết. Do đó, dự án đã được chuyển sang phiên bản Next.js để dễ dàng deploy (Vercel) và tối ưu hơn.

→ Lý do chuyển đổi

Xem dự án Sang Garden Next.js Xem Live Demo Next.js

Công nghệ

Backend — Java

Spring Boot — layered architecture, embedded server
Spring Data JPA + Hibernate — ORM, JPQL, transactions
Spring Security — filter chain, BCrypt password
JWT — access + refresh token, ADMIN/USER authorization
@ControllerAdvice — centralized exception handling
Maven — build & dependency management
RESTful API — stateless, JSON, resource-based

Frontend — Angular

Angular + TypeScript — SPA, module-based
RxJS — Observable, BehaviorSubject
Reactive Forms — validation, custom validators
Angular Router — lazy loading, route guards
Responsive — Flexbox/Grid

Database & Integration

MariaDB — normalized ERD, FK, indexing
VNPay — payment request, callback, verify
Email xác thực đơn hàng tự động

DevOps / Deployment

Ubuntu VPS — self-hosted
Nginx — reverse proxy + static server
Certbot — SSL/HTTPS (Let's Encrypt)
UFW Firewall
nohup — backend bind 127.0.0.1
application-prod.properties

Kiến trúc hệ thống

Mô hình 3 tầng, client-server, giao tiếp qua RESTful API. Backend chỉ bind 127.0.0.1 — không expose trực tiếp, mọi request đi qua Nginx.

[Browser] │ HTTPS ▼ [Nginx — reverse proxy + SSL] ├── serve Angular SPA (/var/www/sanggarden) └── proxy_pass → Spring Boot (127.0.0.1:8080) │ ├── MariaDB (local) └── VNPay Gateway └── callback → verify & update order https://sanggarden.com | api: /api/*

Controller

Nhận request, validate, trả response — mỗi domain một controller

Service

Business logic, transaction management

Repository

Spring Data JPA, CRUD tự động, JPQL, Hibernate ORM

Security

JWT filter chain, phân quyền ADMIN/USER

Thiết kế Database

Bảng	Vai trò
`users`	Tài khoản, role (ADMIN/USER), email verification, password mã hóa
`user_infos`	Thông tin cá nhân (họ tên, SĐT, địa chỉ giao hàng)
`products`	Sản phẩm — tên, slug SEO, giá, ảnh, trạng thái, liên kết category
`categories`	Danh mục sản phẩm
`carts / cart_items`	Giỏ hàng và items (số lượng, giá, trạng thái chọn)
`orders`	Đơn hàng — hỗ trợ guest checkout, địa chỉ, phí ship, trạng thái, mã VNPay
`order_items`	Chi tiết đơn — lưu snapshot tên/giá tại thời điểm mua