top of page

Video Sharing App with React JS, TailwindCSS, RapidAPI, Firebase Hosting

Writer's picture: CODING Z2MCODING Z2M

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

19 views0 comments

Comments


Join us today and take the first step towards advancing your IT career!

More codingZ2M

Never miss an update

Thanks for submitting!

bottom of page