Skip to content
← All projects
Frontend

Aug 2026 - Sep 2026 • Secondary Math Academic & Enrollment Web Platform (React 19 + TanStack)

Live Demo →View on GitHub →
Ảnh dự án Hoang Vu Math Portal (Cổng Thông Tin Học Thuật & Tuyển Sinh)

Overview

Hoang Vu Math Portal is an academic information and enrollment web platform for Tran Hoang Vu Math Education Center (led by Teacher Ho Thi Hoa). Built with a modern Jamstack / Edge-Rendered SPA architecture using TanStack Start, Nitro Engine, and React 19. Features a zero-database client-side smart enrollment engine forwarding structured payloads directly to Zalo, interactive math quiz widgets, interactive Google Maps, and an Academic Editorial design system using the Fraunces typeface.

System Architecture

Modern Jamstack / Edge-Rendered SPA deployed to Vercel Edge network via Nitro Engine. Edge routing powered by TanStack Router v1 with strict type-safe file-based routing auto-generating routeTree.gen.ts. Presentation layer uses Tailwind CSS v4 CSS-First engine (@theme OKLab color space), Radix UI headless primitives, and CVA multi-variant styling.

Data & Database

Config-Driven Architecture storing all business schemas, teacher profiles, interactive math banks, and curriculum taxonomies in src/lib/site.ts as immutable const assertions. The composeMessage pipeline sanitizes input client-side and compiles structured URI payloads directly into Zalo without database overhead.

Key Challenges & Technical Solutions

  1. 01

    1. Zero-Loss Multi-Channel Enrollment Conversion:

    Engineered Direct Channel Bridging compiling form inputs into structured Zalo message payloads; dynamic QR Code engine for desktop scans; floating action bar (FAB) with phone-ring animation that pauses on hover.

  2. 02

    2. Full End-to-End Type Safety with React 19 & Tailwind CSS v4:

    Configured @tanstack/router-plugin for compile-time verified route trees; mapped OKLab color tokens via Tailwind v4 @theme with LightningCSS; created declarative error boundaries preventing blank-screen crashes.

  3. 03

    3. Core Web Vitals Optimization & WAI-ARIA Accessibility:

    Preloaded academic Google Fonts (Fraunces & Inter) with swap display; converted media assets to lightweight WebP; offloaded micro-animations to GPU transforms (CLS = 0, Lighthouse > 95); integrated Radix UI accessible primitives.