Build Youtube in React 01: Project Kickoff
Today we’re going to announce the start of a new tutorial series on this blog. We are going to build a Youtube-like application in React. It will leverage the Youtube data API v3 and will be fairly sophisticated.
Just have a look at this demo video so you know what you’re getting yourself into and so you can decide for yourself whether it’s worth following along.
2 Used technologies
React (create-react-app 2.x)
SCSS (lots of Flexbox and CSS Grid)
Semantic UI(only a few components)
The goal of this series is to demonstrate how to orchestrate all these different technologies to create a sophisticated application that can be run in production. This is ideal if you’re fed up with life changing weather apps and want to understand how stuff really works..
Please check the above video out to see what we will implement
3.1. Responsive Home feed
We will implement a responsive
Home feed that will display the most popular videos on Youtube. In addition, we will show trending videos for all the available
video categories. The
Home feed uses an infinite scroll mechanism to reload new videos once the user has scrolled to the bottom. The video previews, its thumbnails and metadata look exactly like the ones in the original application.
Click on the image to see it in high resolution.
3.2. Watching videos component
If the user clicks on any of the video thumbnails in the Home feed, he/she gets redirected to the
watch video component. In here, the user can watch the
video, see a list of
related videos, read through the video description, check out the amount of likes and dislikes and read through all the comments. The comments have an
infinite scroll feature as well. So as the user scrolls to the bottom of the page, more comments are loaded.
3.3. Displaying trending videos
When the user clicks on trending on the left sidebar, the app shows a list with the most popular videos on
Youtube. This list has an infinite scroll functionality as well. So as the user scrolls down to the bottom of the page, more videos are fetched and displayed.
3.4. Searching for videos
The user can search for video with specific content by entering an arbitrary search query in top
search bar. As before the resulting lists comes with an infinite scrolling feature out of the box.
4 Source Code
You can find the entire source code on our youtube-react repo on Github.
5 One last thing
This series is intended for educational purposes and is created under fair use. It is not intended to create some kind of
Youtube competitor, but to teach advanced concepts in frontend development. Just see it a nice educational project that will help you to improve your coding skills.
Also bear in mind that this is probably one of the comprehensive and complex tutorials you can find about advanced frontend development. I will be honest with you: building this functionality requires a lot of code and effort. So if you are not the kind of person who finishes what you’ve started, then this tutorial is not for you.
In addition, I’d like to point out that this is not a beginner tutorial. I assume that you have basic knowledge of
If you’re sold and interested, please follow me on Twitter @productioncoder to stay up-to-date. I’d also appreciate if you share this tutorial series with a few friends who might be interested as well 🤓.
Wanna have more high quality, production ready content? Please enter your email below. I won’t send you any spam. I promise.