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