Скачать или смотреть Học Cách Làm Dự Án Fullstack MERN 2025: React + Node + MongoDB + Tailwind 4 + Shadcn

Chúng ta sẽ build ứng dụng Todo từ con số 0 → CRUD, filter theo trạng thái/thời gian, pagination, thống kê, và deploy miễn phí.
Stack sử dụng: MERN (MongoDB, Express, React, Node.js), Tailwind CSS 4, shadcn/ui.

===========================================================

📌 Source Code: https://github.com/mtikcode/mtikcode_...
📌 Tài Liệu Khoá Học: https://drive.google.com/drive/folder...

===========================================================

👉 Tài nguyên:
🔗 25 câu lệnh terminal: https://blog.thanhnamnguyen.dev/cac-l...
🔗 MongoDB doc: https://www.mongodb.com/docs/drivers/...
🔗 Cài Tailwind: https://tailwindcss.com/docs/installa...
🔗 Cài Shadcn: https://ui.shadcn.com/docs/installati...
🔗 Sonner toast: https://sonner.emilkowal.ski/
🔗 Deploy: https://render.com/

===========================================================

⏱ Timestamps:
00:00 – Giới thiệu khóa học
02:26 – Setup Backend
07:43 – Bắt đầu tạo APIs
13:32 – Routes & Controllers
18:45 – Kết nối với MongoDB
27:39 – Tạo Model cho Database
31:07 – Logic Controllers & test API với Thunder Client
46:23 – Setup Frontend (React App)
53:15 – Cài TailwindCSS + Shadcn + Setup theme màu
59:34 – Viết UI cho trang NotFound
01:01:57 – Viết UI cho HomePage
01:38:05 – Kết nối với Backend
01:56:54 – CRUD: Tạo, Xóa, Update Nhiệm vụ
02:11:31 – Tạo DateTime Filter
02:22:37 – Thêm Phân Trang (Pagination)
02:36:10 – Deploy dự án Fullstack
02:48:28 – Tổng kết

===========================================================
📦 VS Code Extensions mình dùng:

🧩 ES7+ React/Redux/React-Native snippets
Cung cấp nhiều snippet giúp bạn tạo nhanh component (với rafce), import, useState, useEffect…

🧩 Thunder Client
Test APIs

🧩 React Hooks Snippets
Snippets cho các hook phổ biến của React

🧩 Tailwind CSS IntelliSense
Tự động điền, gợi ý class, highlight và kiểm tra lỗi khi dùng Tailwind CSS.

🧩 Material Icon Theme
Thay icon mặc định của VS Code bằng bộ icon Material, nhìn đẹp và dễ phân biệt các loại file hơn.

🧩 Auto Close Tag
Tự động thêm thẻ đóng khi bạn gõ thẻ mở trong HTML hoặc JSX.

🧩 Auto Rename Tag
Khi đổi tên một thẻ, thẻ đóng/mở còn lại cũng sẽ tự đổi theo.

🧩 Path Intellisense
Gợi ý đường dẫn khi bạn import hình ảnh, file JS, CSS...

🧩 Prettier – Code Formatter
Tự động format code mỗi khi save file, giúp code luôn sạch sẽ và đồng bộ style trong team.

===========================================================
Trong quá trình làm, nếu có gì thiếu sót thì cho mình biết nhé ⸜(｡˃ ᵕ ˂ )⸝♡