// the problem
Why This Needed to Exist
Existing IT certification study platforms are either prohibitively expensive, outdated, or lack the interactive practice that actually helps you pass exams. Most platforms offer static flashcards or basic multiple-choice without simulating real CLI environments. I needed a free, modern platform that combines traditional study methods with hands-on terminal simulations — the type of practice that actually builds exam confidence.
// what i built
The Solution
I built CertificationsHub as a full-stack Next.js application with Firebase backend. The platform features dynamic MCQ rendering with immediate feedback, CLI-style lab simulations where users practice real commands in a simulated terminal, progress tracking with persistent state, and scroll-based animations for an engaging study experience. Authentication is handled through Firebase Auth with email/password and Google OAuth.
// key challenges
Problems I Solved
Mobile White Screen Bug on iOS Safari
A loading fallback component was rendering a full-screen overlay that prevented the actual content from appearing on mobile. The root cause was a mismatch between SSR-rendered HTML and client-side hydration caused by dynamic imports. I fixed it by using next/dynamic with { ssr: false } for interactive components and adding proper loading skeletons that match the server-rendered output.
Real-Time Progress Sync Across Devices
Users expected their study progress to sync instantly between their phone and laptop. I implemented Firestore real-time listeners with optimistic UI updates — the local state updates immediately while the database write happens asynchronously, with conflict resolution favoring the most recent timestamp.
CLI Simulation Performance
The terminal simulation component was causing re-renders across the entire page. I extracted it into its own React context with memoized command handlers and used requestAnimationFrame for smooth character-by-character output rendering, achieving 60fps even on mid-range phones.
// outcomes
What I Learned
The platform is live and deployed on Vercel with zero downtime since launch. It supports multiple certification tracks (CompTIA A+, Cisco), handles real-time user progress, and delivers a smooth experience across all devices. The project demonstrated full-stack proficiency, mobile debugging expertise, and the ability to build production-quality applications from concept to deployment.
// tech stack
Tools & How I Used Them
Next.js
App Router with SSR, dynamic routing, and server components
Firebase Auth
Email/password and Google OAuth with session persistence
Firestore
Real-time NoSQL database for progress tracking and user data
Framer Motion
Scroll-triggered animations and page transitions
Tailwind CSS
Responsive utility-first styling with custom design system