Build Youtube in React part 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.
React (create-react-app 2.x)ReduxRedux-reselectRedux-sagaSCSS (lots of Flexbox and CSS Grid)Semantic UI(only a few components)JestEnzyme
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.
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.
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 🤓.
Originally published at productioncoder.com on January 21, 2019.
