Learn how to build a custom video streaming site using React.js in this comprehensive 43-minute tutorial. Explore the process of creating a server-side Node.js application for video management and a client-side React application for video consumption. Follow step-by-step instructions to set up the project, implement key components, and integrate essential features such as video streaming, thumbnail generation, and caption support. Gain hands-on experience with React Router, Bootstrap, and FFMPEG while developing a functional video streaming platform with both listing and player views. By the end of this tutorial, you'll have the skills to create your own video streaming service from scratch.
Create Your Own Video Streaming Site by Creating a Custom React.js App
Overview
Syllabus
Introduction
Prerequisites
Create App Directories
Run npm init
Install Dependencies
Create the Assets Directory
Download the Assets from Github
Add the First Video to Assets
Create app.js
Testing the App in Dev
Begin Work on the Frontend
Start the React App
What’s Next?
Implement Bootstrap
Install react-router-dom
Create the Home View
Running Through home.js
Create the Player View
Running Through player.js
Make Adjustments to app.js
Tie Frontend Requests to the Server
Tie Videos to the Frontend
Create Video Thumbnails
Dynamically Serve Videos in Chunks
Quick Recap
Install FFMPEG
Adding Captions
Create A Caption Endpoint
Style Our App
Create Header and Footer Components
Conclusion
Taught by
Linode
