https://github.com/Th3Wall/Fakeflix Skip to content Sign up * Why GitHub? Features - + Mobile - + Actions - + Codespaces - + Packages - + Security - + Code review - + Issues - + Integrations - + GitHub Sponsors - + Customer stories- * Team * Enterprise * Explore + Explore GitHub - Learn and contribute + Topics - + Collections - + Trending - + Learning Lab - + Open source guides - Connect with others + The ReadME Project - + Events - + Community forum - + GitHub Education - + GitHub Stars program - * Marketplace * Pricing Plans - + Compare plans - + Contact Sales - + Education - [ ] [search-key] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} Th3Wall / Fakeflix * Sponsor Sponsor Th3Wall/Fakeflix * Notifications * Star 2.5k * Fork 200 Not the usual clone that you can find on the web. fakeflix-clone.netlify.app/ MIT License 2.5k stars 200 forks Star Notifications * Code * Issues 3 * Pull requests 1 * Actions * Projects 0 * Wiki * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Wiki * Security * Insights main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 1 branch 0 tags Code Clone HTTPS GitHub CLI [https://github.com/T] Use Git or checkout with SVN using the web URL. [gh repo clone Th3Wal] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching Xcode If nothing happens, download Xcode and try again. Go back Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @Th3Wall Th3Wall Added google site verification tag ... 1 e4487d5 Jul 9, 2021 Added google site verification tag e4487d5 1 Git stats * 276 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .github Create FUNDING.yml Jun 30, 2021 public Added google site verification tag Jul 9, 2021 src Added anonymous sign in for demo purposes Jul 5, 2021 .env.sample Removed .env file and added .env sample file Jun 30, 2021 .eslintrc Removed homepage reducer, added utils file inside Homepage for rows c... Mar 14, 2021 .gitignore Removed .env file and added .env sample file Jun 30, 2021 LICENSE Added MIT License Jun 5, 2021 README.md Removed Vercel demo link Jul 8, 2021 netlify.toml Added netlify.toml including routing fix for Netlify May 21, 2021 package-lock.json removed ignore on .env file for forkers Jun 22, 2021 package.json Added Framer Motion and added it to DetailModal May 17, 2021 View code Fakeflix Not the usual clone that you can find on the web. About >[?] Demo Test credentials (for lazy users ) Features Technologies Netlify deploy & configuration Deploy configuration steps Screenshots Run Locally Requirements License README.md 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: * Netlify Test credentials (for lazy users ) Email: fakeflixuser@test.com 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. 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 About Not the usual clone that you can find on the web. fakeflix-clone.netlify.app/ Topics react redux firebase react-router redux-saga redux-thunk redux-persist react-hooks react-hooks-form Resources Readme License MIT License Sponsor this project * ko_fi ko-fi.com/davidemandelli Contributors 2 * @Th3Wall Th3Wall Davide Mandelli * @sportmatic sportmatic Languages * JavaScript 68.4% * SCSS 30.8% * HTML 0.8% * (c) 2021 GitHub, Inc. * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.