All Projects → Th3Wall → Fakeflix

Th3Wall / Fakeflix

Licence: MIT License
Not the usual clone that you can find on the web.

Programming Languages

184084 projects - #8 most used programming language
7915 projects
75241 projects

Projects that are alternatives of or similar to Fakeflix

Laravel React Boilerplate with Ant Design, Route-Level Code Splitting, Redux, Sanctum Auth
Stars: ✭ 49 (-98.89%)
Mutual labels:  react-router, redux-saga, react-hooks
React Interview Questions
300+ React Interview Questions
Stars: ✭ 151 (-96.59%)
Mutual labels:  react-router, redux-saga, redux-thunk
learning and practice redux,react-redux,redux-saga,redux-persist,redux-thunk and so on
Stars: ✭ 61 (-98.62%)
Mutual labels:  redux-saga, redux-thunk, redux-persist
A light weight interactive CLI Automation Tool 🛠️ for rapid scaffolding of tailored React apps with Create React App under the hood.
Stars: ✭ 73 (-98.35%)
Mutual labels:  react-router, redux-saga, react-hooks
Slopeninja Frontend
Slope Ninja Frontend 🏂❄️⛄️
Stars: ✭ 39 (-99.12%)
Mutual labels:  react-router, redux-thunk, redux-persist
Learning reactjs from the ground up (router, redux, thunk, hooks, context, portals, and functional components)
Stars: ✭ 15 (-99.66%)
Mutual labels:  react-router, redux-thunk, react-hooks
frontend data flow explored in React
Stars: ✭ 19 (-99.57%)
Mutual labels:  redux-saga, redux-thunk
Elixir/Phoenix + React + users template/boilerplate.
Stars: ✭ 71 (-98.4%)
Mutual labels:  react-router, redux-saga
A MERN stack e-commerce website.
Stars: ✭ 45 (-98.98%)
Mutual labels:  react-router, redux-thunk
一种较为舒适的数据状态管理书写方式,内部自动生成 action, 只需记住一个 action,可以修改任意的 state 值,方便简洁,释放你的 CV 键~
Stars: ✭ 48 (-98.92%)
Mutual labels:  redux-saga, redux-thunk
The rise of a new project with React, Redux-Saga and React-Router
Stars: ✭ 13 (-99.71%)
Mutual labels:  react-router, redux-saga
从真实项目中抽离出的一个简单的样板。(A simple boilerplate stripping out of a real project.)
Stars: ✭ 21 (-99.53%)
Mutual labels:  redux-saga, redux-persist
Fullstack React: The Complete Guide to ReactJS and Friends by Anthony Accomazzo
Stars: ✭ 100 (-97.74%)
Mutual labels:  react-router, react-hooks
🔥 ⚛️ A React boilerplate for a universal web app with a highly scalable, offline-first foundation and our focus on performance and best practices.
Stars: ✭ 40 (-99.1%)
Mutual labels:  react-router, react-hooks
📚 React 知识图谱 关于概念、技巧、生态、前沿、源码核心
Stars: ✭ 22 (-99.5%)
Mutual labels:  react-router, react-hooks
Online react workshops
Stars: ✭ 36 (-99.19%)
Mutual labels:  redux-saga, redux-thunk
⚛️ –  – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (-97.86%)
Mutual labels:  react-router, redux-saga
Production ready Wordpress theme built with React, Redux, Redux-Thunk, Intl, React Router v4, etc... and packaged by Webpack 2. Enjoy!
Stars: ✭ 14 (-99.68%)
Mutual labels:  react-router, redux-thunk
🍥 StarterKit Builder for rocket-speed App creation on 🚀 React 17 + 📙 Redux 4 + 🚠 Router 5 + 📪 Webpack 5 + 🎳 Babel 7 + 📜 TypeScript 4 + 🚔 Linters 23 + 🔥 HMR 3
Stars: ✭ 95 (-97.86%)
Mutual labels:  react-router, redux-saga
code for
Stars: ✭ 14 (-99.68%)
Mutual labels:  react-router, redux-saga


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

Image of Fakeflix Project


🎯 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 links:

Test credentials (for lazy users 😓)

Email: [email protected]
Password: FakeflixTest

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


✔️   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


Desktop Experience


👨🏻‍💻 Run Locally

  • Clone the project
  git clone
  • 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

  • Create a project inside Google Firebase and export the configuration

  • Add the configuration inside the .env file created previously

  • Start the server
  npm start


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

📝 License


Buy Me A Coffee

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].