Netflix Clone - Full Stack Application

A fully functional Netflix clone built with Next.js, TypeScript, MongoDB, and custom CSS. This application features user authentication, movie/TV show streaming, and a responsive Netflix-inspired UI.

Features

• 🎬 Movie & TV Show Streaming: Browse and watch movies and TV series
• 🔐 User Authentication: Secure registration, login, and JWT-based authentication
• 📱 Responsive Design: Netflix-inspired UI that works on all devices
• 🎯 Personalized Experience: User watchlists, viewing history, and recommendations
• 🔍 Search & Filter: Find content by title, genre, or other criteria
• 📊 Rich Content Data: Detailed movie information, cast, ratings, and more
• ⚡ Fast Performance: Optimized with Next.js 15 and modern React patterns

Tech Stack

• Frontend: Next.js 15, TypeScript, Custom CSS
• Backend: Next.js API Routes, JWT Authentication
• Database: MongoDB with Mongoose ODM
• Authentication: Custom JWT implementation with bcrypt
• UI Components: Lucide React icons, Custom CSS modules
• Deployment: Ready for Vercel deployment

Getting Started

Prerequisites

• Node.js 18+
• MongoDB (local or MongoDB Atlas)
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd netflix-app

2. Install dependencies

   npm install

3. Set up environment variables

   Copy the .env.local file and update the values:

   # MongoDB Connection
   MONGODB_URI=mongodb://localhost:27017/netflix-app
   # For MongoDB Atlas: mongodb+srv://<username>:<password>@<cluster>.mongodb.net/netflix-app
   
   # Authentication
   NEXTAUTH_SECRET=your-secret-key-here
   NEXTAUTH_URL=http://localhost:3000
   JWT_SECRET=your-jwt-secret-here

4. Set up MongoDB

   • Local MongoDB: Install and start MongoDB locally
   • MongoDB Atlas: Create a cluster and get your connection string

5. Seed the database

   npm run seed

   This will populate your database with sample movies and TV shows.

6. Start the development server

   npm run dev

7. Open the application

   Visit http://localhost:3000 in your browser.

Usage

Creating an Account

1. Visit the homepage
2. Click "Get Started" or "Sign Up"
3. Fill in your details (name, email, password)
4. Start browsing movies and TV shows!

Browsing Content

• Home: Featured content and personalized recommendations
• Movies: Browse all available movies
• TV Shows: Browse all available series
• My List: Your personal watchlist
• Search: Find content by title or genre

Watching Content

• Click on any movie/show card to view details
• Click the play button to start watching
• Add items to your list for later viewing
• Like content to improve recommendations

Project Structure

nextflix-app/
├── src/
│   ├── app/                 # Next.js 13+ app directory
│   │   ├── (auth)/          # Authentication pages
│   │   ├── api/             # API routes
│   │   ├── globals.css      # Global styles
│   │   └── layout.tsx       # Root layout
│   ├── components/          # Reusable UI components
│   ├── contexts/            # React contexts (Auth, etc.)
│   ├── lib/                 # Utility functions
│   ├── models/              # MongoDB/Mongoose models
│   └── data/                # Sample data
├── scripts/                 # Database scripts
└── public/                  # Static assets

API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user

Movies

• GET /api/movies - Get all movies (with filtering)
• GET /api/movies/[id] - Get specific movie
• POST /api/movies - Create new movie (admin)
• PUT /api/movies/[id] - Update movie (admin)
• DELETE /api/movies/[id] - Delete movie (admin)

Key Features

Authentication System

• JWT-based authentication with secure password hashing
• Persistent login sessions
• Protected routes and API endpoints

Content Management

• Comprehensive movie/TV show data model
• Support for series with episodes and seasons
• Rich metadata (cast, director, awards, etc.)
• View tracking and analytics

User Experience

• Netflix-inspired responsive design
• Smooth animations and transitions
• Personalized watchlists and history
• Search and filtering capabilities

Environment Variables

# Required
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The application can be deployed to any platform that supports Node.js applications:

• Railway
• Heroku
• DigitalOcean App Platform
• AWS Amplify

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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

• Netflix for design inspiration
• The Next.js team for an amazing framework
• MongoDB for the flexible database solution
• All the open source libraries that made this possible

---

Note: This is a learning project and demo application. It's not affiliated with Netflix Inc.

Netflix-Clone-NextJS