NetTube: Premium YouTube Viewer

Overview

NetTube is a premium, cinematic YouTube player designed to mimic the architectural flow and styling of modern streaming giants like Netflix. It offers a highly polished UI/UX for browsing and watching YouTube videos, specifically designed to help users consume content from their "Watch Later" playlists or favorites in a more engaging, distraction-free environment.

The application uses a distinctive 80/20 split screen layout for optimal productivity, providing a high-fidelity video viewing experience paired with an adjacent utility sidebar for note-taking, transcriptions, chapters, and upcoming AI summaries.

Features

• Cinematic UI/UX: A robust dark theme with responsive hover-scale effects, matching Netflix's premium aesthetic.
• Dynamic Hero Banner: Features an immersive, autoplaying, muted video preview that draws users into the application.
• Horizontally Scrolling Rows: Smooth CSS and JS-driven horizontal scrolling rows for content categories.
• Productivity Workspace (80/20 Layout): The watch screen dedicates 80% to the high-density video player and 20% to a persistent utility sidebar.
• Utility Sidebar: Integrated workspace supporting features like Notes, AI Summaries, Video Chapters, and Live Transcripts.
• Premium Typography: Utilizes the visually pleasing sans-serif fonts Outfit (for headings) and Inter (for content text).

Tech Stack

• Frontend Framework: React 18+
• Build Tool: Vite
• Routing: React Router v6 (react-router-dom)
• Icons: lucide-react
• Styling: CSS3 Variables (Custom Properties), Flexbox, CSS Grid

Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd youtube-watch-later/youtube-watch-later

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser to http://localhost:5174 (or the port specified by Vite).

Running the Application

The app comes pre-populated with realistic mock YouTube data (mockVideos.json) for testing and demonstration purposes without requiring a live YouTube API key. Clicking on any video will take you to the /watch/:id route showing the full productivity player.

Future Roadmap (Phase 4+)

• Implement real Google OAuth / YouTube API Data v3 integration.
• Connect the Utility Sidebar tabs to LLM-powered summarization tools (AI Q&A and Chapters).
• Add user personalization, watch history, and playlist management.

License

MIT License