MtikcodeMtikcode
Trang chủGiới ThiệuKhóa họcGiá cả
MtikcodeMtikcode

Khóa học

  • Khóa Học Next.js App Router
  • Khóa Học NestJS Nền Tảng & Nâng Cao
  • Dự Án Trang Bán Hàng Fullstack Với Next.js & NestJS

Về chúng tôi

  • Giới thiệu
  • Liên hệ
  • Điều khoản sử dụng
  • Quyền riêng tư

Thông tin liên hệ

Nhận thông tin mới nhất về khóa học và tin tức.

© 2026 Mtikcode. Tất cả quyền được bảo lưu.
Về trang Bundle
Dự Án Trang Bán Hàng Fullstack Với Next.js & NestJS
Nâng cao
Dự kiến hoàn thành vào 30/07/2026

Dự Án Trang Bán Hàng Fullstack Với Next.js & NestJS

Học cách hệ thống vận hành toàn diện khi xây dựng một ứng dụng ecommerce fullstack thực tế với Next.js và NestJS. Bạn sẽ hiểu rõ cách frontend và backend giao tiếp với nhau, cách thiết kế và tối ưu database, xây dựng API chuẩn REST, xử lý authentication, quản lý state, tích hợp thanh toán, và triển khai (deploy) sản phẩm lên môi trường production.

Frontend: Next.js 16 + TailwindCSS + Shadcn/ui + TanStack Query. Áp dụng Server Components, Optimistic UI, Streaming, và Partial Prerendering với cache component.

Backend: NestJS + TypeORM + PostgreSQL (Supabase). Kiến trúc module hóa, DTO validation, Guards, Interceptors, Exception Filters, Pipes. 30+ API endpoints chuẩn REST với Swagger documentation đầy đủ.

Authentication: Thư viện Better Auth với đăng ký, xác thực email, quên mật khẩu, Google OAuth, guest checkout.

Thanh toán: Tích hợp PayOS - cổng thanh toán thật của Việt Nam. Tạo payment link, QR code, nhận webhook callback, verify checksum, cập nhật trạng thái đơn hàng. Flow hoàn chỉnh.

Admin dashboard & phân quyền: Hệ thống phân quyền role-based (Admin, User) với Guards và custom decorators trong NestJS. Dashboard quản lý sản phẩm đầy đủ: thêm, sửa, xoá, upload ảnh, quản lý biến thể và tồn kho. Trang analytics hiển thị doanh thu, đơn hàng, lượt truy cập.

Search Engine: Elasticsearch - search với fuzzy matching.

Caching: Redis cho server-side caching. Next.js cache component.

Mornitoring: Axiom cho logging thay thế console.log, query log theo thời gian thực. Sentry cho error tracking - biết user nào gặp lỗi gì, ở trang nào, stack trace đầy đủ. ELK Stack (Logstash + Kibana) thu thập log từ NestJS qua Docker.

Infrastructure: Supabase Storage cho file và image.

13
Phần
37
Chương
~366
Bài học
75-95h
Video
1.399.000 ₫3.000.000 ₫-53%
  • Trọn gói tất cả khoá học trong gói Web Dev (NextJs, NestJs, Dự Án Ecommerce,...)
  • Tiết kiệm 1.601.000 ₫ so với giá gốc

Xem trước khi quyết định

Demo thật đã deploy

Chính xác cái bạn sẽ tự tay build

Swagger API docs

Toàn bộ API của hệ thống

Database schema

Xem toàn bộ schema database của hệ thống

Khoá học này dành cho ai?

Đã biết cơ bản về Next.js và NestJS nhưng còn lúng túng khi phải tự mình xây dựng một hệ thống Ecommerce thực tế từ đầu đến cuối

Muốn sở hữu một dự án 'đỉnh' trong CV với những công nghệ chuẩn công nghiệp như Redis, ELK và Sentry để gây ấn tượng mạnh với nhà tuyển dụng

Muốn học cách viết code sạch, chuẩn SOLID ngay từ đầu để không phải loay hoay sửa lỗi hoặc 'đập đi xây lại' dự án sau này

Muốn làm quen với quy trình vận hành chuyên nghiệp: từ việc tracking lỗi với Sentry đến cách dùng AI (Claude Code) để viết Unit Test tự động

Đang tìm kiếm một lộ trình thực hành bài bản để hiểu rõ cách Frontend và Backend 'bắt tay' với nhau trong một sản phẩm Production hoàn chỉnh

Khoá học này không dành cho ai?

✕

Bạn mới bắt đầu học lập trình (chưa biết gì về Javascript/Typescript) hoặc chỉ muốn học những kiến thức cơ bản nhất

✕

Muốn xây dựng các website đơn giản, quy mô nhỏ và không có nhu cầu tìm hiểu về tối ưu hiệu năng hay quản trị hệ thống chuyên sâu

Nội dung khóa học

Học viên hiểu kiến trúc tổng thể, demo sản phẩm cuối, và cài đặt môi trường tối thiểu để bắt đầu code.

Bài 1: Chia sẻ source code
Bài 2: Những thư viện UI bạn nên tham khảo
Bài 3: Demo sản phẩm cuối khóa
Bài 4: Kiến trúc hệ thống ecommerce
Bài 5: Tổng quan tech stack
Bài 6: Cài đặt công cụ phát triển
Bài 7: Khởi tạo backend và môi trường local

Học viên cấu hình các thiết lập đặc thù của dự án (CORS, Throttler, kết nối Redis).

Bài 1: Cấu trúc thư mục dự án
Bài 2: Cấu hình bootstrap trong main.ts
Bài 3: ConfigModule và rate limiting với Throttler
Bài 4: Tích hợp Redis với ioredis

Học viên thiết kế và tạo các entity TypeORM cốt lõi của hệ thống.

Bài 1: Tổng quan business requirements và lộ trình thiết kế DB
Bài 2: Cấu hình kết nối TypeORM cho dự án
Bài 3: Business requirements cho User & Authentication
Bài 4: Quyết định bảng và phân tích relations cho Auth
Bài 5: Xây dựng User entity và authentication schema (Better Auth)
Bài 6: Business requirements và thiết kế Address
Bài 7: Business requirements và thiết kế Category
Bài 8: Business requirements và thiết kế Product cơ bản
Bài 9: Implement entity Product và ProductImage
Bài 10: Business requirements và thiết kế Coupon
Bài 11: Business requirements và thiết kế Review
Bài 12: Business requirements và thiết kế Notification & Setting
Bài 13: Khởi động backend và verify schema

Học viên tạo Next.js project và cấu hình các provider, layout cho dự án.

Bài 1: Tạo frontend repo và cấu trúc thư mục
Bài 2: Cài đặt shadcn/ui và Tailwind v4
Bài 3: Cấu hình Fonts
Bài 4: Dark mode với next-themes
Bài 5: TanStack Query Provider
Bài 6: Axios instance
Bài 7: Root layout và Sonner toast

Học viên hiểu kiến trúc better-auth, setup email service, và xây toàn bộ infrastructure cho cả backend và frontend trước khi build các luồng auth cụ thể.

Bài 1: Tạo Gmail App Password
Bài 2: Tạo email service ở backend
Bài 3: Email template xác minh tài khoản
Bài 4: Email template đặt lại mật khẩu
Bài 5: Tổng quan better-auth và so sánh các giải pháp khác
Bài 6: Kiến trúc better-auth của dự án
Bài 7: Service xác minh session ở backend
Bài 8: Các endpoint truy vấn session
Bài 9: Cài đặt better-auth client ở frontend
Bài 10: Cấu hình better-auth server ở Next.js
Bài 11: Route catch-all xử lý auth
Bài 12: Hook gửi email từ frontend

Học viên build toàn bộ trang auth ở frontend, kết nối với better-auth đã setup.

Bài 1: Trang đăng ký tài khoản
Bài 2: Xử lý đăng ký và gửi email xác minh
Bài 3: Trang xác minh email
Bài 4: Trang đăng nhập email và mật khẩu
Bài 5: Quên mật khẩu
Bài 6: Đặt lại mật khẩu
Bài 7: Đăng ký Google OAuth credentials
Bài 8: Đăng nhập với Google
Bài 9: Header với user dropdown và đăng xuất
Bài 10: Test toàn bộ luồng auth

Học viên triển khai hệ thống guest user dùng Redis (cho phép khách chưa đăng nhập vẫn có thể thêm sản phẩm vào giỏ hàng), và toàn bộ Guards/Decorators/Interceptors phục vụ phân quyền.

Bài 1: Pattern guest user của dự án
Bài 2: Thiết kế lưu trữ guest trong Redis
Bài 3: Service quản lý guest
Bài 4: Endpoint khởi tạo guest session
Bài 5: Guard xác thực với hỗ trợ guest
Bài 6: Xử lý tự động tạo guest user trong AuthGuard
Bài 7: Interceptor thiết lập cookie cho guest session
Bài 8: Custom decorator chỉ định quyền truy cập
Bài 9: Guard kiểm tra quyền theo role
Bài 10: Composed decorator kết hợp Guard và decorator
Bài 11: Luồng claim guest sang real user
Bài 12: Test toàn bộ phân quyền

Học viên build CRUD danh mục đầu tiên, qua đó học cách document API với Swagger.

Bài 1: Khởi tạo module và DTO cho danh mục
Bài 2: Tạo danh mục mới
Bài 3: Lấy danh sách và chi tiết danh mục
Bài 4: Cập nhật và xóa mềm danh mục
Bài 5: Phân quyền cho các endpoint
Bài 6: Giới thiệu Swagger và lý do dùng
Bài 7: Setup Swagger UI cho dự án
Bài 8: Document hóa endpoint Category với Swagger decorators

Học viên build toàn bộ backend cho sản phẩm bao gồm CRUD, tìm kiếm với PostgreSQL, gợi ý từ khóa, sản phẩm nổi bật, và một lớp cache với Redis cho các query tìm kiếm/filter/sort.

Bài 1: Khởi tạo ProductModule
Bài 2: Tạo sản phẩm mới với kiểm tra trùng lặp
Bài 3: Lấy chi tiết sản phẩm
Bài 4: Tìm kiếm sản phẩm với PostgreSQL
Bài 5: Gợi ý từ khóa tìm kiếm
Bài 6: Sản phẩm nổi bật cho landing
Bài 7: Cập nhật và xóa mềm sản phẩm
Bài 8: Vì sao cần cache cho tìm kiếm sản phẩm
Bài 9: Tích hợp Redis cache cho endpoint search
Bài 10: Cache invalidation khi sản phẩm thay đổi
Bài 11: Cache cho featured và landing với TTL dài hơn

Học viên thiết kế và triển khai hệ thống biến thể sản phẩm (option, value, variant) ở backend.

Bài 1: Business requirements cho variant system
Bài 2: Thiết kế schema variant
Bài 3: Thiết kế schema audit log và attributes
Bài 4: Triển khai hệ thống entities variant
Bài 5: Tạo option và option value cho sản phẩm
Bài 6: Lấy danh sách option của sản phẩm
Bài 7: Tạo biến thể với combo option values
Bài 8: Lấy danh sách biến thể của sản phẩm
Bài 9: Cập nhật giá và stock biến thể
Bài 10: Audit log thay đổi stock
Bài 11: Audit log thay đổi giá
Bài 12: Quản lý ProductAttribute

Học viên tích hợp Supabase làm cloud storage và build flow upload ảnh ở backend.

Bài 1: Tạo Supabase project và bucket
Bài 2: Service tích hợp Supabase Storage
Bài 3: Cấu hình FilesInterceptor cho upload
Bài 3: Cấu hình FilesInterceptor cho upload
Bài 4: Upload nhiều ảnh lên Supabase
Bài 5: Upload và tạo bản ghi DB cùng lúc
Bài 6: CRUD bản ghi ảnh sản phẩm
Bài 7: Liên kết ảnh với biến thể cụ thể
Bài 8: Viết Swagger documentation cho multipart upload

Học viên viết seed script để có data mẫu chạy cho trang cataglog và trang sản phẩm.

Bài 1: Vì sao cần seed data và chiến lược tổ chức
Bài 2: Tạo helper readFromFile
Bài 3: Cấu trúc seed script chính
Bài 4: Seed users và categories
Bài 5: Seed products với ảnh dùng chung
Bài 6: Seed product options và variants
Bài 7: Seed product images và attributes
Bài 8: Seed coupons
Bài 9: Lệnh reset DB và chạy seed

Học viên build trang catalog đầy đủ tính năng search, filter, sort, infinite scroll. Kết nối frontend - backend.

Bài 1: Layout trang catalog
Bài 2: Quản lý filter state qua URL search params
Bài 3: Thanh tìm kiếm với debounce
Bài 4: Sidebar filter
Bài 5: Hiển thị filter đang active
Bài 6: Sắp xếp sản phẩm
Bài 7: Service và type cho gọi API sản phẩm
Bài 8: Hook infinite query với TanStack Query
Bài 9: Component danh sách sản phẩm vô hạn cuộn
Bài 10: Component card sản phẩm dùng chung
Bài 11: Empty state, error state, retry

Học viên build UI cho trang sản phẩm, kết nối frontend - backend.

Bài 1: Layout trang chi tiết
Bài 2: Gallery ảnh sản phẩm
Bài 3: Service và hook lấy chi tiết sản phẩm
Bài 4: Variant selector
Bài 5: Đổi ảnh và giá theo biến thể
Bài 6: Bộ chọn số lượng và nút thêm vào giỏ hàng
Bài 7: Tab mô tả và thông số kỹ thuật
Bài 8: Sản phẩm liên quan

Học viên thiết kế Order schema, build hệ thống giỏ hàng với pattern "cart-is-order-pending" cho cả user đã đăng nhập và guest, triển khai cả backend và frontend.

Bài 1: Business requirements và pattern cart-is-order
Bài 2: Thiết kế schema Order, OrderItem, OrderStatusHistory
Bài 3: Khởi tạo OrderModule
Bài 4: Lấy giỏ hàng hiện tại
Bài 5: Thêm sản phẩm vào giỏ
Bài 6: Cập nhật và xóa item
Bài 7: Chuyển giỏ guest sang user khi đăng nhập
Bài 8: Service và hook giỏ hàng ở frontend
Bài 9: Trang giỏ hàng
Bài 10: Component item trong giỏ
Bài 11: Optimistic update khi thay đổi giỏ
Bài 12: Icon giỏ hàng trong header
Bài 13: Hookup add to cart ở các trang đã build
Bài 14: UI giỏ hàng trống

Học viên xây dựng hệ thống coupon, bao gồm logic kiểm tra (validation) và giao diện người dùng (FE) để áp dụng mã giảm giá trong giỏ hàng.

Bài 1: Phân tích yêu cầu coupon
Bài 2: Khởi tạo CouponModule
Bài 3: Service kiểm tra coupon hợp lệ
Bài 4: Endpoint preview mã giảm giá
Bài 5: Áp dụng coupon vào đơn hàng
Bài 6: Gỡ coupon khỏi đơn hàng
Bài 7: Mã giảm giá nổi bật
Bài 8: Service và hook ở frontend
Bài 9: Component nhập mã coupon trong giỏ
Bài 10: Hiển thị coupon đã áp dụng
Bài 11: Tăng usage count khi đơn được xác nhận

Học viên thiết kế schema thanh toán, tích hợp đầy đủ PayOS (bao gồm webhook và return URL), đồng thời xây dựng giao diện trang checkout ở phía frontend.

Bài 1: Business requirements và tổng quan thanh toán
Bài 2: Thiết kế schema Payment
Bài 3: Đăng ký PayOS test account
Bài 4: Setup ngrok cho webhook local
Bài 5: Service PayOS wrapper
Bài 6: Tạo yêu cầu thanh toán
Bài 7: Endpoint tạo thanh toán
Bài 8: Webhook xử lý callback từ PayOS
Bài 9: Return URL sau khi user thanh toán
Bài 10: Endpoint đồng bộ trạng thái thanh toán (backup)
Bài 11: Endpoint trạng thái thanh toán
Bài 12: Service và hook thanh toán ở frontend
Bài 13: Trang checkout và chặn guest
Bài 14: Đặt đơn với COD
Bài 15: Đặt đơn với PayOS
Bài 16: Polling trạng thái thanh toán
Bài 17: Trang xử lý return URL

Học viên build module quản lý hồ sơ và nhiều địa chỉ giao hàng cả backend và frontend.

Bài 1: Khởi tạo ProfileModule
Bài 2: Endpoint xem và cập nhật hồ sơ
Bài 3: DTO địa chỉ và validation
Bài 4: CRUD địa chỉ
Bài 5: Logic địa chỉ mặc định
Bài 6: Service và hook ở frontend
Bài 7: Layout trang tài khoản
Bài 8: Tab hồ sơ
Bài 9: Tab địa chỉ với danh sách
Bài 10: Form thêm và sửa địa chỉ
Bài 11: Hookup address selector trong checkout

Học viên tạo endpoint đơn hàng, history page, tracking page, admin update flow, và email notifications cho order events.

Bài 1: Lấy danh sách đơn của user
Bài 2: Lấy chi tiết đơn hàng
Bài 3: Service ghi lịch sử trạng thái
Bài 4: Admin cập nhật trạng thái đơn
Bài 5: Hủy đơn hàng
Bài 6: Email xác nhận đặt hàng
Bài 7: Email cập nhật trạng thái đơn
Bài 8: Service và hook ở frontend
Bài 9: Tab đơn hàng trong tài khoản
Bài 10: Trang theo dõi đơn hàng
Bài 11: Hủy đơn từ phía user

Học viên cấu hình nestjs-i18n, tạo các bảng dữ liệu phục vụ dịch thuật (translation), và cập nhật (retrofit) các API Category/Product để hỗ trợ đa ngôn ngữ ở phía backend.

Bài 1: Phân biệt UI translation và content translation
Bài 2: Setup nestjs-i18n
Bài 3: Dùng I18nService trong service và exception
Bài 4: i18n cho validation messages
Bài 5: Thiết kế translation entities
Bài 6: Implement translation entities
Bài 7: Cập nhật service Category với translations
Bài 8: Cập nhật service Product với translations
Bài 9: Cập nhật service ProductOption, OptionValue, Attribute
Bài 10: Test i18n backend

Học viên cấu hình next-intl, tạo các file messages, và cập nhật toàn bộ các trang của shop để hỗ trợ đa ngôn ngữ.

Bài 1: Setup next-intl
Bài 2: Tạo messages files
Bài 3: Hook useTranslations trong client components
Bài 4: Function getTranslations trong server components
Bài 5: Component chuyển đổi ngôn ngữ
Bài 6: Cấu hình axios pass cookie locale
Bài 7: Tích hợp i18n vào catalog và detail pages

Học viên setup admin route group, build dashboard với metrics, và toàn bộ flow quản lý sản phẩm bao gồm form phức tạp với variants, attributes, và upload ảnh.

Bài 1: Setup route group và layout admin
Bài 2: Trang dashboard với metrics
Bài 3: Trang danh sách sản phẩm
Bài 4: Form tạo và chỉnh sửa sản phẩm cơ bản
Bài 5: Upload ảnh trong form sản phẩm
Bài 6: Quản lý biến thể trong trang sản phẩm
Bài 7: Quản lý ProductAttribute trong trang sản phẩm

Học viên build các trang quản trị có độ phức tạp trung bình: tree view cho category, list/detail/update cho order, form với date picker cho coupon.

Bài 1: Quản lý danh mục với tree view
Bài 2: Form thêm và sửa danh mục
Bài 3: Trang danh sách đơn hàng
Bài 4: Modal chi tiết đơn hàng
Bài 5: Cập nhật trạng thái đơn hàng
Bài 6: In hóa đơn
Bài 7: Trang quản lý mã giảm giá
Bài 8: Form tạo và sửa coupon
Bài 9: Helper tạo mã ngẫu nhiên

Học viên xây dựng các trang quản trị còn lại (User, Settings) và quan trọng hơn là sử dụng chính admin UI này để tạo dữ liệu thực cho dự án.

Bài 1: Trang quản lý người dùng
Bài 2: Modal chi tiết người dùng
Bài 3: Trang cài đặt hệ thống

Học viên build hero section của trang landing với 3D model laptop tương tác.

Học viên build toàn bộ các section khác của landing với Framer Motion animations.

Học viên tích hợp Elasticsearch làm công cụ tìm kiếm song song với PostgreSQL, cập nhật phần frontend của catalog để sử dụng các endpoint từ ELK, đồng thời thiết lập Elasticsearch chạy cục bộ (local) trong module này.

Học viên tạo repo devops và setup pipeline đồng bộ dữ liệu PostgreSQL sang Elasticsearch tự động với Logstash + Kibana.

Học viên tích hợp Axiom làm centralized logging cho cả backend và frontend.

Học viên tích hợp Sentry cho cả backend và frontend, bao gồm theo dõi hiệu năng (performance monitoring) và ghi lại phiên người dùng (session replay).

Học viên cài đặt Claude Code, hiểu các thao tác cơ bản, và viết prompt hiệu quả.

Học viên sử dụng Claude Code để xây dựng tính năng đánh giá (review) hoàn chỉnh theo quy trình end-to-end.

Học viên sử dụng Claude Code để xây dựng tính năng “favorite”. Đây là một feature mới với entity Favorite chưa có trong schema, qua đó học viên có thể quan sát cách Claude tự đề xuất và thiết kế schema một cách hợp lý trong quá trình triển khai.

Học viên sử dụng Claude Code để xây dựng tính năng comment dạng threaded (phân cấp). Đây là một feature có quan hệ tự tham chiếu (self-reference) phức tạp hơn, nhằm kiểm tra khả năng Claude xử lý logic đệ quy và cấu trúc dữ liệu phân cấp.

Học viên sử dụng Claude Code để xây dựng tính năng thông báo (notifications) và tích hợp với các module hiện có như Order, Comment và Review. Đây là một tính năng yêu cầu tích hợp xuyên module (cross-module integration), nhằm đảm bảo hệ thống có thể phát sinh và xử lý thông báo từ nhiều nguồn khác nhau.

Học viên hiểu Docker đủ để build production image cho backend và frontend.

Học viên setup pipeline tự động deploy repos lên server. Setup VPS, domain, HTTPS ở module này.