Our Mascot Tutor
Problem Library
Coding Window

Inspiration

The project was inspired by the idea of making data structures and algorithms learning more engaging through gamification and personalized mentoring. Rather than traditional, dry educational platforms, our team created an interactive coding experience where Spider-Man serves as a smart, encouraging mentor who guides students through Socratic questioning rather than providing direct solutions. The inspiration came from recognizing that learning DSA can be intimidating, and adding a beloved superhero character creates a more approachable and memorable learning environment.

What we learned

Full-Stack Development:

We mastered integrating a React + Vite + TypeScript frontend with a FastAPI Python backend, implementing real-time communication through REST APIs and handling CORS configuration for seamless cross-origin requests. We seamlessly incorporated the ElevenLabs Text-to-Speech API to transform Spider-Man’s coaching feedback into engaging audio responses. This integration allowed our application to deliver real-time spoken advice, enhance user immersion, and create a dynamic learning environment where coding tips and encouragement are delivered with authentic superhero energy. Additionally we used MongoDB as our database to efficiently store user information, coding progress, and problem data.

AI Integration:

Successfully integrated Google Gemini API for generating Spider-Man's coaching responses and ElevenLabs API for text-to-speech functionality, creating a comprehensive AI-powered mentoring experience with fallback mechanisms for API failures. With ElevenLabs, we went beyond basic text-to-speech by enabling Spider-Man to deliver personalized, high-quality voice feedback in real time, making the interaction truly immersive and dynamic. We engineered an intelligent message queuing system and audio caching, so that every tip and encouragement is delivered in a natural way without delays or robotic interruptions.

Real-time Code Execution:

Built a secure code execution system that takes user-written JavaScript code, runs it safely in isolated temporary files, and automatically tests it against multiple test cases to verify if the solution works correctly. The system provides instant feedback showing which tests passed or failed, along with performance metrics like how long the code took to execute, making it easy for students to understand both the correctness and efficiency of their solutions.

Advanced UI/UX:

Developed clean and simple user interactions including a draggable Spider-Man mascot with speech bubbles, implemented Monaco Editor for professional code editing, created resizable panel layouts, and designed a Spider-Man themed interface with custom CSS animations and holographic effects.

How we built this

Core Features

The mascot is a draggable Spider-Man called Capy Parker that shows a speech bubble every 20 seconds with coding tips, if necessary. Code analysis detects data structures (arrays, hashmaps, trees) and estimates time complexity using regex pattern matching and algorithmic detection. The coaching system uses a custom Spider-Man prompt with Google Gemini to ask Socratic questions without giving solutions, with intelligent fallback responses based on detected code patterns.

Development Process

We built the frontend using React with Vite and TypeScript, implementing Auth0 authentication for user management and session persistence. The backend utilizes FastAPI with Python, integrating multiple APIs (Gemini for coaching, ElevenLabs for TTS) and implementing secure code execution in sandboxed environments. We created a comprehensive problem database with around 10 fully implemented DSA problems including Two Sum, Valid Parentheses, and Climbing Stairs, each with custom test cases and templates.

Challenges we faced

Technical hurdles

We encountered significant challenges with API integration and error handling, which required implementation of fallback mechanisms when Gemini API calls failed. Code execution security was another major challenge, which made us develop safe subprocess execution with timeout controls and proper file cleanup. We solved the challenge of managing real-time audio playback by building a smart queue system that prevents Spider-Man's voice messages from talking over each other.

UX

We created an intuitive draggable interface that remained functional across different screen sizes while maintaining Spider-Man's character consistency proved challenging. Voice integration timing required careful orchestration to prevent overlapping audio and ensure smooth user experience. Balancing educational effectiveness with entertainment value was complex, requiring fine-tuning of Spider-Man's responses to be helpful but not give away solutions.

Technology Stack Assessment: The project demonstrates high technical difficulty with its full-stack architecture (TypeScript, Python, CSS, JavaScript, React, Express, Flask) , real-time code execution, AI integration, and sophisticated UI components.

Completion Status: The application works as intended with around 10 functional DSA problems, comprehensive test suites, AI-powered coaching, TTS integration, and a polished user interface.

Originality: We believe that this is a highly creative approach combining superhero theming with educational technology, featuring unique elements like draggable mascots, AI-powered Socratic questioning, and gamified learning experiences to make coding fun for the user.