Project overview

LectureLens is a Chrome extension that automatically extracts transcripts from YouTube videos, uses AI to generate clean, structured study notes, and saves them directly to your Notion workspace—making learning from video content as efficient as reading a textbook.

---

Problem Statement

The Challenge

Students, professionals, and lifelong learners consume hours of educational content on YouTube daily, but face several pain points:

1. Time-Consuming Note-Taking: Manually transcribing or summarizing video content is tedious and interrupts the learning flow
2. Inconsistent Quality: Hand-written notes vary in structure and completeness
3. No Centralized Repository: Notes scattered across notebooks, apps, and devices
4. Accessibility Barriers: Videos without captions are inaccessible for note-taking
5. Information Overload: Long-form content makes it difficult to extract key concepts

The Impact

• Lost Productivity: Users spend 2-3x the video duration creating notes manually
• Knowledge Fragmentation: Important insights get lost in the noise
• Learning Inefficiency: Without structured notes, retention and review become challenging

---

Why This Solution Matters

For Students

• Save 70% of note-taking time by automating transcription and summarization
• Improve retention with AI-generated structured notes highlighting key concepts
• Build a searchable knowledge base in Notion for exam preparation

For Professionals

• Quickly document tutorials and training videos for team reference
• Create documentation from conference talks and webinars
• Maintain learning logs for continuous professional development

For Content Creators

• Generate show notes automatically from your own videos
• Create blog post drafts from video transcripts
• Improve SEO with structured content derived from videos

Technical Innovation

• Dual transcription pipeline: Primary YouTube API with Whisper fallback ensures 100% coverage
• Intelligent note generation: Uses Llama 3.3 70B to create contextually-aware summaries
• Seamless integration: One-click workflow from video to Notion page

---

Core Features

Smart Video Processing

• Auto-detect current page: Automatically captures YouTube URL from active tab
• Manual URL input: Support for pasting any YouTube video URL
• Video metadata extraction: Automatically fetches video title and information

Intelligent Note Generation

• Dual transcription system:
  • Primary: YouTube Transcript API (fast, accurate, free)
  • Fallback: OpenAI Whisper (handles videos without captions)
• AI-powered summarization: Uses Groq's Llama 3.3 70B model to generate structured notes
• Smart formatting: Converts markdown to Notion blocks with proper headings, lists, and formatting

Notion Integration

• Automatic page creation: Notes saved as new pages in your Notion workspace
• Rich formatting: Preserves markdown structure (headings, bullet points, bold text)
• Video link embedding: Each note page includes a clickable link back to the source video
• Organized structure: All notes saved under a parent page for easy navigation

Modern UI/UX

• Beautiful, intuitive interface: Clean design with custom color palette
• Real-time feedback: Loading states and progress indicators
• Error handling: Graceful fallbacks and user-friendly error messages

---

Tech Stack

Frontend

• React 19 - Modern UI library with latest features
• TypeScript - Type-safe development
• Vite 7 - Lightning-fast build tool and dev server
• Tailwind CSS v4 - Utility-first styling with latest architecture
• Chrome Extension API - Browser extension functionality

Backend

• Flask - Lightweight Python web framework
• Python 3.13 - Modern Python runtime

AI & ML

• Groq API - High-performance inference with Llama 3.3 70B Versatile model
• OpenAI Whisper - State-of-the-art speech recognition (fallback transcription)
• YouTube Transcript API - Primary transcript extraction method

Integrations

• Notion API - Programmatic page creation and content management
• YouTube Data API (via yt-dlp) - Video metadata and audio extraction
• FFmpeg - Audio processing and format conversion

Development Tools

• ESLint - Code quality and consistency
• TypeScript ESLint - Type-aware linting
• Chrome Extension Manifest V3 - Modern extension architecture

---

System Architecture

Component Flow

┌─────────────────────────────────────────────────────────────┐
│                    Chrome Extension                          │
│  ┌──────────────┐         ┌──────────────┐                 │
│  │   Popup UI   │────────▶│  Background  │                 │
│  │  (React)     │         │ Service      │                 │
│  └──────────────┘         └──────┬───────┘                 │
└───────────────────────────────────┼─────────────────────────┘
                                    │ HTTP POST
                                    ▼
┌─────────────────────────────────────────────────────────────┐
│              Flask Backend (localhost:5000)                 │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  1. Extract Video ID & Title                         │  │
│  │  2. Attempt YouTube Transcript API                   │  │
│  │     ├─ Success → Use transcript                      │  │
│  │     └─ Failure → Download audio → Whisper           │  │
│  │  3. Generate notes via Groq (Llama 3.3 70B)         │  │
│  │  4. Convert markdown to Notion blocks                │  │
│  │  5. Create Notion page with notes                   │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    ▼               ▼               ▼
            ┌──────────┐    ┌──────────┐    ┌──────────┐
            │ YouTube  │    │  Groq    │    │  Notion  │
            │   API    │    │   API    │    │   API    │
            └──────────┘    └──────────┘    └──────────┘

Processing Pipeline

1. User Input: User enters YouTube URL or clicks "Auto-Detect"
2. Extension Layer: Chrome extension popup sends message to background service worker
3. Background Service: Forwards request to Flask backend via HTTP POST
4. Backend Processing:
   • Extracts video ID and fetches video title
   • Attempts to retrieve YouTube transcript
   • If transcript available: Uses it directly
   • If transcript unavailable: Downloads audio → Transcribes with Whisper
5. AI Processing: Sends transcript to Groq API (Llama 3.3 70B) for note generation
6. Notion Integration: Converts markdown notes to Notion block format and creates page
7. Response: Returns success status and generated notes to extension

Key Design Decisions

• Dual Transcription: Ensures 100% coverage even for videos without captions
• Local Backend: Flask server runs locally for privacy and speed
• Chunking Strategy: Handles Notion's 2000-character block limit automatically
• Async Processing: Background service worker handles long-running operations

---

How to Run

Prerequisites

• Node.js 18+ and npm
• Python 3.13+
• Chrome Browser (for extension)
• FFmpeg (for audio processing)
• Notion Workspace with API access
• API Keys:
  • Groq API key
  • Notion API key
  • Notion Parent Page ID

Backend Setup

1. Navigate to backend directory:

   cd backend

2. Create virtual environment (recommended):

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

   pip install flask python-dotenv youtube-transcript-api yt-dlp groq openai-whisper notion-client

4. Install FFmpeg:

   • macOS: brew install ffmpeg
   • Linux: sudo apt-get install ffmpeg
   • Windows: Download from ffmpeg.org

5. Create .env file in backend/ directory:

   NOTION_API_KEY=your_notion_api_key_here
   PARENT_PAGE_ID=your_notion_parent_page_id_here
   GROQ_API_KEY=your_groq_api_key_here

6. Get Notion API Key:

   • Go to notion.so/my-integrations
   • Create new integration
   • Copy the "Internal Integration Token"
   • Share your parent page with the integration

7. Get Groq API Key:

   • Sign up at console.groq.com
   • Navigate to API Keys section
   • Create and copy your API key

8. Start Flask server:

   python server.py

   Server will run on http://127.0.0.1:5000

Frontend Setup

1. Navigate to project root:

   cd YT-notes

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load extension in Chrome:

   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" (toggle in top-right)
   • Click "Load unpacked"
   • Select the dist/ folder from the project

Running in Development

1. Start backend (in one terminal):

   cd backend
   python server.py

2. Start frontend dev server (in another terminal):

   cd YT-notes
   npm run dev

3. For extension development:

   • Make changes to source files
   • Run npm run build to rebuild
   • Reload extension in chrome://extensions/

---