Tube - Video Streaming Platform

A modern, full-featured video streaming platform built with Next.js 15, featuring video uploads, streaming, user management, and social features similar to YouTube.

🚀 Features

• Video Management: Upload, stream, and manage videos with Mux integration
• User Authentication: Secure authentication using Clerk
• Content Discovery: Browse videos by categories, trending, and subscriptions
• Social Features: Like/dislike videos, comment system, and user subscriptions
• Playlists: Create and manage video playlists
• Studio Dashboard: Content creator tools for video management
• Responsive Design: Modern UI built with Tailwind CSS and Radix UI components
• Real-time Updates: Built with tRPC for type-safe API calls
• Database: PostgreSQL with Drizzle ORM for robust data management

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS 4, Radix UI components
• Authentication: Clerk
• Database: PostgreSQL with Drizzle ORM
• Video Processing: Mux (upload, encoding, streaming)
• File Uploads: UploadThing
• State Management: TanStack Query with tRPC
• Rate Limiting: Upstash Redis
• Deployment: Vercel-ready

📋 Prerequisites

Before running this project, you'll need:

• Node.js 18+ or Bun
• PostgreSQL database
• Clerk account for authentication
• Mux account for video processing
• UploadThing account for file uploads
• Upstash Redis account for rate limiting

🔧 Environment Variables

Create a .env.local file in the root directory with the following variables:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/tube"

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Mux Video Processing
MUX_TOKEN_ID=your_mux_token_id
MUX_TOKEN_SECRET=your_mux_token_secret

# UploadThing File Uploads
UPLOADTHING_SECRET=your_uploadthing_secret
NEXT_PUBLIC_UPLOADTHING_APP_ID=your_uploadthing_app_id

# Upstash Redis
UPSTASH_REDIS_REST_URL=your_redis_url
UPSTASH_REDIS_REST_TOKEN=your_redis_token

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

🚀 Getting Started

1. Clone the repository

   git clone <repository-url>
   cd tube

2. Install dependencies

   bun install
   # or
   npm install

3. Set up the database

   # Run database migrations
   bun run drizzle-kit push
   
   # Seed initial data (categories)
   bun run tsx src/scripts/seed-categories.ts

4. Start the development server

   bun run dev
   # or
   npm run dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

src/
├── app/                    # Next.js app router
│   ├── (auth)/           # Authentication routes
│   ├── (home)/           # Main application routes
│   ├── (studio)/         # Content creator studio
│   └── api/              # API endpoints
├── components/            # Reusable UI components
├── modules/               # Feature-based modules
│   ├── auth/             # Authentication logic
│   ├── videos/           # Video management
│   ├── users/            # User management
│   ├── comments/         # Comment system
│   ├── playlists/        # Playlist functionality
│   └── studio/           # Creator studio
├── database/              # Database schema and configuration
├── lib/                   # Utility libraries
└── trpc/                 # tRPC configuration

🔌 API Endpoints

The application uses tRPC for type-safe API calls with the following main routers:

• Videos: Video CRUD operations, streaming, and metadata
• Users: User profiles, subscriptions, and preferences
• Comments: Video comments and reactions
• Playlists: Playlist management and video organization
• Studio: Content creator tools and analytics

🎥 Video Features

• Upload: Drag-and-drop video uploads with progress tracking
• Processing: Automatic video encoding and optimization via Mux
• Streaming: Adaptive bitrate streaming for optimal playback
• Thumbnails: Custom thumbnail generation and management
• Categories: Organized video browsing by content type
• Visibility: Public/private video settings

👥 User Features

• Profiles: Customizable user profiles with banners and avatars
• Subscriptions: Follow favorite creators and get updates
• History: Track watched videos and resume playback
• Liked Videos: Save and organize favorite content
• Playlists: Create and share video collections

🎨 UI Components

Built with a comprehensive design system using:

• Radix UI: Accessible, unstyled components
• Tailwind CSS: Utility-first CSS framework
• Lucide Icons: Beautiful, consistent iconography
• Responsive Design: Mobile-first approach with modern layouts

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push

Manual Deployment

1. Build the application:

   bun run build

2. Start the production server:

   bun run start

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

🙏 Acknowledgments

• Built with Next.js
• Video processing powered by Mux
• Authentication by Clerk
• File uploads with UploadThing
• Database management with Drizzle ORM