NewTube - YouTube Clone

A modern, feature-rich YouTube clone built with Next.js, TypeScript, and Tailwind CSS. This project demonstrates the implementation of a video-sharing platform with a focus on user experience and performance.

🚀 Features

Implemented

✅ Modern and responsive UI using Tailwind CSS with mobile-first approach
✅ Server-side rendering with Next.js 15 and App Router
✅ Authentication system using Clerk for secure user management
✅ Navigation sidebar with responsive design for different screen sizes
✅ Search functionality with optimized performance
✅ Home page layout with category filtering
✅ Radix UI components integration for accessible UI elements
✅ Categories system with filtering capabilities
✅ tRPC integration for type-safe API calls between client and server
✅ Database integration with Drizzle ORM and NeonDB

Planned

📝 Video upload and processing with cloud storage integration
📝 User profiles and channels with customization options
📝 Video recommendations based on user preferences
📝 Comments and interactions with real-time updates
📝 Playlists management for organizing content
📝 Watch history tracking for personalized experience
📝 Subscriptions system for following creators
📝 Video analytics for content creators
📝 Advanced search with filters and sorting options
📝 Notifications system for user engagement

🛠️ Tech Stack

Frontend

Framework: Next.js 15 with TypeScript and App Router
Styling: Tailwind CSS 4 with custom components
UI Components: Radix UI (comprehensive suite of accessible components)
Form Handling: React Hook Form with Zod validation
State Management: React Query with tRPC
Client Utilities:
- date-fns for date formatting
- clsx and tailwind-merge for conditional styling
- Lucide React for icons
- Embla Carousel for slider components

Backend

API Layer: tRPC for end-to-end typesafe APIs
Authentication: Clerk for user management
Database: Drizzle ORM with NeonDB (PostgreSQL)
Caching: Upstash Redis
Rate Limiting: Upstash Rate Limit

DevOps

Package Manager: Bun (with npm compatibility)
Deployment: Netlify with continuous integration
Development Tools: Turbopack for fast refresh

📦 Project Structure

├── src/
│   ├── app/                # Next.js app directory with App Router
│   │   ├── (auth)/         # Authentication routes
│   │   ├── (home)/         # Home page routes
│   │   ├── api/            # API routes
│   │   ├── globals.css     # Global styles
│   │   └── layout.tsx      # Root layout component
│   ├── components/         # Reusable UI components
│   │   ├── ui/             # Base UI components
│   │   └── filter-carousel.tsx # Category filter component
│   ├── db/                 # Database configuration
│   │   ├── index.ts        # Database connection
│   │   └── schema.ts       # Database schema
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility functions and configurations
│   │   ├── ratelimit.ts    # Rate limiting configuration
│   │   ├── redis.ts        # Redis configuration
│   │   └── utils.ts        # Utility functions
│   ├── middleware.ts       # Next.js middleware
│   ├── modules/            # Feature-based modules
│   │   ├── auth/           # Authentication module
│   │   ├── categories/     # Categories module
│   │   └── home/           # Home page module
│   ├── providers/          # React context providers
│   ├── scripts/            # Utility scripts
│   │   └── seed-categories.ts # Database seeding
│   └── trpc/               # tRPC configuration
│       ├── client.tsx      # Client-side tRPC setup
│       ├── init.ts         # tRPC initialization
│       ├── query-client.ts # React Query client
│       ├── routers/        # tRPC routers
│       └── server.tsx      # Server-side tRPC setup
├── public/                 # Static assets
└── config files            # Various configuration files

🚀 Getting Started

Clone the repository

git clone [repository-url]
cd youtube-clone

Install dependencies
```
bun install
# or
npm install
```

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

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Database
DATABASE_URL=your_neondb_connection_string

# Redis
UPSTASH_REDIS_REST_URL=your_upstash_redis_url
UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token

Seed the database
```
bun seed
# or
npm run seed
```
Run the development server
```
bun dev
# or
npm run dev
```
Open http://localhost:3000 in your browser

🔧 Development

Available Scripts

Development Mode: bun dev or npm run dev
Development with Webhook: bun run dev:all (runs both dev server and ngrok webhook)
Build: bun build or npm run build
Production: bun start or npm start
Linting: bun lint or npm run lint
Database Seeding: bun seed or npm run seed

Architecture

The project follows a modular architecture with feature-based organization:

App Router: Utilizes Next.js 15 App Router for page routing
tRPC: Provides type-safe API communication between client and server
Modules: Features are organized into self-contained modules
Components: Reusable UI components built with Radix UI and Tailwind

🎯 Project Goals

Create a modern and performant video-sharing platform
Implement industry best practices for scalability
Provide a seamless user experience across devices
Demonstrate advanced Next.js and React patterns
Build a fully accessible application following WCAG guidelines
Optimize for performance with efficient data fetching and rendering

🧪 Testing

Unit testing implementation planned with Vitest
E2E testing with Cypress planned
Component testing with React Testing Library planned
Performance testing with Lighthouse planned

📱 Responsive Design

Mobile-first approach with adaptive layouts
Responsive navigation with collapsible sidebar
Adaptive video player for different screen sizes
Cross-browser compatibility testing
Touch-friendly interactions for mobile devices

🔐 Security

Authentication with Clerk for secure user management
Protected API routes with proper authorization
Input validation with Zod schema validation
CSRF protection for form submissions
Rate limiting with Upstash Rate Limit
Secure environment variable handling

🌐 Performance Optimization

Server-side rendering for improved initial load
Image optimization with Next.js Image component
Code splitting and lazy loading
Efficient data fetching with React Query
Caching strategies with Redis
Bundle size optimization

🤝 Contributing

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

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

📄 License

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

Built with ❤️ using Next.js and TypeScript

Lostovayne/Build-youtube-clone-with-nextjs