Quy trình theo giai đoạn

1) Khảo sát & Lên kế hoạch

• Tôi làm: Xác định nhu cầu người dùng (người xem và người biên tập), phân tích luồng dữ liệu/asset, xây dựng sitemap và content model (Project, Asset, Tag).
• Kết quả: Sơ đồ IA, luồng xuất bản, tiêu chí hiệu năng & SEO.

2) Thiết kế kiến trúc & Khởi tạo dự án

• Tôi làm: Đề xuất kiến trúc 3 lớp (Public – Admin – API), khởi tạo repo, cấu hình lint/format/commit, quản lý biến môi trường.
• Kết quả: Bộ khung dự án, guideline dev, CI/CD cơ bản.

3) Backend API (NestJS)

• Tôi làm: Tạo module Projects/Assets/Tags/Auth, định nghĩa DTO + validation, xây dựng REST API với bảo mật JWT. Tạo endpoint /assets/presign để cấp presigned URL.
• Kết quả: Bộ endpoint CRUD đầy đủ, auth cơ bản, tài liệu API.

4) Tích hợp AWS S3

• Tôi làm: Cấu hình S3 bucket (CORS, prefix uploads/), thiết lập IAM theo nguyên tắc least‑privilege, viết service cấp presigned URL, chuẩn hoá quy ước đặt key và lưu metadata.
• Kết quả: Upload trực tiếp từ Admin → S3, phân phát an toàn qua CDN.

5) Admin App (React + Vite)

• Tôi làm: Xây dựng UI quản lý project, form nhập dữ liệu, editor Markdown/MDX, Asset Manager với drag‑drop, progress bar. Gọi API presign và upload trực tiếp lên S3, có preview realtime.
• Kết quả: Công cụ biên tập thân thiện, xuất bản nhanh, quản lý asset rõ ràng.

6) Public Site (Next.js)

• Tôi làm: Xây dựng routing Project/Tag, render Markdown thành HTML, sử dụng next/image tối ưu ảnh, gallery lazy‑load, hỗ trợ viewer GLB. Cấu hình ISR để tự động cập nhật nội dung.
• Kết quả: Trang portfolio tải nhanh, chuẩn SEO, hiển thị tốt cho asset nặng.

7) Bảo mật & Hiệu năng

• Tôi làm: Triển khai JWT + rate limit, validate dữ liệu, cấu hình CORS; tối ưu ảnh/video (định dạng, LQIP), caching qua CDN; giám sát upload.
• Kết quả: Trải nghiệm mượt, ổn định ngay cả với asset lớn.

8) Kiểm thử & Triển khai

• Tôi làm: Test toàn bộ flow upload/xuất bản, đo Lighthouse, viết README hướng dẫn setup và triển khai.
• Kết quả: Bản release ổn định, có tài liệu đầy đủ để bàn giao/mở rộng.

Kỹ năng thể hiện

• Full‑stack web: Next.js, React (Vite), NestJS.
• Cloud storage: AWS S3, CORS, IAM, presigned upload.
• Authoring UX: Markdown/MDX editor, preview realtime.
• Hiệu năng & SEO: ISR, lazy‑load, tối ưu ảnh/video, OG images động.
• Bảo mật & Quy trình: JWT, rate limit, validation, CI/CD.

Kết quả

• Thời gian xuất bản 1 project: <2 phút.
• Trang portfolio tải nhanh và ổn định với asset 3D/4K.
• Kiến trúc dễ mở rộng: thêm WebGL viewer, analytics, auto thumbnail.