Inspiration

The project was born from a common challenge in online education: making video content more interactive and effective for learning. Traditional video platforms lack the tools to help students actively engage with the material and test their understanding in real-time. We saw an opportunity to use AI to transform passive video watching into an active learning experience.

What it does

Quokka enhances educational videos with:

  • AI-generated quizzes with automatic timestamps
  • Interactive chat discussions about video content
  • Real-time transcription powered by fal.ai's Whisper
  • Smart video management and organization

How we built it

The platform is built using modern web technologies:

  • Clean, responsive UI built with Lovable's component system
  • fal.ai integration for:
    • Video transcription
    • Quiz generation
    • Chat interactions
  • Real-time video processing with timestamp synchronization

Challenges we ran into

  • Implementing accurate video timestamp synchronization with quizzes
  • Creating an intuitive UI that handles multiple AI features without overwhelming users
  • Ensuring high-quality AI-generated content that truly aids learning
  • Building a responsive design that works seamlessly across devices

Accomplishments that we're proud of

  • Successfully integrated fal.ai's AI capabilities for real-time video processing
  • Created a seamless and intuitive learning experience
  • Built a polished UI using Lovable that handles complex features elegantly
  • Developed an effective quiz generation system that enhances learning

What we learned

  • Integration of fal.ai's AI services with video content
  • Building polished interfaces with Lovable
  • Managing complex state for interactive features
  • Video processing and playback optimization

What's next for Quokka

  • Advanced analytics to track learning progress
  • Collaborative learning features for group study
  • Custom quiz creation tools for educators
  • Mobile app development for learning on-the-go
  • Integration with more educational content providers

Tech Stack

Frontend

  • React 18 + TypeScript + Vite
  • Tailwind CSS + shadcn/ui for UI components
  • React Query for data fetching & state management
  • React Player for video playback

Backend & Infrastructure

  • Supabase for:
    • Authentication
    • PostgreSQL Database
    • Edge Functions
    • File Storage

AI Integration

  • fal.ai for:
    • Video transcription
    • Quiz generation
    • Chat interactions

Built With

  • fal
  • loveable
  • supabase
Share this project:

Updates