paint-brush
Building a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React [Part-2]by@decodebuzzing
1,285 reads
1,285 reads

Building a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React [Part-2]

by HarshVardhan JainJune 24th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

An exact clone of youtube with all functionalities from View count to Subscribe to everything (Without Youtube Api) Using Firebase, FFmpeg, And React, and React, we will create the skeleton of the app from adding redux to adding all screens with dummy data and at last adding routes. This article will be shown in 5 parts as this is a large project and it will be pretty tricky to explain all things in 1 article also I don’t wanna make this article 1 hr long.

Company Mentioned

Mention Thumbnail
featured image - Building a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React [Part-2]
HarshVardhan Jain HackerNoon profile picture


An exact clone of youtube with all functionalities from View count to Subscribe to everything (Without Youtube Api) Using Firebase, FFmpeg, And React

Note:

This project will be shown in 5 parts as this is a large project and it will be pretty tricky to explain all things in 1 article also I don’t wanna make this article 1 hr long 🙂🙂. Also, this article is not for complete beginners. Just have a bit of knowledge about react and you should be able to hang along :)) And it’s not gonna be that difficult and I will try my best to explain all the things ;)



GitHub Code

The Github code has been uploaded here! You can check it out!

https://github.com/harsh317/Youtube-CLone-ReactJs




So, In this part, we will create the skeleton of the app from adding redux to adding all screens with dummy data and at last adding routes.


Now we can start oof oof. With that being said, Let’s get started !!




All packages We need

Node Packages we need :)

These are all the packages we will be needing, we will install them gradually too but you can take this screenshot as a reference


Creating a Basic app and getting started

Ok now, let’s quickly let’s get started! Just create a new react App and run it first


npx create-react-app my-app
cd my-app
npm start


Hmm, we have a starting point now :))


Adding Redux to Our App

In the src folder of your app, just create a “Store” folder and further create 2 folders


  • Actions
  • Reducers

Something like this with the following files:


Redux files


Our “Videos” Reducers

these will be the initial state of our videos.js reducer


const initialState = {
  availableVideos: [],
  UserVidoes: [],
  relatedVids: [],
  SearchVids: [],
  Suscribers: [],
  video: null,
  VideoOwnerDetails: null,
};

export default (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};


Our “Auth” Reducers

these will be the initial state of our Auth.js reducer



import { SET_UserDetails } from "../actions/Auth";

const initialState = {
  userInfo: null,
};

export default (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};


Now just install redux using the following command 😳😳😳


Too lazy ikikik

Editing App.js and Finishing Redux (For Now)

import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";

import Homescreen from "./Screens/Homescreen/Homescreen";//              |
import PagenotFound from "./Screens/PageNotFound/PagenotFound";//        |
import ForgotPassword from "./Screens/ForgotPassword/ForgotPassword";//  |
import UserActions from "./Screens/UserActions/UserActions";//           |
import Upload from "./Screens/Upload/Uplaod";//                          | Some screens with dummy data (FOR NOW)
import WatchScreen from "./Screens/WatchScreen/WatchScreen";//           |
import SearchScreen from "./Screens/SearchScreen/SearchScreen";//        |
import Subscriptions from "./Screens/subscriptions/subscriptions";//     |
import ChannelScreen from "./Screens/channelScreen/ChannelScreen";//     |
import EditVideo from "./Screens/EditVideoScreen/EditVideo";//           |

import VideosReducer from "./Store/reducers/Videos"; // Import all Reducers
import AuthReducer from "./Store/reducers/Auth";

const RootReducer = combineReducers({ // Combine our store to 1 big new store
  Vidoes: VideosReducer,
  auth: AuthReducer,
});

const store = createStore(RootReducer, applyMiddleware(ReduxThunk)); // Creates a Redux store that holds the complete state tree of your app


function App() {
  return (
    <Provider store={store}>
        <div className="App">
        </div>
    </Provider>
  );
}

export default App;


In the above screens, we also imported some screens right? So, let’s create those screens and add some dummy data to it!

Creating Dummy Screens

So in the src folder create a “Screens folder” and create the following folders in it with the following files.


You can see come SASS files (.scss ) files. If you haven’t heard of sass here is some basic info from w3schools


Sass stands for Syntactically Awesome Stylesheet

Sass is an extension to CSS

Sass is a CSS pre-processor

Sass is completely compatible with all versions of CSS

Sass reduces repetition of CSS and therefore saves time

Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006

Sass is free to download and use


It’s not that complicated but I will try to explain the sass files as we code along :)


Adding Some Basic Dummy Data

Now just add some basic dummy data to all the screens we have as below. We will edit the code as we start implementing the various functionality

Basic Js File

Just add some basic code to all the screens. Remember to change the component name and export per file



import React from "react";

const PagenotFound = () => { // Change here the Name accordingly
  return (
    <div>
      <h1>Page Not Found</h1>
      {/* Chnage here accordingly too */}
    </div>
  );
};

export default PagenotFound; // bruh Chnage here accordingly too


For example, I added this basic code to my Page Not Found screen


You do the same to all the screens. Just leave the sass files empty for now

Basic sass file

Just leave the sass files empty for now. We will fill it gradually

Adding Routes

Now it’s time to add all the routes. We have prepared our Screens and have added some basic data to them. Why not creates some routes too? Moreover, by adding routes, we are only creating the skeleton of the app.

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "react-notifications/lib/notifications.css";
import { NotificationContainer } from "react-notifications";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";

import Homescreen from "./Screens/Homescreen/Homescreen"; //              |
import PagenotFound from "./Screens/PageNotFound/PagenotFound"; //        |
import ForgotPassword from "./Screens/ForgotPassword/ForgotPassword"; //  |
import UserActions from "./Screens/UserActions/UserActions"; //           |
import Upload from "./Screens/Upload/Uplaod"; //                          | Some screens with dummy data (FOR NOW)
import WatchScreen from "./Screens/WatchScreen/WatchScreen"; //           |
import SearchScreen from "./Screens/SearchScreen/SearchScreen"; //        |
import Subscriptions from "./Screens/subscriptions/subscriptions"; //     |
import ChannelScreen from "./Screens/channelScreen/ChannelScreen"; //     |
import EditVideo from "./Screens/EditVideoScreen/EditVideo"; //           |

import VideosReducer from "./Store/reducers/Videos"; // Import all Reducers
import AuthReducer from "./Store/reducers/Auth";

const RootReducer = combineReducers({
  Vidoes: VideosReducer,
  auth: AuthReducer,
});

const store = createStore(RootReducer, applyMiddleware(ReduxThunk));

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Routes>
            <Route
              path="/"
              element={
                <Layout>
                  <Homescreen />
                </Layout>
              }
            />
            <Route path="/login" element={<Login />} />
            <Route
              path="/search/:query"
              element={
                <Layout>
                  <SearchScreen />
                </Layout>
              }
            />
            <Route path="/forgot-password" element={<ForgotPassword />} />
            <Route path="/UserActions" element={<UserActions />} />
            <Route
              path="/Upload"
              element={
                <Layout>
                  <Upload />
                </Layout>
              }
            />
            <Route
              path="/watch/:id"
              element={
                <Layout>
                  <WatchScreen />
                </Layout>
              }
            />
            <Route
              path="/channel/:channelId"
              element={
                <Layout>
                  <ChannelScreen />
                </Layout>
              }
            />
            <Route
              path="/EditVideo/:id"
              element={
                <Layout>
                  <EditVideo />
                </Layout>
              }
            />
            <Route
              path="/feed/subscriptions"
              element={
                <Layout>
                  <Subscriptions />
                </Layout>
              }
            />
            <Route path="*" element={<PagenotFound />} />
          </Routes>
        </Router>
        <NotificationContainer />
      </div>
    </Provider>
  );
}

export default App;


With that, we have added routes to our App! Now I think I will end this part with it. In the next part, we will add a couple of features from ProtectedRoute to firebase and further using a context API :)


I hope you like this part and I will be back with another part soon! Till then


Till then stay safe, stay healthy


Thank you