MindSpark

• 

  Chat/Learn with companion page

• 

  Create New companion form

• 

  Library page

• 

  Modules page (pre session page)

• 

  Lading page (Popular Companions section)

• 

  Home page

Inspiration

Traditional learning platforms are one-size-fits-all. Students struggle with static content, lack of personalization, and no real-time feedback. We envisioned a future where AI doesn't just answer questions, it becomes your personal tutor, adapting to your pace, speaking with you naturally, and tracking your growth across every session.

What it does

Voice-Interactive Learning: Speak to your AI tutor using speech recognition, receive responses via natural text-to-speech

AI-Generated Curricula: Automatically creates 8-module courses with quizzes tailored to any topic

Smart Progress Tracking: Cumulative stats across sessions unlock new modules (10+ messages & 1+ minute)

Adaptive Teaching: AI adjusts explanations based on conversation, checking understanding before progressing

Gamified Learning: Complete modules, pass quizzes, and unlock advanced content

Session Management: Real-time tracking of study time and message count per module

How we built it

Frontend: -React + React Router for SPA architecture -Framer Motion for smooth animations -Custom CSS with dark mode and responsive design -Web Speech API for voice recognition and synthesis

Backend & AI:

-Firebase (Firestore for data, Authentication for users) -Google Gemini AI for intelligent tutoring and curriculum generation -Dynamic model discovery to support latest AI versions

Key Features Implemented:

-Companion Creation: Custom AI tutors with subject, voice, and style preferences -Voice Input/Output: Real-time speech-to-text transcription and TTS playback with pause/resume -Module System: Progressive learning with 8 AI-generated modules per companion -Progress Persistence: Cumulative tracking across multiple sessions -Auto-Unlock System: Next module unlocks when requirements are met (with celebration modal) -Quiz Integration: AI-generated multiple-choice questions per module

Challenges we ran into

-Web Speech API Limitations: Browser compatibility issues led to multiple fallback implementations

-Cumulative Progress Logic: Designing a system where session stats reset but cumulative totals persist required careful Firestore schema design

-AI Response Consistency: Ensuring Gemini returns properly formatted JSON for curriculum generation

-State Management: Synchronizing voice playback, transcription, and UI updates across async operations

-Mobile Responsiveness: Making voice controls and chat UI work seamlessly on small screens

Accomplishments that we're proud of

-Fully functional voice-interactive AI tutoring with pause/resume/stop controls -AI curriculum generator creates complete 8-module courses in seconds -Smart unlock system with real-time detection and celebration modals -Persistent progress tracking across multiple sessions -Responsive design works flawlessly on desktop and mobile -Clean, modern UI with custom CSS logo and animations

What we learned

-AI Integration: How to work with Gemini's streaming API and handle rate limits

-Voice UX: Designing intuitive controls for speech recognition and synthesis

-Real-time State: Managing complex async state (timers, speech, Firestore updates)

-Progressive Enhancement: Building features that work without voice when needed

-Firebase Architecture: Efficient Firestore queries and data modeling for scalability

What's next for MindSpark

-Collaborative learning (study groups with shared AI companion) -Mobile app (React Native) -Advanced analytics dashboard -Integration with popular LMS platforms -Marketplace for community-created companions

Built With

• css3
• firebase
• geminiapi
• html5
• javascsript(es6+)
• react