Video Sharing App with React JS, TailwindCSS, RapidAPI, Firebase Hosting
Updated: Mar 25, 2023
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 RapiAPI. Getting Started with Redux Toolkit Run: > npm start
Downloads & Libraries: 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 Promise based HTTP Client Axios > npm install axios
Installing Firebase 9:
> npm install firebase
> npm install -g firebase-tools
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
RapidAPI Client
npm intellisense
Data Fetching from RapidAPI
Note: Choose 'Youtube v3' API and subcribe
Copy the code snippets under for "(Node.js) Axios" under "Suggested Videos" category and add it into your 'videosFromAPI.js' file inside 'utils' folder.
//Create .env file and add your API KEY
Comments