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

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. ? See it on Your own Don’t believe me https://youtu.be/5PrkNg5yIu0 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: Animation And Ui ( ) For eg You can pass a property in your Component something like this on any page you want: And Good Authentication System Forgot password, Reset Password, Email Verification System emailVerified ProtectedRoute . 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: (You can Search Videos on the header based on a video’s title (Not tags) ) Search Functionality (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…) Get Related Videos Based On Tags (Make Your video Public or Private (You can edit it later too) ) Publicity Functionality (quite self-explanatory bruh) Subscribe Your Favorite Creator and Like/Dislike and Comment Functionality (Only a video owner can edit his video and change the visibility or other things of videos) A Video Owner Can edit his Video (After Uploading Video, The app automatically generated thumbnails for your video, and the thumbnails and videos are stored in your server like this: ) Generate Thumbnails For Your video Using FFmpeg (I pretty much wasted a whole day on making good firebase rules but at last it was worthy) Strong and some advanced Firebases Rules 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