Scaffold

Add your task and plan your week
Generate a personalized roadmap for you
The Roadmap
Study Room with all your notebooks
Mind Map , flash cards , chat history inside every notebook
Heatmap and game system to keep you consistent
Shop to buy backgrounds to set the vibe of enviroment according to you

Inspiration Studying can often feel like an endless, unrewarding grind. We noticed that while it's easy to spend hours leveling up in a video game, spending that same time hitting the books drains our motivation. We wanted to bridge that gap by bringing the addictive progression loop of gaming into the realm of personal productivity. By combining smart AI assistance with a rich, gamified environment, Scaffold was born to make studying not just productive, but genuinely exciting.

What it does Scaffold is a gamified productivity platform tailored for students and lifelong learners. It transforms your daily grind into a rewarding adventure. It features a dedicated Study Room, a smart Notebook powered by AI that can process your PDFs, and an interactive Progress heatmap to track your daily streaks. As you hit your goals and maintain your study habits, you unlock 3D badges and earn rewards. These rewards can then be spent in the Shop to equip custom backgrounds and personalize your workspace.

How we built it We built the application using Next.js and React, styling the experience with Tailwind CSS to ensure a sleek, modern design. To bring the gamified elements to life, we relied heavily on Framer Motion for fluid animations.

Our backend, database, and authentication are entirely powered by Supabase, allowing us to reliably track user progress, streaks, and shop inventory in real-time. We integrated Google's Gemini AI to power our smart notebook features, and used pdfjs-dist to help users extract knowledge directly from their study materials. Finally, we utilized React Flow (xyflow) to build interactive, node-based mind maps for visual learners.

Challenges we ran into One of our biggest hurdles was seamlessly blending the "game" elements with the "productivity" tools without making the app feel cluttered or distracting. Managing the complex state of user progress, reliably tracking daily streaks across different time zones, and ensuring the 3D badge animations ran smoothly without tanking browser performance took a lot of trial and error. Furthermore, wiring up Gemini to reliably process student notes and PDF content required fine-tuning our prompts to get consistently helpful and structured outputs.

Accomplishments that we're proud of We are incredibly proud of the overall UI and user experience. The Progress heatmap and the interactive 3D badge system feel incredibly tactile and rewarding to interact with. We're also thrilled that we successfully married a fully functioning shop and progression system with powerful AI-driven study aids. It creates a unique feedback loop where users actually look forward to logging their study hours.

What we learned Building Scaffold reinforced the importance of micro-interactions. We learned that small visual feedback—like a satisfying button click, a glowing badge, or a smooth page transition—has a massive impact on user motivation. Technically, we deepened our knowledge of managing a monorepo architecture with Turbo, and learned a great deal about integrating complex services like Gemini AI and Supabase into a unified Next.js environment.

What's next for Scaffold Moving forward, we want to introduce multiplayer elements—think leaderboards, study groups, and cooperative quests where friends can pool their study hours to unlock group rewards. We also plan to expand the AI's capabilities to automatically generate flashcards and quizzes directly from your notebook, and naturally, we want to add an even wider variety of customizable cosmetics to the Shop!