th3wall/fakeflix

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

Fakeflix

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

About · Demo · Features · Technologies · Screenshots · Run Locally · Requirements · License · Star history

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:

• Demo

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

• TMDb API's
• React
• React Hooks
• React Hooks Form
• React Router
• Redux
• Redux Thunk
• Redux Saga
• Redux Persist
• Redux Logger
• Reselect
• Firebase
• SCSS
• SwiperJS
• Framer Motion
• React Icons
• Netlify (have a look below) and Vercel for the deploy and CI.

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

Sign Up

Homepage

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

⭐ Star History

fakeflix's Issues

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

use Private Route

i would rather create a new component e.g Private Route and use it

Fakeflix/src/App.js

Line 58 in e4487d5

render={() => currentUser

No issue

Really nice work! The best Netflix clone I have seen.

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.

Search page results after hovering jumps on top each other

https://fakeflixapp.vercel.app/search?q=divi
Here,

maybe it should act like in homepage, where other images slides to both sides?

Friendly tip, don't upload your .env file to a public repo. Now your api keys and everything are exposed.

Delete it, add it to git ignore and also go and revoke all those keys.

The video in README.md isn't is a link instead of a video embed

How do I export Firebase Config

Forgive me for being silly, where does Firebase export configuration

Play movie located on server and stream it to the user?

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.

Netifly deployment not working

The deployment is marked as malicious by Google Chrome and clicking proceed opens a page saying "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 😃

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

Failed to get document because the client is offline

I am getting this error and not able to login or signup

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\node_modules@firebase\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'.

good job!

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.

How do I add video content and play it?

How do I add video content and play it?

Failed to compile

./src/components/Row/Row.jsx
Module not found: Can't resolve 'react-icons/all' in 'C:\Users\DaBoiCJ\Fakeflix\src\components\Row'```

Failed to get document because the client is offline

whenever i try to log in anonymously or with mail i get this message "Failed to get document because the client is offline" from firebase

Video playback

I'm wondering why not implement video playback? I can imagine it being cool for home theater use ^.^

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.

Oops added my email could you please delete?

Hey there nice app 🙂tried it out with my own email could you please delete?
Sorry for the inconvenience

Is there a way to remove the TMDB API?

I want to remove this API from TMDB and integrate the data that is collected from this API into the Firebase database, is there a way to do that?

Search query lost after focus

On https://fakeflixapp.vercel.app/search?q=divi
when you focus out of search bar query is gone

Redux toolkit

You can cut down quite a bit of your state management boilerplate by using the now recommended redux toolkit

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.

Why is the app slow?

I've been looking at this clone and I think it's very good but I don't know why it's slow, I don't know if it's the transitions or the compression of the images that are very large, could you help me improve the response of the UI