Build Youtube in React 01: Project Kickoff

1 Overview

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)
• Redux
• Redux-reselect
• Redux-saga
• SCSS (lots of Flexbox and CSS Grid)
• Semantic UI (only a few components)
• Jest
• Enzyme

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..

3 Features

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.

If – for whatever reason – the source code on Github is not consistent with the code snippet shown here, please go with the source code on Github. The code is the truth.

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 React, Redux, Javascript and CSS.

Follow @productioncoder

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.