\
**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](https://github.com/harsh317/Youtube-CLone-ReactJs)__! You can check it out!

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

\

---

\
**S**o, 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.

\
 ![](https://cdn.hackernoon.com/images/-4fd3nkn.gif.webp)

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

\

***

\
## **All packages We need**

 ![Node Packages we need :)](https://cdn.hackernoon.com/images/-8ve3n5l.png)

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** \n 

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

\
```javascript
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](https://cdn.hackernoon.com/images/-7rg3ngb.png)

\
## Our “Videos” Reducers

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

\
```javascript
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

\
```javascript

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](https://cdn.hackernoon.com/images/-hvh3n4k.png)

## Editing App.js and Finishing Redux (For Now)

```javascript
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.

\
 ![](https://cdn.hackernoon.com/images/-jji3nqm.png)

You can see come SASS files (`.scss` ) files. If you haven’t heard of sass here is some basic info from __[w3schools](https://www.w3schools.com/sass/sass_intro.php)__

\
> ***Sass*** *stands for **S**yntactically **A**wesome **S**tyle**s**heet*
>
> *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**

\
```javascript

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

\
 ![](https://cdn.hackernoon.com/images/-kzj3n83.png)

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.

 ![](https://cdn.hackernoon.com/images/-15l3niu.png)

```javascript
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**

YouTube

2022 - HackerNoon Contributor of the Year - Firebase

2022 - HackerNoon Contributor of the Year - Mobile

2022 - HackerNoon Contributor of the Year - React

2022 - HackerNoon Contributor of the Year - Redux

2022 - No No No Nodejs

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Mobile

Nominated for 2022 - HackerNoon Contributor of the Year - Redux

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

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

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

Too Long; Didn't Read

Company Mentioned

@decodebuzzing

RELATED STORIES