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

First of all, I would like to say sorry for my writing inconsistency. My channel has been dead for a year now but the fact that I still had been getting views until I checked today made me realize. So, yeah Here I am back again :) with some really cool projects that I made during the last 1 year. I hope To get support back again

Now let’s come for what you guys have come for :)) It’s my summer vacation and I devoted a much longer time completing this project with all the functionalities which I planned to add. Not to be joking, This Project contains tons of features. Don’t believe me? See it on Your own

As seen from the video, You Can probably tell that UI is not too bad too, In the project I tried to focus on every part (as it was my 1st coding project after a long time). I made the app fully responsive, Animations can be seen, And Here are the additional features I forgor to tell in the video:

1. Animation And Ui

   
   

2. And Good Authentication System (Forgot password, Reset Password, Email Verification System) For eg You can pass a emailVerified property in your ProtectedRoute Component something like this on any page you want:

   
   

3. View Count System Based On your Ip

Views are counted per 1 IP. So, that doesn’t result in an extra view when you refresh Your page. You can use any library/api to get Ip but I am using the following Api:

4. Search Functionality (You can Search Videos on the header based on a video’s title (Not tags) )

   
   

5. Get Related Videos Based On Tags(The Related Side videos on the watch screen and on the home screen are fetched based on the tags you upload when you upload a video…)

   
   

6. Publicity Functionality (Make Your video Public or Private (You can edit it later too) )

   
   

7. Subscribe Your Favorite Creator and Like/Dislike and Comment Functionality (quite self-explanatory bruh)

   
   

8. A Video Owner Can edit his Video (Only a video owner can edit his video and change the visibility or other things of videos)

   
   

9. Generate Thumbnails For Your video Using FFmpeg (After Uploading Video, The app automatically generated thumbnails for your video, and the thumbnails and videos are stored in your server like this: )

   
   

   
   

   

   
   

10. Strong and some advanced Firebases Rules (I pretty much wasted a whole day on making good firebase rules but at last it was worthy)

    
    

I hope this project is exciting for you as much as it is exciting me rn. And as always it’s gonna be a project in parts and I promise to post an article per week (On Saturday/Sunday). But besides that I have various projects aligned to show you all from an SOS react native App to your Own Game to much more. And not gonna Lie, these projects gonna be fun and full of learning

So,

I think to let’s continue from the next article setting up our project and go on till the end of making this project. For those ones who are curious to know the project and file structure, here are these :)

File Structure

Bruh Lmao these are too many files not even coming on 1 screen

Firestore Videos Collection Structure

{
"data": {
"GVSA4od75f5BOq2CfmBK": {
"Categories": ["Ballcat", "Cats", "#meme"],
"Userpfp": "https://lh3.googleusercontent.com/a-/AOh14Gg6y6DrYdtYNYl-p_6eV3OyUAARBD0J4H4bTgML=s96-c",
"Usersname": "harshvardhan jain",
"comments": [
{
"Comment": "Good video",
"VideoId": "GVSA4od75f5BOq2CfmBK",
"name": "harshvardhan jain",
"timestamp": {
"__datatype__": "timestamp",
"value": "2022-06-13T09:58:16.376Z"
},
"userId": "EK9nslWIRFgwjnhPuFS9GnPgMQN2",
"userPfp": "https://lh3.googleusercontent.com/a-/AOh14Gg6y6DrYdtYNYl-p_6eV3OyUAARBD0J4H4bTgML=s96-c"
}
],
"descriptions": "This is how you make slime....I am gonna right a long description for testing, so you have to cope.......Me trying my best to make it long but still short aaaaaaaa GOD help me.....Should i just copy paste some dummy text? hmmmm SUS aaaaaaaaa",
"dislikes": [],
"duration": 14.84,
"filePath": "Uploads\\file-1655114264218-cute_cat_relax_on_outdoor_ground_6892533.mp4",
"likes": ["EK9nslWIRFgwjnhPuFS9GnPgMQN2"],
"ownerId": "EK9nslWIRFgwjnhPuFS9GnPgMQN2",
"publicity": "Public",
"thumbnail": "http://localhost:5000/Uploads/thumbnails/thumbnail-file-1655114264218-cute_cat_relax_on_outdoor_ground_6892533.png",
"timestamp": {
"__datatype__": "timestamp",
"value": "2022-06-13T09:57:45.800Z"
},
"title": "This Is How Cat Relax Uwu",
"views": ["122.173.27.25"],
"__collections__": {}
},
"UAge5Pgww7Z1vWsYro4l": {
"Categories": ["Tankster.io", "Online games", "#gaming"],
"Userpfp": "https://lh3.googleusercontent.com/a-/AOh14Gg6y6DrYdtYNYl-p_6eV3OyUAARBD0J4H4bTgML=s96-c",
"Usersname": "harshvardhan jain",
"comments": [
{
"Comment": "A comment from new user",
"VideoId": "UAge5Pgww7Z1vWsYro4l",
"name": "A NEW USER",
"timestamp": {
"__datatype__": "timestamp",
"value": "2022-06-13T03:47:49.003Z"
},
"userId": "MmQFFNPBNgW2BNiHH1oJYxas1F82",
"userPfp": "https://cdn-icons-png.flaticon.com/512/149/149071.png"
}
],
"descriptions": "Tankster.io A pretty nice game that I found online !! It's discord is good place Yea changed description",
"dislikes": [],
"duration": 34.835,
"filePath": "Uploads\\file-1655053918168-Tankster.io - Google Chrome 2022-05-15 21-59-05 (online-video-cutter.com).mp4",
"likes": ["EK9nslWIRFgwjnhPuFS9GnPgMQN2", "MmQFFNPBNgW2BNiHH1oJYxas1F82"],
"ownerId": "EK9nslWIRFgwjnhPuFS9GnPgMQN2",
"publicity": "Public",
"thumbnail": "http://localhost:5000/Uploads\\thumbnails\\file-1655114375973-Screenshot 2022-03-02 165903.png",
"timestamp": {
"__datatype__": "timestamp",
"value": "2022-06-12T17:12:00.247Z"
},
"title": "Tankster.io An Online Game pretty nice Game",
"views": ["122.173.31.158", "122.173.27.25"],
"__collections__": {}
}
}
}

With That, I think we come to the end of our article. But the next article is not too far ;) Hope to See you guys excited and we’ll meet you in the next part

Till then stay safe, stay healthy

Thank you

Also Published here