Hotflix: A Netflix Clone uilt with Next.js

Last update: Jul 13, 2022

Hotflix: A Netflix Clone

Hotflix main page

My Next.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.

View Demo »

Report Bug · Request Feature

Table of Contents

  1. About The Project
  2. Getting Started
  3. Usage
  4. Contact

About The Project

Built With

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Install latest version of npm

Installation

  1. Clone the project
    git clone https://github.com/Halmesn/.git
  2. Go to project directory and Install NPM packages
    npm install
  3. Create a .env.local file
  4. Request an API key from TMDB and add it to .env.local file
    NEXT_PUBLIC_TMDB_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  5. Create a database at MongoDB and add connection url to .env.local file
    MONGODB_DATABASE=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  6. Add a next-auth host url to .env.local file
    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
    NEXT_PUBLIC_TRIAL_ACCOUNT_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  8. Add Google and Facebook client id and secret to .env.local file
    GOOGLE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    GOOGLE_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    FACEBOOK_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    FACEBOOK_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  9. Start the application
    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 - [email protected]

GitHub

https://github.com/Halmesn/Hotflix
You might also like...

200 lines realtime todos app powered by next.js, preact, jet, redux and now

200 lines realtime todos app powered by next.js, preact, jet, redux and now

next-todos About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime. The todos are synced between browsers. The canonical TodoA

Apr 24, 2022

100 lines of code Hackernews reader (with the help of next.js).

About This is an isomorphic react app, displaying stories from hackernews made with super nice next.js. It's just about 100 lines of code. Nothing ser

May 31, 2022

A sample Next.js app for showing off it's capabilities

A sample Next.js app for showing off it's capabilities

NextGram Sample next app that takes advantage of the routing capabilities. In particular, notice that the photo route can be attached to two distinct

Apr 10, 2022

Rauchg Blog - Blog built by a Next.js core maintainer.

blog This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via Vercel. How to run First, install Vercel CLI. Development

Jul 30, 2022

:pencil: JsonPlaceholder sample app made with Next.js

:pencil: JsonPlaceholder sample app made with Next.js

What? Next JPH is an example app made with JsonPlaceholder api, using Next.js, styled-components, flow and jest. "JPH" is an acronym to JsonPlaceholde

Dec 22, 2021

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Dashboard Create your own team dashboard with custom widgets. Table of Contents Installation Server Development Production Docker Create a Dashboard A

Aug 2, 2022

🦅 Gank api base △ next.js (react&ssr)

🦅 Gank api base △ next.js (react&ssr)

Introduction next.js(react ssr repo) and gank api Features Use react SSR framework next.js UI ant design antd Mobile UI ant design antd-mobile Support

Jul 21, 2022

A working example of a decoupled implementation using Next.js and GraphQL with the eZ Platform CMS

Decoupled CMS example with GraphQL and Next.js This repository contains the source code for the sample application from the talk "Easy decoupled siteb

Aug 22, 2021

Next.js website to list DJ and other musical events

Next.js website to list DJ and other musical events

Next.js website for DJ Events. This is part of my Next.js course on Udemy

Jul 30, 2022
Comments
  • 1. Youtube Tutorial

    Can you please create a small tutorial video for developing and deploying the website on a local PC? I would love to see a tutorial for learning purposes.

    Reviewed by haseebkhan611 at 2021-05-24 05:26
Amazon clone with Next JS
Amazon clone with Next JS

Amazon clone with Next JS

Apr 26, 2022
Airbnb UI clone using Next.js + styled-components.

Airbnb UI clone using Next.js + styled-components.

Aug 5, 2022
Uber Web Clone using Next.js, React.js, TailwindCSS, Firebase and Mapbox

uber-next-clone Uber Clone using Next.js, React.js, TailwindCSS, Firebase and Mapbox This is a Next.js project bootstrapped with create-next-app. Gett

Mar 26, 2022
This is the clone of instagram made with Next.js & Firebase V9. for learning purpose only.
This is the clone of instagram made with Next.js & Firebase V9. for learning purpose only.

Next.Js Project Name : Instagram Clone As the project name describes this is a clone of Instagram web app. This build is for learning purpose only. fe

Jul 29, 2022
Next.js ReCaptcha V3 - Straightforward solution for using ReCaptcha in your Next.js application

⭐ Next.js ReCaptcha V3 Straightforward solution for using ReCaptcha in your Next.js application. ??️ Tiny and Tree-Shakable ?? Written in TypeScript ?

Jun 18, 2022
A Facebook clone web app built with Nextjs&Reactjs - Tailwindcss - firebase - heroIcons
A Facebook clone web app built with Nextjs&Reactjs - Tailwindcss - firebase - heroIcons

A Facebook clone web app built with Nextjs&Reactjs - Tailwindcss - firebase - heroIcons

Jul 1, 2022
Google Translate Clone using NextJS and Reactstrap
Google Translate Clone using NextJS and Reactstrap

Development Practice Challenge : Build a Language Translation App Stacks NextJS Reactstrap Getting Started First, run the development server: npm run

Jan 31, 2022
A twitter clone website that was built using nextjs
A twitter clone website that was built using nextjs

Twitter-Clone this is a twitter clone website that was built using nextjs, then decorated using tailwindcss and to store the data using the firebase r

Jun 23, 2022
A Facebook Clone which built with reactJS
A Facebook Clone which built with reactJS

A Facebook Clone which built with reactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Jul 5, 2022
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate Relate brings together mindfulness communities, teachers and individuals. Read the article on Medium Made with ❤︎ by Sébastien Dubois Deprecati

May 19, 2022