A Netflix clone

A combination of libraries and frameworks integrated to showcase using React as the frontend to create a basic Netflix-like user interface

Note: This project is still a WIP

📖 Table of Contents

Table of Contents

1. ➤ About The Project
2. ➤ Prerequisites
3. ➤ Folder Structure
4. ➤ Setup
5. ➤ Config

📝 About The Project

This project aims to integrate libraries (Create React App template with TypeScript, Tailwind, SASS) to demonstrate a basic netflix-like user inteface dedicated to my cat Jinx.

🍴 Prerequisites

The following open source packages are used in this project:

• React
• Create-React-App
• React-Toastify
• Bootstrap 5.1
• MDB 5
• ESLint
• Prettier
• The Movie DB
• Tailwind
• Human Activity Recognition documentation
• React-select documentation

🌵 Folder Structure

| .eslintrc | .gitignore | package-lock.json | package.json | README.md | tailwind.config.js | tree.log | tsconfig.json | +---.github | +---workflows | firebase-hosting-merge.yml | firebase-hosting-pull-request.yml | | +---public | default_background.jpg | favicon.ico | fb.png | index.html | logo192.png | logo512.png | manifest.json | netflix-logo.png | robots.txt | user-avatar.png | +---src | App.test.tsx | App.tsx | Header.styles.ts | Header.tsx | Home.tsx | index.scss | index.tsx | Loading.tsx | Login.tsx | LoginForm.tsx | logo.svg | Nav.styles.ts | Nav.tsx | react-app-env.d.ts | reportWebVitals.ts | Row.styles.ts | Row.tsx | setupTests.ts | +---firebase | firebase.ts | +---images | login_main.jpg | +---moviedb | moviedb.ts | +---types Movie.ts twin.d.ts

💾 Setup

Clone the git repo and install dependencies.

Navigate to the source for the React-app:

npm ci

You can then run following scripts for local development

npm run build  // builds the React app 

npm test  // run unit tests

npm lint  // check for any linting issues

🎯 Config

For the SPA project the following app settings needs to be configured (by creating an .env file):

• REACT_APP_MOVIEDB_API_KEY: indicates your tv MovieDB API key. This can be obtained here - https://www.themoviedb.org/settings/api.
• REACT_APP_FIREBASE_API_KEY: Indicates your firebase API key. This is required to demonstrate basic login functionality.