All projects

Full-Stack ProductPrototype

SynergyLearn

Full-stack AI learning platform with IDE, code execution, and progress sync.

A look inside

4 screens from the real build. Select any to see it full size.

The landing page. SynergyLearn pairs AI-generated topic lessons with a real code editor, so learners read, practice and get hints in one place.
Learning starts with a career path. Each one is backed by its own roadmap of topics, from Full Stack to Data Science.
What sits behind each topic: Gemini-generated lessons cached in Firestore, a Monaco editor that runs code through Judge0, and progress, streaks and badges saved per user.
Sign-up through Firebase Auth. Everything after this point is per-user, and every API call carries a verified ID token. The signed-in screens are in the walkthrough video.

Overview

End-to-end learning platform with sandboxed code execution, in-browser IDE, AI hints, real-time progress tracking, and gamification.

The problem

Learning platforms often separate lessons, coding, feedback, and progress tracking into disconnected experiences.

What I built

Worked across frontend, backend integrations, auth, progress state, and AI hinting flows.

What it does

  • In-browser IDE
  • AI hints
  • Progress sync
  • Gamified learning

System and architecture

A React and Firebase platform combines auth, progress tracking, Monaco editing, Judge0 execution, and Gemini hints.

React frontend with Firebase Auth and Firestore progress tracking. Monaco powers the IDE, Judge0 executes code in a sandbox, and Gemini provides contextual hints with graceful fallbacks for external dependency failures.

System map5 layers
  1. Interface
  2. Security & identity
  3. API & services
  4. Retrieval & data
  5. AI & models
  • Firebase Auth and Firestore progress sync
  • Monaco IDE with Judge0 sandbox execution
  • Gemini hints with graceful dependency fallbacks

Technology

  • React
  • Firebase
  • Gemini
  • Judge0
  • Monaco Editor
  • Firestore

Themes

  • Learning platform
  • AI hints
  • Code execution

Challenges and trade-offs

  • Handling external service failures without breaking the learning session.
  • Keeping coding feedback useful without over-relying on AI hints.

Outcome

At a glance

Judge0 sandbox · Monaco IDE · Gemini hints · Firebase progress sync

  • Integrated lessons, code execution, hints, and progress into one product flow.
  • Improved reliability through fallback handling around external AI and execution APIs.

Learnings

  • Full-stack AI products need reliable non-AI fallbacks.
  • Progress and feedback loops are central to learning-product UX.

Links open in a new tab.