Scaffold

Light And Dark Mode
Themes For Better Visuals
FlowChat For Better Understanding
Pomodoro Technique
HeatMap For Daily Streak
Fidget Spinner
Breathing Exercise For Relaxed Mind
ChatBot For asking Any Doubt Or Confusion
Different Soothing Sounds
Notebook For A complete Roadmap Of The Topic To Study
Badges For Completeing Streak

Inspiration

Traditional learning often falls into the trap of passive consumption—students watch videos or read textbooks without deeply engaging with the material. We wanted to solve this by creating a platform that forces active recall and critical thinking. Inspired by the Socratic Method, we envisioned an AI tutor that doesn't just spoon-feed answers, but instead asks guiding questions to help learners arrive at the "aha!" moment themselves. We paired this educational philosophy with beautiful aesthetics and rich gamification to make learning deeply engaging and addictive.

What it does

Scaffold is an AI-powered educational platform that transforms how users master complex topics.

AI-Generated Roadmaps: Users enter any topic they want to learn, and Scaffold instantly generates a structured, milestone-by-milestone curriculum tailored to their current skill level and timeframe. Socratic Study Room: Instead of reading static text, users enter an interactive environment where an AI tutor teaches them step-by-step. The AI prompts the user to think critically, ensuring true comprehension before moving on.

Gamification & Customization: Learning is rewarded with XP and Coins. Users can track their study streaks on a GitHub-style heatmap and spend coins in the Theme Shop to unlock animated wallpapers, specialized UI themes, and custom avatars. Productivity Tools: A built-in Pomodoro Focus Zone helps users manage their study sessions and maintain deep work without distractions.

How we built it

We built Scaffold as a full-stack web application using a modern tech stack to ensure high performance and a stunning user experience:

Frontend & Framework: We used Next.js 14 (App Router) and React, styled extensively with Tailwind CSS. We implemented complex, buttery-smooth animations using Framer Motion and Lenis for smooth scrolling.

AI Engine: The core intelligence is powered by Google's Gemini API (using the fast and efficient Gemini Flash model). It handles both the dynamic generation of structured curriculum JSON and the contextual, Socratic conversations in the Study Room.

Backend & Auth: We leveraged Supabase for secure user authentication, session management, and profile data storage.

State & Storage: Client-side persistence and complex state management (like the Shop and Accessibility contexts) were handled using custom React context providers and local storage synchronization to ensure a snappy, optimistic UI.

Challenges we ran into

Prompt Engineering for Socratic Teaching: Tuning the Gemini model to stop giving away the answers was surprisingly difficult. We had to carefully craft system prompts to ensure the AI acts as a guide, asking probing questions rather than acting as a simple encyclopedia.

Complex UI/UX Constraints: Designing a highly interactive, animated interface that still feels responsive required deep optimization. Managing absolute positioning, complex z-indexing, and flexbox layouts for the roadmap timeline required significant debugging to ensure it scaled perfectly and rendered correctly across the dashboard.

Structured Data from AI: Ensuring the AI consistently returned strictly formatted JSON for the roadmap generation (milestones, estimated hours, etc.) required robust error handling and fallback mechanisms on our API routes.

Accomplishments that we're proud of

The Design Aesthetic: We are incredibly proud of the visual polish, glassy aesthetics, and micro-animations that make the platform feel like a premium, state-of-the-art product.

The Socratic Engine: Successfully implementing an AI interaction loop that genuinely teaches rather than just answers is a huge win for educational efficacy.

The Gamification Loop: The progression system actually feels rewarding, giving users a tangible reason to keep their study streaks alive just to unlock that next beautiful live wallpaper.

What we learned

The Intricacies of AI Structured Output: We learned how to constrain LLMs to output predictable data structures that power complex UIs reliably.

Advanced Next.js Architecture: We deepened our understanding of server-side vs. client-side boundaries in Next.js 14 and how to efficiently manage state and middleware across them.

The Psychology of Learning: We learned a lot about how gamification and low-friction micro-steps keep users motivated compared to traditional, overwhelming syllabuses.

What's next for Scaffold

Multiplayer & Social Features: We want to add study groups where users can tackle roadmaps together and compete on leaderboards.

Voice Integration: Implementing real-time voice conversations with the AI tutor for a more immersive, hands-free learning experience.

Expanded Ecosystem: Introducing badges, achievements, and even more dynamic profile customizations to the shop, as well as allowing users to share their custom roadmaps publicly.