oykuky/Netflix-Clone

Netflix-Clone

⭐ Building a Fullstack Netflix Clone with React, NextJS, TailwindCSS & Prisma

NETFLIX with NEXT.JS!

Features:

• Environment, Typescript, NextJS Setup
• MongoDB & Prisma connect, Database creation
• Authentication with NextAuth, Google & Github Login
• Full responsiveness on all pages
• Cookie based authentication
• API and Controllers creation
• Detail-oriented effects and animations using TailwindCSS
• React SWR data fetching
• Zustand state management

About the Project

Setup .env file

🔑 Environment Variables

DATABASE_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_ID=
GITHUB_SECRET=
NEXTAUTH_SECRET=
NEXTAUTH_JWT_SECRET=

Tech Stack

Client

• Typescript
• React.js
• TailwindCSS
• Next.js

Configure your template paths

Add the paths to all of your template files in your `tailwind.config.js` file
<br>

````js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
    
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;