SAVED - Advanced YouTube Video Search and Collection Manager

Project Overview

SAVED is a web application designed to help users manage, organize, and search their YouTube collections. The platform allows users to create custom collections, clone YouTube playlists, and efficiently manage their video content across different categories. With its advanced search functionality, users can find specific moments within videos based on keywords.

Key Features

• Advanced keyword search across video transcripts
• Custom collection creation and management
• YouTube playlist cloning
• Video transcript fetching and storage
• User authentication with Google
• Responsive design for various devices

🛠 Tech Stack

• Frontend: TypeScript, React 18, Next.js 14
• Backend: Next.js API Routes, Python (FastAPI)
• Database: Supabase
• Authentication: NextAuth.js with Google provider
• Styling: Tailwind CSS, shadcn/ui
• State Management: React Hooks and Context API

📚 Libraries and Tools

• User authentication: next-auth
• Database interactions: @supabase/supabase-js
• UI components: @radix-ui/react-*, shadcn/ui
• Form handling: react-hook-form
• Data fetching: SWR
• YouTube API: googleapis
• Drag and drop: @hello-pangea/dnd

Advanced Search Feature

SAVED's core functionality is its advanced search capability. Users can enter keywords to search across their entire video collection, including:

• Video titles
• Video descriptions
• Transcripts (if available)

The search results display:

• Relevant video thumbnails
• Timestamps where the keyword was found in the transcript
• A brief context snippet around the keyword

Users can click on a timestamp to jump directly to that moment in the video, making it easy to find specific content within long videos or across multiple videos in their collection.

Pages

Welcome Screen

The landing page introduces users to the SAVED platform. It displays a welcome message and provides options to sign in with Google or access collections for authenticated users.

Saved Collections

This page displays the user's custom collections. Users can:

• View all their created collections
• Create new collections
• Edit existing collections
• Delete collections
• Reorder collections
• Access the advanced search functionality

YouTube Collections

This page provides a tabbed interface for managing various YouTube content:

1. Playlists Tab

   • Displays the user's YouTube playlists
   • Allows cloning of playlists to saved collections
   • Provides playlist information and video counts

2. Liked Videos Tab

   • Shows videos the user has liked on YouTube
   • Allows adding liked videos to saved collections

3. Watch Later Tab

   • Displays videos added to the user's Watch Later list
   • Enables adding these videos to saved collections

Playlist View

When a user selects a specific playlist, this page shows:

• List of videos in the playlist
• Options to add individual videos to saved collections
• Basic video information (title, thumbnail, etc.)

Advanced Search

The advanced search feature allows users to:

• Search across all their collections or select specific ones
• Find videos by title, description, or transcript content
• View search results with relevant timestamps
• Jump directly to specific moments in videos based on search results

Collection Details

This page shows the contents of a specific saved collection:

• List of videos in the collection
• Options to remove videos from the collection
• Ability to play videos directly from this page

Getting Started

Prerequisites

• Node.js (v14 or later)
• Python (v3.7 or later)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/your-username/saved.git
   cd saved
   

2. Install frontend dependencies

   npm install
   # or
   yarn install
   

3. Set up environment variables Create a .env.local file in the root directory and add the necessary environment variables (Supabase, Google OAuth, etc.)

4. Run the development server

   npm run dev
   # or
   yarn dev
   

5. Set up the Python backend

   cd python_backend
   python -m venv venv
   venv/Scripts/activate  # On Windows
   source venv/bin/activate  # On macOS/Linux
   pip install -r requirements.txt
   

6. Run the FastAPI server

   python transcript_server.py
   

Open http://localhost:3000 with your browser to see the result.

Project Structure

• app/: Next.js app directory
  • (protected)/: Routes that require authentication
  • (public)/: Public routes
  • api/: API routes
• components/: React components
• hooks/: Custom React hooks
• lib/: Utility functions and shared code
• types/: TypeScript type definitions
• python_backend/: Python FastAPI server for transcript handling

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.