Build Your Own Video Streaming Platform - It's Easier Than You Might Think

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn how to build a video streaming platform using HTML, CSS, and Next.js in this comprehensive tutorial. Discover the process of creating a video streaming website, including setting up a Next.js project, integrating Tailwind CSS, and developing key components such as a navbar and video upload module. Explore how to leverage Linode Object Storage for storing and streaming videos directly from the bucket to the browser. Follow step-by-step instructions on creating APIs, implementing file uploaders, and building a functional video player. Gain insights into using ChatGPT for coding assistance, connecting front-end components to APIs, and optimizing the user interface. By the end of this tutorial, you'll have the skills to create your own video streaming platform with features like video uploads, browsing, and playback.

Syllabus

What We'll Be Doing In This Video
Create next.js project
Add Tailwind CSS to next.js project
Create navbar component
Use chatGPT to code navbar
Build navbar foundation
Convert code from ChatGPT to React Code
Remove ChatGPT Code
Change navbar text
Create watch.js
Create Video Upload Module
Create File Upload Tag
Create Watch Videos Module
Create Object Storage Bucket at Linode
Create React File Uploader
Create API
Test API
Install Formidable and S3-SDK
Build upload.js
Disable bodyparser in next.js
Utilize Formidable to Parse Forms
QA upload.js
Create list.js
Connect to the Front End
Populate Watch Page with Video Cards
Connect Upload Page to API
Fix Upload Max File Size
DisplayUploaded Videos on Watch Page
Create Player on Watch Page
Upload and Test Player
Change Download Button to Icon
Conclusion