🎬 I Built a YouTube Clone

#webdev #programming #javascript #socialmedia

React. TypeScript. Next.js. Tailwind. Framer Motion.

Hey fellow devs! 👋

I recently embarked on a wild ride: building a YouTube clone from scratch for my portfolio. Why? Because watching YouTube wasn’t enough. I wanted to become YouTube (minus the billion-dollar budget and the legal team).

Here’s how I did it, what I learned, and how many times I yelled “why is this not working?!” into the void.

Github Repository - https://github.com/SoorajSNBlaze333/youtube-video-view

Live App - https://y-video-clone-two.vercel.app

🚀 Week 1 - The “Optimism” Phase

Ah, Week 1. Back when I thought this would be easy.

📝 Tech Stack I used:

React (because I’m not a monster)
TypeScript (because I love suffering with strict types)
Next.js (SSR, baby!)
Tailwind CSS (utility classes = sanity)
Framer Motion (because even my modals deserve personality)

💪🏻 What I tackled:

Creating a responsive layout.
Main video feed and the different sections.
Making it look vaguely like YouTube without getting sued.

🏆 Win of the week: Made my first video card component. It looked suspiciously good. I stared at it for 10 minutes like Michelangelo looking at David.

💩 Fail of the week: I used div soup everywhere. Refactored it all the next day. RIP productivity.

🎥 Week 2 – The “Feature Frenzy” Arc

This is the week when I stopped thinking, “Maybe I’ll finish early,” and started thinking, “What have I done?”

🧱 What I built:

A complete backend (psst I just used Next's api mocks to simulate a backend that sends me all the info I need. You name it video data, channel data, shorts data and even the current video as a stream).
The Shorts section – Yes, I cloned TikTok inside my YouTube clone. It scrolls vertically, it auto-plays, and it probably gives off Gen-Z energy.
The video list section – Think “related videos,” “recommended,” and “clickbait paradise.”
Video metadata display – Views, likes, channel name, upload date, and that dangerously addictive “Subscribe” button (which, spoiler alert, doesn’t do anything… yet).

🎯 Win of the week:

I used Framer Motion to add slick transitions between sections.

😵‍💫 Moment of pain:

“Why is this video taking up 100% of the screen on mobile?”

– Me, to no one, at 2AM

🧪 Week 3 – Polish, Deploy, and Full-On Control Freak

This week, things got serious. Not only was I chasing pixel-perfection like a caffeine-powered UI goblin, but I also dove deep into custom media control territory.

🎮 What I built:

A full custom video player UI – Sure, I used ReactPlayer to handle video playback (because reinventing H.264 is not on my bucket list), but every single control — play/pause, volume, full screen, the scrubber/slider, and even the time duration display — was built from scratch.
Yes, I coded the slider. Yes, it made me question my life choices. Yes, it looks amazing now.
Responsive polish – No matter what screen size you throw at it, the layout now behaves like a disciplined flex-box ninja.
Animations, again! – Subtle transitions for the player controls using Framer Motion. They fade in/out based on hover/focus. It’s like Netflix, but with more love and less licensing.

🧯 Panic moments:

“Why is my custom slider controlling the volume instead of the timeline?”

– Me, after 30 minutes of fighting state like it owed me money

🎉 Deployed to Vercel:

At the end of the week, I pushed everything to Vercel and just… stared at it. Not gonna lie, I hit play on my own video and watched it for 10 minutes like it was a Hollywood premiere.

🧠 What I Learned (besides the limits of my sanity)

Next.js + Tailwind = 💖: I would swipe right on this combo any day.
TypeScript saves you later, haunts you now. The autocomplete was amazing though.
Animations make a huge difference. A 300ms transition can make your app feel chef-level.
Mock data is your best friend. Until you replace it with real data and everything breaks.