"Bridging the gap between Pedagogy and Technology"
"Extremely fascinated by EdTech & Community-Driven Products"
"Don't just write code, instead building up useful production"
"Extremely fascinated by EdTech & Community-Driven Products"
"Don't just write code, instead building up useful production"
- For now Dec 2025, I'm still a Junior IT student at the Ho Chi Minh University of Pedagogy, however, my college has educated and helped me lots, not only about dry technical skills, but also about the way how to become a good person who has abilities to contribute to society.
- Furthermore, learning in this place provides me a chance to figure out the gaps and struggles between traditional education and the modern era. As a result, I'm learning and focusing on developing software programs to make teaching and learning easier and more effective.
- About engineering value, personally, I commit that building systems that are fast, stable, and easy to scale up is much more important. However, it should look good (in the eyes of customers) and work perfectly first.
- For the long-term goal of myself, it should be a graduation with high distinction and becoming a skillful Full-stack Developer, who is ready for enterprise challenges.
- But for now, mastering JS + having HSK3 certification and a car driving license are my priority.
- Personally, I consider myself as a straightforward and value-transparent person. Thus, I always focus more on fixing problems and moving forward rather than dwelling on the past.
- Some fun facts about my lifestyle: I extremely prefer real-world interactions over video games. When I turn on my PC, it will probably be for checking Gmail. Not only in my free time, but it's like a part of my life. Hitting the gym is my dedication, besides enjoying good food and stunning landscapes with my bae is the motivation for me to be a hustler.
- And yes for entertainment, likely to other IT student I was always thrive in asian cultures, such as china and japan, specificly anime.
Netflix Clone | React 19, Vite, Tailwind CSS, Framer Motion, Firebase (Auth, Firestore) |
- Leveraged React 19 and Vite to engineer a scalable Multi-Profile Architecture, allowing users to maintain distinct watch histories and settings within a single account, mimicking the complex data relationships of the original platform.
- Solved the browser's strict Autoplay Policy by implementing a robust "Cinematic Splash" fallback mechanism, ensuring a seamless intro experience across all devices without blocking user navigation.
- Designed a hierarchical Firestore NoSQL schema (users/uid/profiles) combined with Real-time Listeners to synchronize the "My List" instantly across sessions, achieving sub-100ms latency for data updates.
- Optimized First Contentful Paint (FCP) for heavy-media pages by applying Code Splitting and Lazy Loading for images/videos. Integrated Debouncing techniques on search inputs to reduce API overhead by ~40% and prevent race conditions.
- Orchestrated complex micro-interactions and layout transitions (Shared Element Transition) using Framer Motion, delivering a fluid 60fps user interface that rivals native application performance.
📸 Click here to see Project Screenshots (UI Preview)
ChatHub (Real-time System) | React, Zustand, Socket.io, Node.js, Express, MongoDB |
- Engineered a low-latency bi-directional communication channel using Socket.io to handle instant messaging and typing indicators. Adopted Zustand for global state management to handle high-frequency store updates efficiently, resolving the "Zombie Child" re-render performance bottlenecks common in Context API.
- Implemented Optimistic UI Updates to render messages immediately on the sender's interface before server acknowledgment, creating a "zero-latency" feeling. Designed Skeleton Loaders to prevent Cumulative Layout Shift (CLS) during initial data fetching.
- Hardened authentication security by storing JWT tokens in HTTP-Only Cookies to mitigate XSS attacks. Designed a robust MongoDB schema for message persistence and integrated Cloudinary for optimized media storage and delivery.
- Integrated DaisyUI to offer a highly customizable interface with 32 dynamic color themes, allowing users to personalize their experience while maintaining a consistent design system across the application.
Click here to see Project Screenshots (UI Preview)
FruitHub (E-Commerce) | React 19, Vite, Tailwind CSS, Context API, Node.js, MongoDB |
- Leveraged the latest features of React 19 and Vite to build a high-performance Single Page Application (SPA). Centralized complex shopping cart logic (add, remove, quantity adjustment) using Context API combined with useReducer, ensuring predictable state management without external dependencies.
- Engineered Role-Based Access Control (RBAC) by creating reusable Protected Route components, ensuring that sensitive Admin dashboards (Product/Order Management) are strictly accessible only to authorized personnel via JWT verification.
- Integrated Cloudinary for efficient image hosting and transformation, offloading media storage from the main server to improve load times and reduce bandwidth costs for the application.
- Designed a RESTful API with advanced features like server-side pagination and sorting. Implemented Debounced Search and client-side filtering to provide an instant product discovery experience, significantly enhancing user engagement.
Click here to see Project Screenshots (UI Preview)
MemoHub (EdTech Platform) | Node.js, Express, MongoDB, Redis, Spaced Repetition (SM-2) |
- Engineered a custom JavaScript implementation of the SuperMemo-2 (SM-2) Spaced Repetition Algorithm to mathematically calculate optimal review intervals, directly addressing the "Forgetting Curve" problem and maximizing vocabulary retention for learners.
- Solved the database read bottleneck on the Global Leaderboard by integrating Redis as a high-speed caching layer. This optimization utilized Redis Sorted Sets to reduce API latency by 90% (dropping from ~500ms to under 50ms) during peak traffic.
- Architected the backend using the MVC (Model-View-Controller) pattern combined with a Service Layer approach, ensuring the codebase remains modular, testable, and easy to maintain as the application scales.
- Leveraged advanced MongoDB Aggregation Pipelines ($lookup, $group) to process complex data relationships on the server side, generating real-time learning analytics and progress reports without overloading the client.
Click here to see Project Screenshots (UI Preview)
Static E-Commerce Page | Semantic HTML5, CSS3 (Flexbox/Grid), Vanilla JavaScript |
- Mastered the core CSS Box Model and modern layout systems (Flexbox, Grid) to construct a pixel-perfect, accessible user interface from scratch, demonstrating the ability to build complex layouts without relying on heavy CSS frameworks like Bootstrap.
- Ensured seamless cross-device compatibility by implementing a Mobile-First approach using Media Queries and fluid typography (rem/em), guaranteeing the interface renders perfectly across mobile, tablet, and desktop viewports.
- Deepened understanding of the browser rendering engine by writing clean, modular Vanilla JavaScript to handle DOM manipulations and Event Propagation (Bubbling/Capturing) manually, creating a solid foundation for learning modern frameworks later.
Click here to see Project Screenshots (UI Preview)
Github Stats (Click to expand)
Github Streaks
Contribution Graph
