Tháng 8, 2026 - Tháng 9, 2026 • Cổng Tuyển Sinh & Học Thuật Toán THCS (React 19 + TanStack)
Tổng quan
Hoang Vu Math Portal là nền tảng web tuyển sinh và cổng thông tin học thuật Toán THCS trực tuyến cho Trung tâm Bồi dưỡng Kiến thức Trần Hoàng Vũ (cô Hồ Thị Hoa phụ trách). Xây dựng trên kiến trúc Modern Jamstack / Edge-Rendered SPA với TanStack Start, Nitro Engine và React 19. Tích hợp động cơ đăng ký Smart Enrollment chuyển tiếp Zalo không cần backend database, widget tương tác giải toán, bản đồ số Google Maps và hệ thống nhận diện học thuật cổ điển (Academic Editorial) với font Fraunces.
Kiến trúc Hệ thống
Kiến trúc Modern Jamstack / Edge-Rendered SPA triển khai trên mạng biên Vercel Edge qua Nitro Engine. Tầng định tuyến sử dụng TanStack Router v1 strictly type-safe theo file-based routing (src/routes/__root.tsx, index.tsx), tự động sinh routeTree.gen.ts. Tầng UI áp dụng Tailwind CSS v4 CSS-First (@theme OKLab), Radix UI Headless Primitives (Dialog, Accordion, Slot) và CVA multi-variant styling.
Dữ liệu & Cơ sở dữ liệu
Mô hình Config-Driven Architecture tập trung toàn bộ dữ liệu nghiệp vụ, profile giáo viên, ngân hàng bài toán tương tác và lộ trình đào tạo tại module src/lib/site.ts dưới dạng const assertions bất biến. Pipeline composeMessage tổng hợp và làm sạch dữ liệu biểu mẫu client-side, sinh payload có cấu trúc đẩy trực tiếp sang Zalo API / URL URI scheme mà không cần lưu trữ database.
Thách thức Kỹ thuật & Giải pháp cốt lõi
- 01
1. Chuyển đổi tuyển sinh đa kênh tức thì (Zero-Loss Lead Generation):
Triển khai Direct Channel Bridging tự động định dạng form thành tin nhắn Zalo chuẩn hóa; tích hợp Dynamic QR Code Engine trong modal desktop để phụ huynh quét mã nhắn tin ngay; thiết kế Floating Action Bar (FAB) mô phỏng chuông reo thu hút tương tác mà không gây khó chịu.
- 02
2. Type Safety 100% với React 19, Tailwind CSS v4 và TanStack Router:
Cấu hình plugin @tanstack/router-plugin tự sinh manifest định tuyến an toàn tuyệt đối lúc build; chuyển đổi toàn bộ token màu OKLab vào @theme với LightningCSS parser; thiết lập Error Boundary và 404 Fallback component chuyên biệt chống sập trang.
- 03
3. Tối ưu Core Web Vitals & Tiếp cận Học thuật (WAI-ARIA):
Preload Google Fonts (Fraunces & Inter) kèm font-display: swap; nén toàn bộ media sang WebP; chuyển hóa chuyển động phức tạp sang GPU-accelerated CSS keyframes đạt CLS = 0 và Lighthouse Performance > 95; tích hợp Radix UI primitives bảo đảm focus trapping và hỗ trợ điều hướng bàn phím hoàn chỉnh.