Học Cách Làm Dự Án Fullstack MERN 2025: React + Node + MongoDB + Tailwind 4 + Shadcn

👉 Tham gia lộ trình lập trình Web trọn bộ với mình tại: https://mtikcodepro.com/ 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://mtikcodepro.com/source?repo=t... 📌 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é ⸜(｡˃ ᵕ ˂ )⸝♡