Skip to content
All projects

2025 · Case study

VideoMind — AI YouTube Study Guide & Note Vault

Transforming passive YouTube watching into active, high-retention learning.

A self-hosted, AI-powered study system that transforms YouTube videos and playlists into highly structured study notes. Integrates Firebase Google Auth, Firestore DB, Firebase Cloud Functions, and TanStack Router/Query with a Gemini 3.5 Flash prompt orchestration pipeline to generate executive summaries, handwritten-style notes, flashcards, timelines, and Q&A grounded in transcript text.

  • React 19
  • TypeScript
  • TanStack Router
  • TanStack Query
  • Firebase Functions
  • Firestore DB
  • Google Gemini API
  • Tailwind CSS
  • Zod
  • Bun
Live demo Source code

01

The problem

Passive learning from YouTube video tutorials is highly inefficient. Scrubbing for key details is tedious, manual note-taking is slow, and there is no direct way to test comprehension or query video content.

Generic summarizers lack structural breakdowns, glossaries of key definitions, chronological timelines, or interactive Q&A grounded in transcript facts.

The design goal was a learning assistant that acts as a searchable 'second brain', parsing and structuring video content into high-density pedagogical study notes.

02

Architecture

The client is a static Single Page Application built on React 19 and TanStack Router/Query, syncing directly with a private Cloud Firestore library.

On submission, a Firebase Cloud Function v2 orchestrates oEmbed scraping and transcript retrieval. The raw content is fed into a Gemini 3.5 Flash pipeline.

The output conforms to a strict Zod JSON schema. A custom bracket-balancing stack (repairJson) repairs truncated JSON tokens on the fly before a server-side dual-write is executed to prevent client loss.

Serverless prompt orchestration & DB sync flow
Client Layer
  • TanStack SPA Client
Auth & DB
  • Firebase Auth
  • Firestore (video-db)
Compute
  • Firebase Cloud Functions v2 (api)
Services
  • YouTube Scraper (transcript)
  • Google Gemini REST API

Client-side queries reactively sync with Firestore while serverless functions perform dual-writes for generated study notes.

03

Tech stack & why

  • Frontend

    React 19 + TanStack Router

    Type-safe client-side routing with high-performance React 19 component rendering.

  • State & DB Sync

    TanStack Query + Firestore SDK

    Real-time client synchronization with offline caching and reactive query updates.

  • Compute Layer

    Firebase Cloud Functions v2

    Serverless Node.js handlers that automatically scale down to zero when idle.

  • LLM Processing

    Google Gemini 3.5 Flash REST API

    Extremely cost-efficient, fast generation supporting strict JSON schema outputs.

  • Build & Runtime

    Bun + Vite

    Blazing fast bundling, package resolution, and reproducible script setups.

04

Challenges & solutions

  • 1

    Handling Truncated JSON Output

    Long transcript summaries generated by LLMs often hit output token bounds, returning truncated JSON. I built a custom balancing-stack parser (repairJson) to repair incomplete brackets and save partial generations safely.

  • 2

    Direct-to-Client Security

    Syncing Firestore collections directly from the client requires careful isolation. I implemented strict Firestore Security Rules that validate user UID mappings to prevent cross-user data leakage.

05

What I'd build next

  • Add vector-based semantic search using Firestore vector features to query across all saved video notes in the library.
  • Implement an audio generation pipeline to export study notes as narrated audio files.

Next case study

Inbox Agent

Read it