Skip to content
View vanhuy2005's full-sized avatar
:octocat:
shy
:octocat:
shy
  • 14:17 (UTC -12:00)

Highlights

  • Pro

Block or report vanhuy2005

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don't include any personal information such as legal names or email addresses. Markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
vanhuy2005/README.md

FRONTEND DEVELOPER INTERNSHIP


"Extremely fascinated by EdTech & Community-Driven Products"
"Don't just write code, instead building up useful production"





ABOUT ME

  • Hi, my name is Nguyen Van Quang Huy. You can call me Huy Nguyen or Van Huy.
  • I’m an Information Technology undergraduate at Ho Chi Minh City University of Education, with a strong interest in full-stack web development and building practical, scalable products..
  • Regarding my strengths, I have a solid foundation in frontend development and UX design, working primarily with JavaScript and React, along with modern UI and animation libraries such as TailwindCSS, Framer Motion, and GSAP. On the backend, I build APIs and services using Node.js and Express, with MongoDB and PostgreSQL as my main databases.
  • Additionally, the most crucial thing set me apart from other candidates is my long-term mindset and consistency. I'm using my passion in technology and my purpose for a dream life to fuel me day by day, pushing forward through any challenges rather than avoiding them.
  • For me, I valued the work-life balance and continuous development. Exemplified through my lifestyle and habits, aside from studying at school, I am still hitting the gym and learning new languages.
  • Thanks for reading. Always open to learning, connecting, and contributing to meaningful projects.

LANGUAGES

 

"Work hard in silence, let your success be your noise."


SOLID KNOWLEDGE ABOUT

Front End Development
Frontend Skills

Back End & Database
Backend Skills

Tools & Workflow
Tools


SOME OF MY WORKS

(Click to expand details)

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)
Netflix Home UI

Responsive Mobile UI Profile Selection UI

Live Demo  |  Source Code

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)
ChatHub Logo

Chat Interface

Login Page Theme Selection

Live Demo  |  Source Code

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)
Home Page

Shopping Cart Admin Dashboard

Live Demo  |  Source Code

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)
Dashboard

Flashcard Review Redis Leaderboard

Live Demo  |  Source Code

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)
Desktop UI

Mobile UI

Source Code



Github Stats (Click to expand)
Github Streaks
GitHub Streak
Contribution Graph

Show some ❤️ by starring some of the repositories! Thankss!!!

Pinned Loading

  1. real-time-chat real-time-chat Public

    A mini-project for applying and practicing my knowledge about MERN stack and Socket.io from YouTube videos

    JavaScript 10

  2. vanhuy2005 vanhuy2005 Public

    7

  3. netflix netflix Public

    Learning how to call API from TMDB, and using firebase to manage authentication flow

    JavaScript 6