/NetflixGPT

Primary LanguageHTMLMIT LicenseMIT

Netflix GPT

Movies recomandation with AI.

Setup

  • Install react app using create-react-app (CRA)
npx create-react-app netflix-gpt
  • Create .env file and put configure
REACT_APP_BASE_URL = YOUR_APPLICATION_BASE_URL; // http://localhost:300
REACT_APP_OPENAI_KEY = YOUR_API_KEY_WILL_HERE;
REACT_APP_TMDB_KEY = YOUR_API_KEY_WILL_HERE;
  • Install and init tailwind css
npm install -D tailwindcss
npx tailwindcss init

  • Configure tailwind css in your project

    npx tailwindcss init command will create a file tailwind.config.js in your project's root directory. Open tailwind.config.js and replace all content with below code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  • Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Now you created a react app with tailwind css successfully. Now run the below command on your terminal to start your local development server.
npm start

Features

  • Home Page (is user authorised)

    • Signin/Signup Page
      • SignInForm / SignUpForm

  • Browse Page

    • Navbar
    • Showcase
    • Trendings
    • MoviesSuggestion
      • MoviesList * N

  • NetflixGPT

    • Search
    • MoviesSuggestion

Screen Shot

  • Landing Page

    Landing Page

  • Signin Page

    Signin Page

  • Signup Page

    Signup Page

  • Browse Page

    Browse Page

  • Movie List

    Movie List

  • Shimmer Loading

    Shimmer Loading

  • Search Page

    Search Page

Made with ❤️ and React.