top of page

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

Writer's picture: CODING Z2MCODING Z2M

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


bottom of page