🎬 Netflix Clone - Full Stack Application

A fully functional Netflix clone built with modern web technologies. This project demonstrates a complete streaming platform with authentication, dynamic content, and responsive design.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

• 🔐 Authentication with NextAuth

  • Email & Password login
  • Google OAuth integration
  • GitHub OAuth integration
  • Cookie-based sessions

• 📱 Fully Responsive Design

  • Mobile-first approach
  • Optimized for all screen sizes
  • Smooth animations and transitions

• 🎨 Modern UI/UX

  • Netflix-inspired interface
  • TailwindCSS styling
  • Detail-oriented animations
  • Interactive components

• 🗄️ Database & Backend

  • MongoDB database
  • Prisma ORM
  • RESTful API endpoints
  • Secure data handling

• ⚡ Performance Optimized

  • React SWR for data fetching
  • Zustand state management
  • Server-side rendering with Next.js
  • Optimized video streaming

🛠️ Tech Stack

• Frontend:

  • Next.js 16 - React framework
  • React 19 - UI library
  • TailwindCSS - Styling
  • TypeScript - Type safety

• Backend:

  • Next.js API Routes
  • Prisma - ORM
  • MongoDB - Database
  • NextAuth.js - Authentication

• State Management & Data Fetching:

  • SWR - Data fetching
  • Zustand - State management
  • Axios - HTTP client

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git
• MongoDB account (MongoDB Atlas)
• Google Cloud account (for OAuth)
• GitHub account (for OAuth)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/netflix-clone.git
cd netflix-clone

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env file in the root directory and add the following:

# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_JWT_SECRET=your-jwt-secret-here
NEXTAUTH_SECRET=your-nextauth-secret-here

# Database
DATABASE_URL=your-mongodb-connection-string

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# GitHub OAuth
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret

4. Setup Prisma

# Generate Prisma Client
npx prisma generate

# Push database schema
npx prisma db push

5. Start the development server

npm run dev

Open http://localhost:3000 in your browser to see the application.

📦 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run lint	Run ESLint

📚 Resources

• Next.js Documentation
• NextAuth.js Documentation
• Prisma Documentation
• MongoDB Documentation
• TailwindCSS Documentation
• SWR Documentation
• Zustand Documentation
• Axios Documentation

🙏 Acknowledgments

🙏 Acknowledgments

• YouTube - Tutorial reference
• Vercel - Deployment platform (CD)
• GitHub - Code hosting and version control (CI)

---

⭐ If you found this project helpful, please give it a star!