Super fun to build!
Make sure you have git
and npm
installed.
- Clone the repository
- In the root directory of the repository, install dependencies with
npm i
- Run the server with
npm run dev
, or installnodemon
as a dev dependency and run the server with auto-update functionality usingnodemon run dev
- In a separate terminal, start the client with
npm start
- Head over to
localhost:3000
and create a session. If you have a validsessionId
, you may join an existing session atlocalhost:3000/watch/:sessionId
- Creating a session. Any user should be able to create a session to watch a given Youtube video.
- Joining a session. Any user should be able to join a session created by another user using the shareable session link.
- Playing/pausing the video. When a participant pauses the video, it should pause for everyone. When a participant plays the video, it should start playing for everyone.
- “Seek”. When someone jumps to a certain time in the video it should jump to that time for everyone.
- Late to the party... Everything should stay synced even if a user joins the watch party late (e.g. the video is already playing)
- Player controls. All the player controls (e.g. play, pause, and seek) should be intuitive and behave as expected. For play, pause & seek operations you can use the built-in YouTube controls or disable the YouTube controls and build your own UI (including a slider for the seek operation)
- Realtime Switching. When a session user switches the session to a different youtube video, it will update for everyone.
This solution can be improved upon in many ways:
- Concurrency calibration to minimize differences between video timestamps of all users in a session, over extended periods of time. Think distributed systems protocols.
- Upon joining an existing session, retrieving timestamp info from session users and joining in at the timestamp that minimizes the issue of being too ahead of/behind the group. Currently, it joins in at the last recorded time in the DB, which can be off if there's been no user action for some time. Did not get to this because of time.
- Handling video seeking with arrow-keys. Currently, using arrow-keys to seek will break synchronization across users in a given session.
- Error-handling with socket functionality on server and client sides.
- Rate-limiting to prevent overloading socket.io connections.
- Validating inputs to API call and POST endpoint.
- Validating inputs to socket events.
- General logging for more visibility.
- Formatting and stylistic choices
- Documentation
- Cleaner repository structure