Inspiration

Learning is hard. Repetition is boring. We've all experienced "review hell"—endless flashcard grinding without real progress. Traditional spaced repetition systems (like Anki) are scientifically proven but emotionally draining. Meanwhile, gamified learning apps (like Blooket) are fun but unsustainable and often predatory.

Kardo was born from a simple question: What if we could combine the science of spaced repetition with the engagement of gamification, powered by AI?

What We Built

Kardo is an AI-native learning platform that transforms knowledge acquisition into a sustainable, rewarding experience. Here's how it works:

  1. AI-Generated Personalized Decks: Users input a subject, desired card count, and difficulty level. Gemini 3 instantly generates structured knowledge cards (Q&A pairs) with contextual depth and educational quality.

  2. Intelligent Difficulty Backoff: Our core innovation. When users answer incorrectly, the system doesn't just repeat—it intelligently downgrades to an easier learning method and reinserts the card at a random position in the queue. This combines spaced repetition principles with behavioral psychology to prevent burnout.

  3. Gamified Asset System: Each card receives a rarity tier (white/green/blue/purple/orange/red) and difficulty score. Users earn streak points for correct answers. Learning becomes collecting, not grinding.

  4. Immersive Carousel Interface: Three seamless screens (Create → Manage → Learn) with smooth animations and haptic feedback, creating a game-like experience.

Key Features

  • AI Card Generation - Gemini 3 generates structured, contextual flashcards in seconds
  • 📊 Smart Scheduling - Difficulty backoff + random reinsertion prevents review hell
  • 🎮 Rarity System - Six-tier rarity creates collection motivation and long-term engagement
  • 🎯 Adaptive Learning - Multiple learning methods that adjust based on performance
  • 📱 Carousel UI - Smooth three-screen experience with animations
  • 🔥 Streak System - Earn points for correct answers, track progress visually

How We Built It

Tech Stack:

  • Frontend: React 19 + TypeScript for type-safe, modern UI
  • Styling: Tailwind CSS 4 for responsive, accessible design
  • State Management: Zustand for lightweight, predictable state
  • Local Storage: Dexie (IndexedDB) for offline-first card persistence
  • AI Integration: Google Gemini 3 API for card generation and difficulty assessment
  • Animations: Framer Motion for smooth, performant transitions
  • Build Tool: Vite 7 for fast development and optimized production builds

Architecture Highlights:

  • Modular component structure with clear separation of concerns
  • Custom hooks for learning logic and state management
  • Service layer for Gemini API integration
  • Algorithm layer for spaced repetition scheduling
  • Responsive design supporting mobile-first experience

Challenges We Faced

  1. Balancing Science & Fun: The hardest part was designing a system that's both scientifically sound (spaced repetition) and emotionally engaging (gamification). We solved this by making the difficulty backoff strategy transparent and rewarding.

  2. AI Quality Control: Ensuring Gemini 3 generates high-quality, contextually relevant cards required careful prompt engineering and validation. We implemented multi-step validation to ensure educational integrity.

  3. Performance Optimization: Managing large card decks in IndexedDB while maintaining smooth animations required careful optimization of data structures and rendering strategies.

  4. UX Complexity: Translating complex learning algorithms into intuitive UI was challenging. The carousel interface and visual feedback system took multiple iterations to get right.

What We Learned

  • AI as a Tool, Not a Gimmick: Gemini 3's real power isn't in chat interfaces—it's in structured, domain-specific tasks like card generation and difficulty assessment.
  • Psychology Matters: Small UX details (animations, rarity tiers, streak counters) have outsized impact on user motivation and retention.
  • Constraints Drive Innovation: The hackathon's 3-minute demo requirement forced us to focus on core value, eliminating unnecessary features.

Built With

Share this project:

Updates