Zippy

Inspiration

Homework assignments form the backbone of effective learning, yet they consistently fall victim to procrastination, disengagement, and motivational challenges. While researching education, we realized that gamification and reward systems in educational settings did not apply to traditional take-home assignments. This stark contrast between proven motivational techniques and outdated homework practices led us to creating Zippy. Zippy is a platform that transforms the monotonous homework experience into an exciting, competitive adventure where learning becomes intertwined with achievement, friendly rivalry, and fun rewards. The game component was inspired by our observation of how personalized and gacha games create powerful engagement loops that keep players returning for more. We realized this same mechanism could transform homework motivation, as students become eager to complete assignments not just for grades, but for the chance to expand their virtual pet collection and customization options. Zippy creates a modern, gamified homework experience that speaks to students.

What it does

Zippy creates a seamless homework connection between teachers and students. Teachers assign work to their classes, with each class and assignment featuring its own dynamic leaderboard. Students access an intuitive interface where they can access hints when facing challenges. The platform leverages Gemini API to provide instant, detailed feedback on completed questions, eliminating the traditional waiting period for grades. Points (gems) are awarded based on completion speed relative to the assignment's release time, with real-time leaderboard updates reflecting student progress. The student dashboard showcases their virtual pet, which serves as both companion and motivation. Gems can purchase decorative items in the shop or practical academic power-ups like assignment extensions. The platform's gacha system, where students can "pull" for new and rare pets using earned gems, creates a compelling reward loop that transforms homework completion from obligation to opportunity, driving consistent engagement through the excitement of collection and customization.

How we built it

The user experience and user interface was designed in Figma with custom illustrations created in Procreate. LucideIcons provided a consistent visual language throughout the application. For development, we built on Next.js and React with TypeScript. The frontend was styled using Tailwind CSS and enhanced with Framer Motion for smooth, intuitive animations. On the backend, we used Express.js and Mongoose. The homework assessment system utilizes Gemini API to provide intelligent grading and personalized feedback. OpenAI was used for implementation for frontend and backend development.

Challenges we ran into

During development, we navigated several technical roadblocks that tested our problem-solving abilities. Implementing the Gemini API was more complex than anticipated, as we struggled to properly configure environment variables to protect API keys while maintaining functionality which is something we will address post-hackathon. Our initial frontend framework choice created unforeseen complications when we discovered Tailwind's compatibility issues outside of Next.js. The deprecated version only functioned in static mode, forcing a mid-development pivot to Next.js to maintain our dynamic design requirements. The hand-illustrated assets created in Procreate caused formatting challenges because of inconsistent dimensions and extra canvas space requiring additional optimization work. Timeline management became critical when our Figma design phase extended beyond our projected Saturday completion target, compressing our development window and requiring rapid prioritization of core features to deliver a functional prototype within the hackathon constraints.

Accomplishments that we're proud of

We are proud of developing a fully functional application that brings our vision to life. The Gemini API integration exceeded our expectations, providing consistent feedback across diverse student inputs from English questions to Physics problems. The gamification elements truly shine, especially the polished gacha animation that captures the excitement of unlocking new pets, achieving that satisfying reward moment we envisioned. Our hand-illustrated pets and customization items bring personality and charm to the platform, creating exciting and fun connections for students. Watching our frontend implementation match our ambitious Figma designs with high fidelity makes us proud as it validates our user experience vision of creating an interface that feels both intuitive and engaging. These accomplishments demonstrate not just technical execution but our success in balancing educational functionality with the playful elements that drive student motivation.

What we learned

Through the Zippy development journey, our team gained valuable technical and collaborative skills that have strengthened our capabilities as developers. We mastered the challenging process of translating abstract Figma designs into functional code, bridging the gap between visual concept and working product. Each team member significantly expanded their React proficiency, particularly in frontend implementation techniques that create responsive, intuitive user experiences. API integration represented a major milestone as we collectively navigated this new territory, learning to properly authenticate, query, and process data from external services like Gemini. We developed expertise in creating efficient boilerplate structures that accelerated development while maintaining consistent code patterns throughout the application. The project's dependency challenges taught us valuable troubleshooting skills as we resolved package conflicts and version incompatibilities. Our backend architecture implementation enhanced our understanding of separation of concerns through dedicated routing and the model-view-API pattern. We also had growth in our collaboration skills as we worked under intense time constraints. We were pushed to refine our communication, task delegation, and priority management skills to deliver a functional product. We developed crucial product presentation skills, learning how to demonstrate our solution's value proposition and technical implementation within a compelling pitch.

What's next for Zippy

Our future for Zippy focuses on expanding both functionality and educational impact. We plan to implement a robust database system to power our leaderboards, creating persistent competition that spans assignments and semesters. User authentication will be a priority, ensuring each student maintains their unique point totals and pet collections across devices. We'll develop a standardized point allocation system with balanced incentives for both speed and accuracy. The pet customization system will be expanded with a broader array of items and accessories, creating more meaningful personalization options that serve as visible representations of academic achievement. The teacher side of Zippy will be developed with Gemini API integration for automated homework generation and comprehensive classroom management tools, reducing preparation time while maintaining quality. Finally, we'll leverage AI to create an intelligent hint system that provides contextual guidance without revealing solutions, helping students develop problem-solving skills while maintaining the challenge that makes learning meaningful.

Built With

• express.js
• figma
• framermotion
• gemini
• next.js
• node.js
• openai
• procreate
• react
• tailwind
• typescript