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

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

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:

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

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