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 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 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 ;) shown in 5 parts is not for beginners. complete GitHub Code The Github code has been uploaded ! You can check it out! here https://github.com/harsh317/Youtube-CLone-ReactJs 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. S 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 folder of your app, just create a “Store” folder and further create 2 folders src Actions Reducers Something like this with the following files: Our “Videos” Reducers these will be the initial state of our reducer videos.js 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 reducer Auth.js 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 So, let’s create those screens and add some dummy data to it! right? Creating Dummy Screens So in the src folder create a ” and create the following folders in it with the following files. “Screens folder You can see come SASS files ( ) files. If you haven’t heard of sass here is some basic info from .scss w3schools Sass stands for yntactically wesome tyle heet S A S s 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 we have as below. We will edit the code as we start implementing the various functionality all the screens 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 We will fill it gradually Just leave the sass files empty for now. 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 to firebase and further using a context API :) ProtectedRoute 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

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

Build a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React. Part 1

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