Portfolio

Website học từ vựng tiếng Anh bằng Flashcard

Next.jsNestJsPostgreSQLZustandMaterial UITypeORMAWSDockerNextAuth.jsPassport.jsGitLabGrafana

1. Công nghệ sử dụng

1.1. Front end

  • Xây dựng frontend với Next.js và MUI (Material UI) để tạo giao diện hiện đại.
  • Tích hợp Zustand để quản lý trạng thái ứng dụng gồm thông tin phiên đăng nhập, chế độ sáng/tối và thẻ ghi nhớ học gần nhất.
  • Triển khai xác thực người dùng với NextAuth, hỗ trợ đăng nhập qua tài khoản Google và GitHub.

1.2. Back end

  • Phát triển backend bằng NestJS, đảm bảo kiến trúc rõ ràng, dễ mở rộng và bảo trì theo mô hình module hóa.
  • Sử dụng TypeORM để thao tác dữ liệu, kết nối cơ sở dữ liệu PostgreSQL được triển khai trong môi trường Docker.
  • Triển khai xác thực và phân quyền người dùng bằng Passport.js, hỗ trợ các strategy linh hoạt.
  • Tích hợp AWS S3 và CloudFront để lưu trữ và phân phối tài nguyên tĩnh; sử dụng RDS cho cơ sở dữ liệu được quản lý, Lambda cho serverless functions, SES để gửi email và EventBridge để lên lịch và điều phối sự kiện.
  • Self-host hạ tầng và thiết lập pipeline CI/CD với GitLab, tự động hóa quá trình build, test và deploy.
  • Thiết lập hệ thống Logging và Monitoring với Grafana Stack, theo dõi và phân tích hiệu năng hệ thống trong thời gian thực.
System architecture
Lưu trữ hình ảnh flashcard trên AWS S3
System architecture
Phân phối hình ảnh qua AWS CloudFront
System architecture
Hosting PostgreSQL với AWS RDS
System architecture
Sử dụng AWS Lambda để tính toán các thẻ flashcard cần ôn lại
System architecture
Sử dụng AWS SES để gửi email nhắc nhở các thẻ flashcard cần ôn lại
System architecture
Lập lịch nhắc nhở ôn tập flashcard với AWS EventBridge
System architecture
Self-host hạ tầng và thiết lập pipeline CI/CD với GitLab
System architecture
Monitoring (Prometheus + Grafana + Node Exporter)
System architecture
Logging (Loki + Promtail)

2. Demo sản phẩm

Xem demo trực tiếp qua youtube tại đây