Netflix Clone

A Netflix Clone app written in Typescript that utilises Next.js as a framework, allowing for static HTML to be generated server-side on build time, resulting in better performance and SEO. This app utilises NextAuth to authorise users serverside through getServerSideProps, additionally users can login to the app through their registered Google account. The TMDb api was used to gather movies/series data (most popular, top rated, new series, etc). Users can save selected movies to their "My List" by utilising Firebase (BaaS) as the database. Additionally, the TailwindCSS framework was used to help with CSS management and to reduce the CSS bundle size by removing all unused CSS when building for production.

View a live version of the app using the link below:

https://project-net.vercel.app/

Built With:

             

View a Range of Movies and Series

• Utilises TMDb api to get movies and series by genres, latest releases, most popular, etc.
• Utilises ReactPlayer to display the corresponding YouTube trailers based on the fetched TMDb api data.

Save Movies to My List

• Users can save selected movies to their "My List".
• Allows users to keep track of movies or series they may want to watch in the future.

NextAuth Authentication

• Utilises NextAuth, allowing users to be authenticated server side through getServerSideProps.
• Users can access the app through their registered Google account.

Responsive Design

• Fully responsive design to allow the app to work on both computers, notepads, mobile phones, etc.

How to Install and Run the Project Locally:

- Please follow the following steps if you would like to install and run the porject locally on http://localhost:3000/:

1. Clone the repository to your local folder of choice

   git clone git@github.com:Pierce-44/netflix-clone.git

2. Go to Firebase and follow the instructions for creating a project

   https://firebase.google.com/

2. Create the following file in your local repository util/firbaseConfig.ts and paste in your Firebase configuration, which was assigned to your project when you created it on firebase and can be found under your project settings on Firebase. It should resemble the following example:

   // Your web app's Firebase configuration should resemble the following EXAMPLE:
   
   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
     apiKey: "AIzaSyA97-R5P4bEwjV0efHt3hLs3bc32ns4shs",
     authDomain: "instagram-clone-ph.firebaseapp.com",
     projectId: "instagram-clone-ph",
     storageBucket: "instagram-clone-ph.appspot.com",
     messagingSenderId: "554003582327",
     appId: "1:554003582327:web:97667da84152c9ff7aa572"
   };
   
   // Initialize Firebase
   export const app = initializeApp(firebaseConfig);

   
   

3. Create a free account with TMDB and then follow their instructions in the linked guide below to create your own personal API key:

   TMDB API Guide

   
   

4. Create the following file in your local repository util/firbaseConfig.ts and add your personal TMDB api key from section 3

   export const api = 'ENTER YOUR API HERE';

5. Install NPM packages

   npm install

   
   

6. Start the app on your localhost

   npm run dev