- I recreated this project with typescript and cleaner code HERE
The rise of Reaction Content gave me a great idea. I decided to create an app where livestreamers could watch online videos during a stream. A streamer can visit the site and share the generated URL link with their fans. The Fans can send videos to be watched by the livestreamer. Think of it as an online TV screen where you can share the remote with anyone on the internet.
-
Open the LinkitTV site and start a new session.
-
It Loads up an embedded youtube player.
-
After loading the player it generates an URL with an unique query string which you can share online.
-
People can you send youtube video links via the URL.
-
The embedded player starts playing the linked youtube videos.
-
Any additional linked videos are added to a queue and autoplayed.
-
Created with React & Node
-
Express used for creating the API.
-
Bodyparser Used for parsing HTTP request bodies.
-
NextJs React framework which serves prerendered web pages and renders all React components on the server. It allows combining frontend and backend into a single web project.
-
Socket.IO Used for real time bidirectional communication between the server and client. Allows the server to initiate communication with frontend client when certain events happen. Often used when building instant chat apps.
-
Youtube Iframe API I also needed to choose an embedded player which could play online videos. Youtube was the natural choice because of its popularity and massive video library. Google also has great Documentation. It took me a while to figure out how to get it working with React components.
-
Heroku The hardest part was hosting the project. NEXTJS has some major configuration issues with HEROKU but i eventually got it working.
Project Links