Netflix Clone

A full-stack Netflix-inspired streaming platform built with Next.js, React, Drizzle ORM, and PostgreSQL. This project allows users to browse, watch, and favorite movies, featuring authentication (email/password and social login), a modern UI, and persistent user data.

Features

• User Authentication: Email/password registration and login, plus OAuth with Google and GitHub.
• Movie Catalog: Browse a list of movies, view details, and watch trailers or full videos.
• Favorites: Add or remove movies from your personal favorites list.
• Responsive UI: Netflix-like interface, fully responsive for desktop and mobile.
• Profile Selection: Choose a user profile after login.
• Protected Routes: Only authenticated users can access main content.
• Modern Stack: Uses React Query for data fetching, Zustand for state management, and Drizzle ORM for database access.

Technologies Used

• Frontend:

  • Next.js (App Router, SSR/CSR)
  • React
  • Tailwind CSS for styling
  • React Query for data fetching/caching
  • Zustand for modal state
  • Lucide React and React Icons for icons

• Backend:

  • Drizzle ORM for type-safe database access
  • PostgreSQL as the database
  • Hono for API routing
  • Better Auth for authentication
  • dotenv for environment variables

• Dev Tools:

  • TypeScript
  • ESLint
  • Docker for local PostgreSQL setup

Project Structure

src/
  app/                # Next.js app directory (pages, layouts, routes)
  components/         # React UI components
  database/           # Drizzle ORM schema and database connection
  hooks/              # Custom React hooks (data fetching, modal state, etc.)
  lib/                # Auth client/server logic
  types/              # TypeScript types
public/               # Static assets (images, icons)
postgres-init/        # PostgreSQL initialization scripts

Getting Started

Prerequisites

• Node.js v18+
• Docker (for local PostgreSQL)
• npm / pnpm / yarn

1. Clone the repository

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

2. Setup Environment Variables

Copy .env.example to .env and fill in your credentials:

DATABASE_URL=postgres://postgres:password@localhost:5432/netflix
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

3. Run Database Migrations

npx drizzle-kit push

4. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

5. Start the Development Server

npm run dev

Visit http://localhost:3000 to view the app.

Usage

• Register or sign in with email/password, Google, or GitHub.
• Select your profile.
• Browse movies, watch trailers, and add/remove favorites.
• Click on a movie for more info or to play.

Screenshots

Add screenshots here to showcase the UI.

License

This project is for educational purposes only and is not affiliated with Netflix.

---

Inspired by Netflix. Built with ❤️ using Next.js, Drizzle ORM, and PostgreSQL.