Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Hey fellow devs! ?
I recently embarked on a wild ride: building a YouTube clone from scratch. 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 -
Live 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)
- 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 –
, 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).
- I used Framer Motion to add slick transitions between sections.
“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.
- , I coded the slider. , it made me question my life choices. , 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.
“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.
Maybe I’ll add:
- Search functionality
- Real backend integration (Firebase? Supabase? Skynet?)
Or maybe I’ll just watch actual YouTube for a bit and chill.
“Ever built a YouTube clone or something wildly overambitious just for fun? Tell me about it ?”