YouTube Repository

A sleek and elegant web application for organizing and managing your YouTube videos. Built with Next.js, TypeScript, and Tailwind CSS.

Features

• Video Management

  • Add videos via YouTube URL with automatic metadata fetching
  • Organize videos into three categories: "To Watch", "Watch Again", and "Watched"
  • Drag and drop videos between categories
  • Mark videos as important/anchor videos
  • Custom categories for better organization

• Time Management

  • Input your available time
  • Get smart video recommendations based on available time
  • View combinations of videos that fit your time slot
  • Sort recommendations by number of videos and total duration

• User Interface

  • Modern, sleek design with YouTube-inspired aesthetics
  • Smooth animations and transitions
  • Responsive layout
  • Video cards with thumbnails and details
  • Expandable video previews
  • Drag and drop functionality

Getting Started

Prerequisites

• Node.js 18.x or later
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/youtube-repository.git
   cd youtube-repository

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env.local file in the root directory and add your YouTube Data API key:

   NEXT_PUBLIC_YOUTUBE_API_KEY=your_api_key_here
   

4. Start the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser.

Usage

1. Adding Videos

   • Paste a YouTube URL in the "Add New Video" section
   • The video will be automatically added to your "To Watch" list with its metadata

2. Organizing Videos

   • Drag and drop videos between categories
   • Click on a video card to view details and preview
   • Mark important videos for quick access

3. Time Management

   • Enter your available time in minutes
   • Click "Find Videos" to get recommendations
   • Choose from single video or multiple video combinations

Technical Stack

• Frontend Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Drag and Drop: Custom implementation with Framer Motion
• API Integration: YouTube Data API

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• YouTube Data API for video metadata
• Next.js team for the amazing framework
• Tailwind CSS for the utility-first CSS framework
• Framer Motion for the animation capabilities