Building mobile first, responsive Netflix clone with React, Redux, Tailwind CSS, Login & Logout functionality with Google Firebase Authentication(Email/Password & Google Sign-in providers), Firestore, Deploying the app into Firebase Hosting, Accessing Movie Database API from TMDB, Building a complete Stripe Payments Checkout Flow. Source Code
Using Google Fonts
Create a React Redux App with Redux Toolkit for shared state management. Storing User's Authentication state in Redux Store by writing Redux logic with Redux Toolkit.
Passing Data Through 'Props', Managing React Functional Component State with useState and other Hooks such as useParams, useEffect, useDispatch, useSelector
Managing and updating application state in a centralized store that needs to be used across your entire application
Styling React components(UI) with Tailwindcss
Using React Router - Configuring Routes, Navigating with Link, Navigating programmatically, Reading URL params
Production-Grade Hosting with Firebase
Getting Started with Redux Toolkit Downloads & Libraries: Installing tailwind-styled-components > npm i tailwind-styled-components Tailwind CSS Installing Tailwind CSS & Configuration with React React Icons >npm i react-icons React RouterRead More > npm install react-router-dom@6 Note: Import 'BrowserRouter' in index.js and wrap the 'App' component with 'BrowserRouter' Installing Firebase 9: > npm install firebase > npm install -g firebase-tools Installing Promise based HTTP Client Axios > npm install axios Installing tailwind-scrollbar-hide > npm install tailwind-scrollbar-hide Then add the plugin to your tailwind.config.js file as shown below.plugins: [ require('tailwind-scrollbar-hide') ],
Plugins: ES7 React/Redux/GraphQL/React-Native snippets Tailwind CSS IntelliSense Using Redux Toolkit Redux - State Container for JS Apps Note: Check out index.js, where 'App' is wrapped with redux 'store' using 'Provider', after creating the 'store' Deploying into Firebase: What is Cloud Firestore? Firebase Documentation Firebase Hosting: FIREBASE AUTHENTICATION (Login) Creating a Project and an App in Firebase - Register app (Add Firebase to your web app)
Note: While creating an App, choose Firebase Hosting option & Copy the Firebase configuration object by choosing the "Config" option under SDK setup and configuration. Paste Firebase configuration object in the 'firebase.js' of your React project.
Enabling Google Firebase Authentication:
Go to Authentication and enable "Email/Password" & Google options
Deploy to Firebase Hosting, run the following Firebase commands: > firebase login > firebase init hosting - use 'build' as public directory when you are prompted. - Give 'Y' for configure as a single-page app option Note: If you are not able to find out your listed firebase projects, after selecting the 'firebase hosting' option, just run "firebase logout" and login again.
Creating an optimized production build: Builds the app for production to the build folder. > npm run build > firebase deploy --only hosting
Comments