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

Last update: Jun 17, 2022

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

GitHub

https://github.com/Th3Wall/Fakeflix
Comments
  • 1. 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'.

    Reviewed by skanga at 2021-07-13 18:15
  • 2. 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

    Reviewed by kerrybli at 2021-12-02 07:45
  • 3. 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
    Reviewed by AmirNaghibi at 2021-07-07 06:48
  • 4. 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.

    Reviewed by mikkipopup at 2021-07-04 13:02
  • 5. 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

    Reviewed by andreatosato at 2021-07-03 19:40
  • 6. 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

    Reviewed by shahishree03 at 2022-04-22 07:23
  • 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.

    Reviewed by dependabot[bot] at 2022-02-19 16:56
  • 8. 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.

    Reviewed by AyushSl at 2021-12-07 07:09
  • 9. 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.

    Reviewed by fossdd at 2021-09-03 19:25
  • 10. 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.

    Reviewed by LuisMartinez1 at 2021-08-27 19:14
  • 11. Suggestion: Use Backblaze

    Use backblaze B2 for video downloading. I used it on a social media website and the photo and videos appear instantly. It beat out Amazon S3 by 95ms. In terms of response, Backblaze was at about 5ms.

    $0.005 Storage

    Service | AWS S3 | Backblaze B2 | AWS Markup ------------ | ------------- | ------------- | ------------- Storage (GB) | $0.023 | $0.005 | 360% Download (GB) | $0.09 | $0.01 | 800% Redundancy (GB) | $0.023 per location | FREE across 9-14 locations | N/A Requests | $0.0004 / 1000 | $0.004 / 10000 | 0%

    Of course if this uses S3, it has compatible APIs so it's very easy for anyone to switch out.

    Reviewed by Lexxos at 2021-07-29 08:50
  • 12. 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

    Reviewed by iamaamir at 2021-07-15 14:46
netflix clone using react js, css, axios, themoviedb, get api, netflix-clone react simplified project, axios-react
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

Jan 21, 2022
Netflix-clone - Netflix UI Clone with ReactJS for study purposes
Netflix-clone - Netflix UI Clone with ReactJS for study purposes

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

Jun 2, 2022
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app
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

Jun 16, 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

Mar 26, 2022
Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Jun 22, 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

Apr 19, 2022
X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend.
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,

Jun 6, 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

Nov 24, 2021
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 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.

Jun 9, 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.
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

Jun 23, 2022
React-play: an open-source web app that helps you learn ReactJS faster with a hands-on practice model
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.

Jun 17, 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! ⚡

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

Jun 24, 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!

Jun 5, 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.

Nov 24, 2021
An Open Source MacOS Clone Built Using Preact
An Open Source MacOS Clone Built Using Preact

This open source project aims to replicate some of the Mac OS(Moneterey, at the time)'s desktop experience on web, using standard web technologies like HTML, CSS and JS

Jun 16, 2022
MusicWordle - An open source Wordle clone built with react.js

Wordle Clone Go play the real Wordle here Read the story behind it here Try a de

Apr 24, 2022
Papercups is an open source live customer chat web app written in Elixir
Papercups is an open source live customer chat web app written in Elixir

Papercups is an open source live customer chat web app written in Elixir

Jun 21, 2022
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.

Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.

Jun 21, 2022
A lightweight open source alternative to linktree, complete with Docker container that hosts your web server and code. Written in ReactJS SSR.
A lightweight open source alternative to linktree, complete with Docker container that hosts your web server and code.  Written in ReactJS SSR.

?? LittleLink-Server This project is based on the great work from littlelink It takes the same simple approach to a link page and hosts it within a No

Jun 19, 2022