Bratz Study

AI-powered study RPG with Y2K vibes. Upload PDFs or topics to generate materials, choose from 8 techniques, level up, and make learning "funner"!

Comment

Inspiration

We were inspired by the gamification trend in education and nostalgia for early 2000s aesthetics. We wanted to make studying feel less like a chore and more like an adventure, combining the effectiveness of proven study techniques with the addictive progression systems found in RPGs.

What it does

Flashcard Quest transforms any topic into an engaging study experience:

  1. AI-Powered Generation: Upload PDFs or enter topics to instantly generate flashcards using Google Gemini AI
  2. 8 Study Techniques: Choose from Flashcards, Multiple Choice, Pomodoro, Feynman Technique, Spaced Repetition, Active Recall, Study Buddy Mode, and Mind Mapping
  3. Character System: Select your study persona (Yasmin, Jade, Sasha, or Cloe), each with unique specialties that earn bonus XP
  4. XP & Leveling: Earn experience points, level up, and unlock advanced study techniques
  5. RAG System: Uses ChromaDB and LangChain to process PDFs and generate contextually relevant materials
  6. Y2K Aesthetic: Nostalgic Bratz-inspired interface with vibrant gradients and retro styling

How we built it

Frontend:

  • React.js with React Router for navigation
  • React Flow for interactive mind mapping visualization
  • Custom CSS with Y2K-inspired gradients and animations
  • LocalStorage for client-side state persistence

Backend:

  • Flask REST API
  • Google Gemini AI (gemini-1.5-flash) for flashcard generation
  • ChromaDB for vector storage and document retrieval
  • LangChain for document processing and RAG implementation
  • Google Gemini Embeddings for semantic search

Key Technical Features:

  • RAG (Retrieval Augmented Generation) pipeline for PDF processing
  • Character-based bonus multiplier system
  • Spaced repetition algorithm
  • Real-time XP calculation and level progression
  • Responsive design for mobile and desktop

Challenges we ran into

  • RAG Integration Complexity: Connecting the ChromaDB vector store with the flashcard generation API required careful chunking strategies and prompt engineering to ensure high-quality, contextually relevant flashcards.
  • Character Bonus System: Implementing the character specialty bonuses across 8 different study techniques while maintaining code modularity was challenging. We solved this with a centralized XP calculation service.
  • Mind Mapping Visualization: Creating an intuitive, interactive mind map required learning React Flow and implementing custom node layouts, connection logic, and XP rewards for exploration.
  • PDF Processing: Handling various PDF formats and extracting clean text while maintaining semantic meaning required experimenting with different chunking strategies and embedding models.
  • State Management: Synchronizing user progress, character data, and study sessions across components without a state management library required careful use of localStorage and React hooks.

Accomplishments that we're proud of

  • Successfully integrated a production-ready RAG system with real-time study material generation
  • Built 8 fully functional, unique study techniques with distinct gameplay mechanics
  • Created a cohesive Y2K aesthetic that makes studying genuinely fun
  • Implemented a robust character system that meaningfully impacts gameplay
  • Made the app fully responsive and mobile-friendly
  • Completed a complex full-stack application in the hackathon timeframe

What we learned

  • How to implement RAG pipelines using ChromaDB and LangChain
  • Advanced React patterns for building interactive educational tools
  • Prompt engineering techniques for generating high-quality educational content
  • The importance of gamification in maintaining user engagement
  • How to balance feature complexity with user experience

What's next for Bratz Study

  • User Authentication: Add user accounts with cloud-based progress syncing
  • Social Features: Leaderboards, friend challenges, and shared study sessions
  • More AI Models: Support for different LLMs and specialized educational models
  • Analytics Dashboard: Track study patterns, strengths, and areas for improvement
  • Mobile App: Native iOS and Android applications
  • Multiplayer Mode: Real-time competitive study sessions, study buddy, and teach via Feynman feature
  • Custom Decks: Community-created flashcard sets and study guides
  • Voice Integration: Audio flashcards, Feynman technique, and speech recognition for answers

Built With

Share this project:

Updates