https://github.com/Halmesn/Hotflix
🍿 This project landed me an interview with Netflix!
https://github.com/Halmesn/Hotflix
netflix nextjs
Last synced: 6 months ago
JSON representation
🍿 This project landed me an interview with Netflix!
- Host: GitHub
- URL: https://github.com/Halmesn/Hotflix
- Owner: Halmesn
- License: mit
- Created: 2021-04-30T15:33:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-20T04:43:16.000Z (over 1 year ago)
- Last Synced: 2024-11-08T21:38:27.862Z (11 months ago)
- Topics: netflix, nextjs
- Language: JavaScript
- Homepage: https://hotflix-clone.vercel.app/
- Size: 25.4 MB
- Stars: 192
- Watchers: 4
- Forks: 28
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Hotflix: A Netflix Clone
🔥This project got 3.6k upvotes on Reddit and landed me an interview with Netflix🔥
View Demo »
Report Bug
·
Request Feature
Table of Contents
## About The Project
### Built With
- [Next.js](https://nextjs.org/)
- [NextAuth](https://next-auth.js.org/)
- [styled-components](https://styled-components.com/)
- [MongoDB](https://www.mongodb.com/)
- [TMDb API](https://www.themoviedb.org/)
## Getting Started
To get a local copy up and running follow these simple steps.
### Prerequisites
Install latest version of npm
- npm
```sh
npm install npm@latest -g
```
### Installation
1. Clone the project
```sh
git clone https://github.com/Halmesn/.git
```
2. Go to project directory and Install NPM packages
```sh
npm install
```
3. Create a .env.local file
4. Request an API key from TMDB and add it to .env.local file
```sh
NEXT_PUBLIC_TMDB_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
5. Create a database at MongoDB and add connection url to .env.local file
```sh
MONGODB_DATABASE=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
6. Add a next-auth host url to .env.local file
```sh
NEXTAUTH_URL=http://localhost:3000
```
7. Create a trial account at your database, adjust the email address in AuthForm onTrialClick function and add it's password to .env.local file
```sh
NEXT_PUBLIC_TRIAL_ACCOUNT_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```
8. Start the application
```sh
npm next start
```
## Usage
**Creating an Account**
1. Go to Sign Up page.
- From the homepage, enter your email and click 'Get Started'.
- From Sign In page, click the 'Sign up now' link below 'Sign In' button.
2. Input the necessary fields. Don't worry. It won't take long.
- Both email and phone number has to be unique.
- Or just click the trial account button, the email and password will be filled automatically for you.
3. After signing up, you'll receive a success message, then you can sign in.
- Your email and password will be filled automatically for you.
**Logging In**
1. Go to Sign In page.
- From the homepage, click 'Sign in' button.
- From Sign Up page, click the 'Sign in now' link below 'Sign Up' button.
2. Input the necessary fields and proceed.
- You can sign in using either email or phone number.
- You can also sign in with your google or facebook account.
**Searching for a Show**
1. Log in and add a profile if you don't already have one or selected a profile.'
2. Click the appropriate tab for your search.
- If searching for a movie, click 'Movies' tab in the header.
- If searching for a series, click 'TV Shows' tab in the header.
3. Click the search icon on the header.
4. Input your search term.
5. To go back to browse page, click the 'back' arrow in the left top corner.
**Adding User Profile**
1. Log in to your account.
2. Click 'Manage Profiles'.
3. Click 'Add Profile'.
- You can only add up to 5 profiles for each account.
4. Click the pencil/edit icon and choose your preferred avatar.
5. Enter your preferred display name and click 'Save'.
- You can't use avatars and names already used by other profiles in the same account.
**Editing User Profile**
1. Log in to your account.
2. Click 'Manage Profiles'.
3. Click the profile you wish to edit.
4. Modify the profile as you see fit and click 'Save'.
**Deleting User Profile**
1. Log in to your account.
2. Click 'Manage Profiles'.
3. Click the profile you wish to delete.
4. Click 'Delete Profile'.
5. Confirm deletion by clicking 'Yes'.
## Contact
Adrian Li - [LinkedIn](https://www.linkedin.com/in/adrian-li-332395208/) - xiaxi.li.syd@gmail.com