🎓 LearnHub
Nền tảng học tập & ôn luyện đa lĩnh vực — kiểu Coursera, chạy hoàn toàn tĩnh, không cần backend.
Một SPA thuần HTML/CSS/JavaScript (không framework, không build step): catalog nhiều khóa học,
mỗi khóa chia thành chương → bài học, có quiz chấm điểm, thi thử bấm giờ và lưu tiến độ ngay trên máy.
Dự án được xây để tự ôn luyện trên điện thoại — nội dung tiếng Việt, đọc lướt dễ, mỗi chủ đề một mục riêng.
📚 Các khóa học
| Khóa | Dạng | Tiến độ | Mô tả |
|---|
| 🏗️ System Design | Tình huống + quiz | ✅ 60/60 ngày | Mỗi bài một tình huống production thật: chọn phương án, hiểu vì sao đúng và vì sao các lựa chọn khác là bẫy. Song ngữ Việt–Anh, có sơ đồ minh họa. |
| 📊 Storytelling with Data | Bài giảng + quiz | ✅ 10/10 chương | Chọn biểu đồ, loại bỏ rối, hướng sự chú ý, kể câu chuyện thuyết phục bằng dữ liệu. |
| 💡 INSPIRED | Bài giảng + quiz | ✅ 41/41 chương | Vai trò đội ngũ, khám phá sản phẩm, nguyên tắc — cách các công ty giỏi nhất làm ra sản phẩm truyền cảm hứng. Ba phần: Người · Quy trình · Sản phẩm. |
| 🧠 Machine Learning nền tảng | Module → bài giảng + quiz | Xem trước · 4/64 bài bắt buộc | M00-L01–M00-L04 đã mở, mỗi bài có hình, code, tương tác và 5 câu quiz; có notebook, LAB-M00 và bộ slide web giảng dạy toàn M00. Các module sau đang biên soạn. |
| 🧭 Product Owner | — | 🔜 Sắp ra mắt | Backlog, user story, stakeholder, ưu tiên hóa. |
| 🎨 Frontend Engineering | — | 🔜 Sắp ra mắt | Rendering, state, performance, accessibility. |
| 🤖 Data & AI | — | 🔜 Sắp ra mắt | Pipeline, warehouse, ML, LLM ứng dụng. |
✨ Tính năng
| Màn hình | Mô tả |
|---|
| 🏠 Trang chủ | Thẻ "Tiếp tục học" + lưới khóa học có thumbnail; khóa tương lai hiện "Sắp ra mắt" |
| 📚 Trang khóa học | Hero banner + chương (accordion) → bài học có tick ✓/✗; tìm kiếm, lọc, đánh dấu 🔖 |
| 📖 Bài học | Đề → chọn đáp án → lời giải từng phương án; chuyển VI/EN; sơ đồ minh họa |
| ✍️ Luyện tập | Random ưu tiên bài chưa làm & bài sai, phản hồi + lời giải ngay |
| 🎯 Thi thử | Chọn số câu (10/20/30/60), chủ đề, bấm giờ; nộp bài mới biết điểm; lưu lịch sử; xem lại câu sai |
| 🔁 Ôn lại | Danh sách bài đang sai + bài đã đánh dấu — làm lại đến khi đúng |
| ⚙️ Cài đặt | Ngôn ngữ mặc định, xuất/nhập tiến độ (JSON), xóa tiến độ, sáng/tối |
Hỗ trợ người mới: từ điển thuật ngữ (hover/tap hiện popover) và hộp "Giải thích đề cho người mới"
— cả hai soạn sẵn, không cần gọi API. Giao diện responsive mobile + dark mode.
🚀 Chạy dự án
Cách 1 — mở trực tiếp: mở website/index.html bằng trình duyệt.
Cách 2 — chạy server (khuyến nghị):
cd website
python3 -m http.server 8642
# → http://localhost:8642
Xem trên điện thoại (cùng WiFi): thay localhost bằng IP máy, ví dụ http://192.168.1.10:8642.
☁️ Deploy lên Vercel
Repo đã có sẵn vercel.json — không cần cấu hình thêm:
npm i -g vercel
vercel # preview
vercel --prod # production
Hoặc nối thẳng repo GitHub trong dashboard Vercel → Vercel tự nhận outputDirectory: "website",
deploy dạng static, kèm security headers và cache dài cho assets/.
Không cần biến môi trường. Toàn bộ ứng dụng chạy client-side, không có backend, không có API key.
🗂️ Cấu trúc
.
├── README.md # tài liệu tổng quan (file này)
├── vercel.json # cấu hình deploy static + security headers
├── .gitignore # loại tài liệu bản quyền & file local khỏi git
├── tools/
│ └── parse.py # script trích xuất nội dung từ PDF nguồn (chạy local)
└── website/
├── README.md # 📘 hướng dẫn CHI TIẾT cho người phát triển nội dung
├── index.html # khung trang + loader dữ liệu
├── css/style.css # toàn bộ giao diện
├── js/app.js # SPA logic (router, quiz, chấm điểm, lưu trữ)
├── assets/
│ ├── img/ # sơ đồ minh họa bài học
│ └── thumbs/ # thumbnail khóa học
└── data/
├── manifest.js # ⭐ danh sách file dữ liệu — thêm nội dung thì khai báo ở đây
├── courses.js # danh mục khóa học
├── glossary.js # từ điển thuật ngữ
├── primer.js # "Giải thích đề cho người mới"
├── days-en.js # nội dung gốc tiếng Anh
├── meta.js # chủ đề, tiêu đề, độ khó
├── lessons-*.js # bài giảng dạng chương (SWD, INSPIRED)
└── vi/ # bản dịch tiếng Việt theo lô
👉 Muốn thêm khóa học / bài học / bản dịch? Xem hướng dẫn chi tiết trong website/README.md.
🛠️ Kiến trúc & nguyên tắc thiết kế
- Zero build, zero dependency — mở file là chạy. Không npm install, không bundler, không framework.
- Dữ liệu tách khỏi code — mọi nội dung nằm trong
data/*.js dạng object thuần; thêm nội dung
chỉ cần thêm file + khai báo một dòng trong manifest.js.
- Loader chịu lỗi — file dữ liệu thiếu/lỗi sẽ bị bỏ qua (
onerror), không làm sập ứng dụng.
- Tiến độ ở client — lưu trong
localStorage, xuất/nhập được bằng JSON. Không thu thập dữ liệu người dùng.
- Mobile-first — nội dung chia mục ngắn, mỗi chủ đề một section để lướt trên điện thoại dễ theo.
🔒 Bảo mật & quyền riêng tư
- ✅ Không backend, không API key, không biến môi trường, không secret trong repo.
- ✅ Không thu thập/gửi dữ liệu người dùng — tiến độ chỉ nằm trong
localStorage của trình duyệt.
- ✅
.gitignore chặn sẵn .env*, *.pem, *.key, id_rsa*, *credential*.
- ✅
vercel.json bật X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy.
⚖️ Bản quyền nội dung
Đây là dự án học tập cá nhân, không dùng cho mục đích thương mại.
Nội dung các khóa học được diễn giải lại bằng tiếng Việt từ các tài liệu gốc, không phải bản dịch
nguyên văn, nhằm phục vụ việc tự ôn tập:
- 60 Days of System Design Questions — Joud Awad
- Storytelling with Data — Cole Nussbaumer Knaflic
- INSPIRED: How To Create Products Customers Love — Marty Cagan
Các file PDF sách gốc KHÔNG được commit vào repo (đã chặn trong .gitignore) — chúng chỉ tồn tại
trên máy local để đối chiếu. Bản quyền thuộc về các tác giả và nhà xuất bản tương ứng.
Nếu bạn thấy nội dung hữu ích, hãy mua sách gốc để ủng hộ tác giả.
🗺️ Lộ trình
Đã có bộ thiết kế khóa Machine Learning nền tảng: phân tích hai sách nguồn, đề cương 64 bài bắt buộc, 16 lab, rubric dự án và một bài/notebook mẫu. Website đã mở bản xem trước đủ M00-L01–M00-L04, LAB-M00 và một bộ slide web toàn M00 để review; nhật ký triển khai ghi rõ phạm vi từng đợt.
