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

Google

YouTube

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

How to Build a Full Stack Zoom Clone Using Node JS, Express, and Peer JS

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 a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React. Part 1

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Benchmarking ChatGPT, Qwen, and DeepSeek on Real-World AI Tasks

An Intro to Colorspaces and FFmpeg with InVideo

My Experience with FFmpeg on Android

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

Benchmarking ChatGPT, Qwen, and DeepSeek on Real-World AI Tasks

An Intro to Colorspaces and FFmpeg with InVideo

My Experience with FFmpeg on Android

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps