Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Overview

Fakeflix

Not the usual clone that you can find on the web.

Image of Fakeflix Project

FakeFlix_Desktop.mp4

🎯 About

I have started this project with the purpose of learning how to structure a Web App of a mid-level complexity integrating the Redux logic.
I've tried to replicate the original layout as much as possible and I've also made some improvements in some sections inserting route animations and micro-interactions. I've also inserted a really close clone of Netflix's original splash animation (forked from a famous codepen from Claudio Bonfati), made entirely with CSS, as well as the play animation. I have then sampled the original Netflix "ta-duummm" sound and I made it play along with the two animations.
I put a lot of effort into it and I hope that you could like it.

The Web App redirects you to an authentication page, in which you can choose to sign up or to sign in: you can sign in with your custom account or with your Google account. Once you are logged in and after the splash animation, you will land on the homepage, in which you can find a mix of movies and series divided into rows.
Each row represents a movie/series category: you can click on it and you will be redirected to the selected category, a page that loads thousands of movies with an infinite scroll. You can also navigate to the movies page, series page, new & popular page (that contains the upcoming movies/series and the most popular ones) or you can navigate to your favorites page.
You can add/remove movies/series through the plus and minus buttons that you can find hovering each poster or opening a single movie's detail modal. If you click on the play button you can enjoy a custom CSS-only play animation with Fakeflix's brand name.
You have also the option to search through TMDB's catalogue using the search functionality inside the fixed navbar: you can search by movie name, actor or movie director.

Go try it and please let me know if you enjoyed it with a ⭐️ , I would appreciate it a lot.

▶️ Demo

Here you can find the demo link:

Test credentials (for lazy users 😓 )

Email: [email protected]
Password: FakeflixTest

I have also added a button that lets you sign in anonymously.

Features

✔️   Display movies and series, old and upcoming, also from the real Netflix
✔️   Category related page with infinite scroll
✔️   Search by title, actor, movie director
✔️   Add/Remove to/from "My list" functionality
✔️   Detail modal with extra informations about the selected movie/series
✔️   Customized splash animation (credits: Claudio Bonfati's pen) with characteristic Netflix sound
✔️   Play animation with characteristic Netflix sound
✔️   Google login
✔️   User Sign In & User Sign Up
✔️   Use of React hooks and custom hooks
✔️   Favourites list persistence (session storage)
✔️   Responsive layout
✔️   Swipeable movies list
✔️   Loading skeletons
✔️   Route animations and micro-interactions (handled with Framer Motion)

🚀 Technologies

Netlify deploy & configuration

Netlify Status

Deploy configuration steps

  1. Connect your GitHub account to Netlify
  2. Select the project
  3. In Settings → Build & Deploy → Set Build command to : npm run build
  4. In Settings → Build & Deploy → Set Publish directory to : build
  5. In Settings → Build & Deploy → Set Environment variables → Click on Edit variables and add yours (ie: TMBd's API key, Firebase configuration).

📸 Screenshots

Sign In Screenshot of Fakeflix Sign In

Sign Up Screenshot of Fakeflix Sign Up

Homepage Screenshot of Fakeflix Homepage

Modal Detail Screenshot of Fakeflix Modal Detail

Mobile Experience

Fakeflix_MobilePlay.mp4

Desktop Experience

FakeFlix_Desktop.mp4

👨🏻‍💻 Run Locally

  • Clone the project
  git clone https://github.com/Th3Wall/Fakeflix
  • Go to the project directory
  cd fakeflix
  • Install dependencies
  npm install
  • Create a .env file

  • Request an API key from TMDB and them add it to the .env file

REACT_APP_API_KEY=REACT_APP_API_KEY
  • Create a project inside Google Firebase and export the configuration

  • Add the configuration inside the .env file created previously

REACT_APP_FIREBASE_API_KEY=REACT_APP_FIREBASE_API_KEY
REACT_APP_FIREBASE_AUTH_DOMAIN=REACT_APP_FIREBASE_AUTH_DOMAIN
REACT_APP_FIREBASE_PROJECT_ID=REACT_APP_FIREBASE_PROJECT_ID
REACT_APP_FIREBASE_STORAGE_BUCKET=REACT_APP_FIREBASE_STORAGE_BUCKET
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=REACT_APP_FIREBASE_MESSAGING_SENDER_ID
REACT_APP_FIREBASE_APP_ID=REACT_APP_FIREBASE_APP_ID
REACT_APP_FIREBASE_MEASUREMEMT_ID=REACT_APP_FIREBASE_MEASUREMEMT_ID
  • Start the server
  npm start

Requirements

Before starting 🏁 , you need to have Git and Node installed.

📝 License

MIT

Comments
  • Failed to compile

    Failed to compile

    Failed to compile on Windows 10

    c:\bin>git clone https://github.com/Th3Wall/Fakeflix Cloning into 'Fakeflix'... remote: Enumerating objects: 2740, done. remote: Counting objects: 100% (125/125), done. remote: Compressing objects: 100% (47/47), done. remote: Total 2740 (delta 100), reused 86 (delta 78), pack-reused 2615 Receiving objects: 100% (2740/2740), 1.22 MiB | 2.54 MiB/s, done. Resolving deltas: 100% (1749/1749), done.

    c:\bin>cd fakeflix

    c:\bin\Fakeflix>npm install

    [email protected] install c:\bin\Fakeflix\node_modules\re2 install-from-cache --artifact build/Release/re2.node --host-var RE2_DOWNLOAD_MIRROR || npm run rebuild

    Trying https://github.com/uhop/node-re2/releases/download/1.15.9/win32-x64-72.br ... Writing to build/Release/re2.node ... Done.

    [email protected] install c:\bin\Fakeflix\node_modules\husky node husky install

    husky > Setting up git hooks husky > Done

    [email protected] install c:\bin\Fakeflix\node_modules\node-sass node scripts/install.js

    Downloading binary from https://github.com/sass/node-sass/releases/download/v5.0.0/win32-x64-72_binding.node Download complete ] - : Binary saved to c:\bin\Fakeflix\node_modules\node-sass\vendor\win32-x64-72\binding.node Caching binary to C:\Users\skanga\AppData\Roaming\npm-cache\node-sass\5.0.0\win32-x64-72_binding.node

    [email protected] postinstall c:\bin\Fakeflix\[email protected]\polyfill\node_modules\core-js node -e "try{require('./postinstall')}catch(e){}"

    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

    https://opencollective.com/core-js https://www.patreon.com/zloirock

    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

    [email protected] postinstall c:\bin\Fakeflix\node_modules\babel-runtime\node_modules\core-js node -e "try{require('./postinstall')}catch(e){}"

    [email protected] postinstall c:\bin\Fakeflix\node_modules\core-js node -e "try{require('./postinstall')}catch(e){}"

    [email protected] postinstall c:\bin\Fakeflix\node_modules\core-js-pure node -e "try{require('./postinstall')}catch(e){}"

    [email protected] postinstall c:\bin\Fakeflix\node_modules\ejs node ./postinstall.js

    Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

    [email protected] postinstall c:\bin\Fakeflix\node_modules\protobufjs node scripts/postinstall

    [email protected] postinstall c:\bin\Fakeflix\node_modules\husky opencollective-postinstall || exit 0

    Thank you for using husky! If you rely on this package, please consider supporting our open collective:

    https://opencollective.com/husky/donate

    [email protected] postinstall c:\bin\Fakeflix\node_modules\node-sass node scripts/build.js

    Binary found at c:\bin\Fakeflix\node_modules\node-sass\vendor\win32-x64-72\binding.node Testing binary Binary is fine

    [email protected] postinstall c:\bin\Fakeflix\node_modules\swiper node postinstall.js

    Love Swiper? Support Vladimir's work by donating or pledging on patreon:

    On Patreon https://patreon.com/vladimirkharlampidi On Open Collective https://opencollective.com/swiper npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    added 2460 packages from 978 contributors and audited 2469 packages in 152.055s

    151 packages are looking for funding run npm fund for details

    found 230 vulnerabilities (1 low, 219 moderate, 9 high, 1 critical) run npm audit fix to fix them, or npm audit for details

    c:\bin\Fakeflix>npm start

    [email protected] start c:\bin\Fakeflix react-scripts start

    i 「wds」: Project is running at http://172.17.32.1/ i 「wds」: webpack output is served from i 「wds」: Content not from webpack is served from c:\bin\Fakeflix\public i 「wds」: 404s will fallback to / Starting the development server... Failed to compile.

    ./node_modules/framer-motion/dist/es/render/index.js Attempted import error: '__spreadArray' is not exported from 'tslib'.

    question 
    opened by skanga 5
  • Registration / Login form is not working

    Registration / Login form is not working

    I tried to log in with your fake email still I am unable to log in, Even I tried to create a new user by registering still It's not working check out the below ss

    image

    opened by kerrybli 4
  • CONFIGURATION_NOT_FOUND

    CONFIGURATION_NOT_FOUND

    I have followed instructions to set up .env file. However, I get CONFIGURATION_NOT_FOUND. Any idea how to resolve this?

    seems like it doesn't like my REACT_APP_FIREBASE_API_KEY

    Cool project btw. I'm really looking forward to exploring it more 😃

    Screen Shot 2021-07-06 at 11 45 31 PM help wanted 
    opened by AmirNaghibi 2
  • noob here

    noob here

    sorry but i m a noob in such projects ,,,i am interested in ur project and want to run fakeflix on my pc.plz tell me how can i create .env file and adding api key into it and rest of the process in steep by step guide.i shall be very thankful to u..waiting for ur reply.

    opened by mikkipopup 2
  • Docker

    Docker

    Per creare il container docker:

    docker build -t fakeflix:dev .

    Mi da questi problemi in fase di compilazione react:

    (node:59) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /app/node_modules/postcss-safe-parser/node_modules/postcss/package.json. Update this package.json to use a subpath pattern like "./*". (Use node --trace-deprecation ... to show where the warning was created) Creating an optimized production build... Failed to compile.

    ./src/index.scss Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v5.0.0

    opened by andreatosato 2
  • Bump terser from 4.8.0 to 4.8.1

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • firebase does not have database as based your .env file

    firebase does not have database as based your .env file

    firebase does not have database as based your .env file i.e database of firebase ,but in your src/firebase/firebaseutil.js you have declare firestore .Please check out as firebase auth showing error everytime when sign in and sign up. Do we have to create database in firebase .Please mention

    question 
    opened by shahishree03 1
  • Bump url-parse from 1.5.4 to 1.5.7

    Bump url-parse from 1.5.4 to 1.5.7

    Bumps url-parse from 1.5.4 to 1.5.7.

    Commits
    • 8b3f5f2 1.5.7
    • ef45a13 [fix] Readd the empty userinfo to url.href (#226)
    • 88df234 [doc] Add soft deprecation notice
    • 78e9f2f [security] Fix nits
    • e6fa434 [security] Add credits for incorrect handling of userinfo vulnerability
    • 4c9fa23 1.5.6
    • 7b0b8a6 Merge pull request #223 from unshiftio/fix/at-sign-handling-in-userinfo
    • e4a5807 1.5.5
    • 193b44b [minor] Simplify whitespace regex
    • 319851b [fix] Remove CR, HT, and LF
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Friendly note, your API keys are exposed.

    Friendly note, your API keys are exposed.

    From the React docs

    WARNING: Do not store any secrets (such as private API keys) in your React app!

    Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

    (Source: https://create-react-app.dev/docs/adding-custom-environment-variables/)

    Also, your API keys are currently visible in the Network tab of the browser DevTools.

    Great work, by the way.

    opened by AyushSl 1
  • TV Series

    TV Series

    Currently Fakeflix only supports Movies with one video, even if the item is a series of videos like Stranger Things.

    It would nice to support them too. At best with the solution Netflix did.

    opened by fossdd 1
  • Will you have a course or video on how you created it?

    Will you have a course or video on how you created it?

    Hi, I would like to know if there is a course or video on how you created it since I am new in react and there are many things that I cannot understand. I hope you can help me, I thank you very much. Greetings.

    opened by LuisMartinez1 1
  • use Private Route

    use Private Route

    i would rather create a new component e.g Private Route and use it https://github.com/Th3Wall/Fakeflix/blob/e4487d542b11351eb40f6364d3e531a4dd11cdd4/src/App.js#L58

    opened by iamaamir 0
Owner
Davide Mandelli
Front End Developer
Davide Mandelli
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app

Netflix: UI Clone with React Native / Expo web demo: Expo Netflix Table of Contents Install & Build Features API Components/Packages Used Linting Expo

Caleb Nance 456 Nov 15, 2022
netflix clone using react js, css, axios, themoviedb, get api, netflix-clone react simplified project, axios-react

Netflix Clone React js This project is a simplified front end clone of Netflix. It was created with React.js and CSS,It uses the famous Javascript lib

Sijeesh Miziha 10 Aug 18, 2022
Netflix-clone - Netflix UI Clone with ReactJS for study purposes

Netflix UI Clone with ReactJS for study purposes Images about project:

droyendev 5 Jun 2, 2022
Foot Locker is an online store specialized in selling shoes of all kinds, where you can find all the shoes you want

Foot Locker Links ?? Heroku link Adobe XD link Description Foot Locker is an online store specialized in selling shoes of all kinds, where you can fin

G11 1 Apr 16, 2022
Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Dian Ananda 2 Jun 22, 2022
This is not the real NETFLIX, its a clone. Built with REACT JS, authenticated and deployed with firebase.

NETFLIX-CLONE This is not the real NETFLIX, its a clone. Built with REACT JS and authenticated with firebase. click here to view the finished page I u

Kevv_in 9 Nov 10, 2022
X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend.

X-Netflix X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend. Built with FrontEnd: React.JS,

Mehdi BHA 52 Aug 19, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Yusuf İşbilir 14 Jun 30, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Mert Çankaya 10 Nov 13, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape 146 Nov 14, 2022
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

Vu Nguyen 115 Nov 14, 2022
This is a MERN based app built to help talented individuals to find all sorts of gigs! From being a musician at a wedding, to film editing and videography, all sorts of individuals can benefit from Gig Spot.

Gig Spot - A MERN Gig Finder License Table of Contents Description Installation Demo Technologies Authors Description This is a MERN based app built t

Emily Kersey 2 Jul 25, 2022
React-play: an open-source web app that helps you learn ReactJS faster with a hands-on practice model

react-play is an open-source web app that helps you learn ReactJS faster with a hands-on practice model. It is a collection of ReactJS projects that you can use to learn ReactJS.

ReactPlayIO 547 Nov 16, 2022
Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Piyush Suthar 439 Nov 14, 2022
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Özge Coşkun Gürsucu 36 Aug 14, 2022
A Google Clone which built with ReactJS. You can search whatever you want.

A React app which is Google Web Clone that you can simply search whatever you want.

Mert Çankaya 10 Nov 24, 2021
Open-source project. Hacktoberfest2022 - Contribute given programs in any language you want, every valid PR will be accepted!!! Make sure to star this repo.

Hacktoberfest-React-Project About PowerTheWeb is an open-source project to help web developers make their road easy to become a successful web develop

DevvSakib 19 Nov 13, 2022
You should focus the logics of your app, not DnD

You should focus the logics of your app, not DnD

Thaddeus Jiang 13 Nov 21, 2022
A Netflix clone created using React. It is built using modern react tools/best practices, such as hooks, context API, and redux toolkit.

Netflix-Clone A Netflix clone I created for the sake of practicing React and Redux. It features design patterns recommended by the documentation. Some

Subhanga Upadhyay 99 Nov 18, 2022