React 19 · Firebase · Framer Motion · Tailwind CSS

Situation: Users need a seamless streaming experience that supports multiple personal accounts with independent watch histories on a single device.

Task: Build an intuitive streaming interface with a secure profile gate feature and real-time user data synchronization.

Action: Developed the front-end using React 19 and Tailwind CSS, designing a hierarchical data structure on Firestore (users/uid/profiles). Implemented code splitting, debounced search, and smooth transitions using Framer Motion to elevate the visual experience.

Result: Achieved sub-100ms latency for "My List" synchronization, reduced API overhead by ~40%, and maintained stable 60fps shared element transitions.

Live Demo · Source

Socket.io · Zustand · Node.js · Express · MongoDB

Situation: Modern messaging apps require instant response times and high security to ensure uninterrupted communication.

Task: Build a real-time chat platform capable of processing messages instantly while preventing web security vulnerabilities.

Action: Utilized Socket.io with Node.js/Express for the messaging flow and typing indicators. Designed an Optimistic UI with skeleton loaders to keep the interface stable, and secured the authentication flow using JWT in HTTP-Only cookies.

Result: Successfully deployed the app with 32 custom themes, delivering a smooth user experience with zero Cumulative Layout Shift (CLS) and robust protection against XSS attacks.

Live Demo · Source

Node.js · Express · MongoDB · Redis

Situation: Students often struggle with long-term knowledge retention due to unscientific review schedules.

Task: Create an educational platform applying spaced repetition methods alongside a competitive progress-tracking system.

Action: Integrated a custom SM-2 algorithm to automatically calculate optimal review intervals. Leveraged Redis to cache the leaderboard and utilized MongoDB aggregation pipelines for real-time data analysis.

Result: Provided highly accurate, personalized review schedules and drastically reduced leaderboard load latency by 90% (from 500ms down to <50ms).

[Still in progress] Source

React 19 · Node.js · Express · MongoDB · Cloudinary · JWT · Render

• Cart engine via useReducer + Context API
• Role-Based Access Control with JWT-protected admin routes
• Server-side pagination, sorting & debounced search

[Live Demo] Client Server Source

PHP · Laravel · MySQL

• Connects current HCMC University of Education students with alumni for mentoring & career guidance
• Profile setup system with education history, skills, and career interests
• 1-on-1 real-time messaging for private mentorship conversations
• Alumni directory with search & filtering by graduation year, major, and industry

Private repository

React · Node.js · PostgreSQL · Socket.io

• QR-based digital menu — customers scan, browse, and order from their phone
• Real-time order pipeline connecting customers → waitstaff → kitchen via WebSocket
• Kitchen display system with order queue, priority sorting, and completion tracking
• Built for mid-scale restaurants — manages multiple tables, split bills, and order history

Private repository

React 18 · Node.js · Express · MongoDB · Tailwind CSS · Material-UI

Situation: Educational centers need a centralized system to handle complex data across multiple departments (academic, accounting, teaching) securely.

Task: Collaborate in a 3-person team to develop a management platform with granular role-based access control and visual financial tracking.

Action: Built a 6-role RBAC system (Director, Academic Staff, Accountant, etc.) using React 18 and Node.js. Integrated a financial module, designed an interactive dashboard with Recharts, and implemented full i18n support (English/Vietnamese).

Result: The system operates smoothly, allows for real-time financial and revenue report exports (Excel/PDF), and ensures data security and isolation across different center departments.

[Still in progress] Source

Python · Flask · MongoDB · Folium · A* Algorithm

Situation: EV drivers in Vietnam struggle to find optimal routes with charging stations while avoiding geographical obstacles and unnecessary tolls.

Task: Design a smart routing system to calculate real-world costs and automatically suggest logical charging stops on long, complex routes (e.g., North-South).

Action: Built an A* heuristic AI pathfinding algorithm on a Python/Flask backend. Established an anchor-point system to prevent sea-crossing paths and developed an anti-ghost cost filter to deduplicate charges from overlapping toll cameras.

Result: The system automatically analyzes and proposes smart charging strategies (charging only enough to reach the next high-power station), significantly saving user wait time while providing real-time cost breakdowns for electricity and tolls.

Source

HTML5 · CSS3 · Vanilla JavaScript

• Pixel-perfect Flexbox + Grid layout, no frameworks
• Mobile-first responsive design
• Vanilla JS DOM manipulation & event delegation

Source