Phan Bội Châu 2006 (Step Forward Reach Far) is a complex, real-time web application built for the alumni of Phan Boi Chau High School (Class 2003-2006). Moving beyond a simple commemorative website, it is a fully-fledged platform that enables alumni to connect through real-time seat selection for buses, live chat, social feeds, and an immersive user experience.
- Website: tiepbuocvuonxa.nk0306.live
- Market: Vietnam (Alumni Community)
- Role: Full-stack Developer & System Architect
- Project Type: Custom Full-stack Platform
Related Service: This custom theme was developed using my Figma to WordPress service, ensuring pixel-perfect translation of design assets, clean Gutenberg editing backend, and sub-2s loading speed.
| Stack | Technology Used |
|---|---|
| Frontend | React 18, TypeScript, Vite, Wouter, TanStack Query, Framer Motion |
| Backend | Node.js, Express 5, TypeScript |
| Database | SQLite (better-sqlite3) + Drizzle ORM |
| Realtime | Native WebSockets |
| Auth | JWT, bcrypt, Google OAuth (GIS), OTP Component |
| Styling | Tailwind CSS, Radix UI |
Built as a modern Monorepo (Client + Server), integrating a schema-first approach using Drizzle ORM where shared/schema.ts acts as the single source of truth for both frontend and backend. State management is handled entirely via React Context and Custom Hooks, avoiding Redux bloat.
Real-time Seat Selection
- Live Seat Map: Interactive bus layout resembling a real-world seat map.
- Collaborative Presence: See who is currently hovering over seats in real-time with collaborative cursors and anonymous viewer tags.
- Atomic Transactions: Backend SQLite transactions ensure zero conflicts during simultaneous seat booking.
- Seat Locking: Temporary 10-minute locks while a user is actively selecting.
Real-time Chat System
- Nostalgic Vibes (Yahoo Messenger): Recreated the classic 2000s chatting experience by integrating custom retro Yahoo chat icons and emoticons perfectly suited for the 2006 alumni.
- Per-Bus & Global Wall Chat: Real-time messaging within specific buses or on the global "Wall Board".
- Rich Interactions: Emoji reactions, reply threads, and pinned messages.
- Smart Navigation: Jump-to context functionality, cursor-based pagination, and full-text message search.
- Typing Indicators: Real-time visual queue when attendees are responding.
Enterprise-Grade Security
- OAuth Integration: One-click Google login (GIS) paired with OTP configurations.
- Rate Limiting: Complete protection against brute-force attacks on vulnerable API endpoints.
- SSRF Protection: Safely secured link-previews using validated DNS lookups.
- Role-Based Control: Deep 3-tier clearance permissions (User, Admin, Super Admin).
📰 Social Feed & Media
- Community Feed: Users can casually post media, feelings, and text.
- Image Processing: Avatar cropping functionality and dynamic conversion to WebP format via Multer.
- Background Music Player: Synced, site-wide YouTube iframe music player with admin-controlled playlists.
️ Comprehensive Admin Dashboard
- Analytics & Moderation: Real-time stats, activity timelines, and full moderation control over users, feeds, and chats.
- Seat Management: Admins can manually lock, assign, or reset seats.
- Data Export: Generate community lists directly to Excel (.xlsx).
react 18 · typescript · drizzle orm · websockets · realtime · tailwind css · express 5 · fullstack · alumni
