Nooks Watch Party Project

In this takehome project, we want to understand your:

• ability to build something non-trivial from scratch
• comfort picking up unfamiliar technologies
• architectural decisions, abstractions, and rigor

We want to respect your time, so please try not to spend more than 5 hours on this. We know that this is a challenging task & you are under time pressure and will keep that in mind when evaluating your solution.

Instructions

To run the frontend cd to site and simply "npm i" and then "npm start" To run the backend cd to server and simply "npm i" and then "npm start"

Problem

Your task is to build a collaborative “Watch Party” app that lets a distributed group of users watch youtube videos together. The frontend should be written in Typescript (we have a skeleton for you set up) and the backend should be written in Node.JS. The app should support two main pages:

• /create Create a new session

  • by giving it a name and a youtube video link. After creating a session ABC, you should be automatically redirected to the page /watch page for that session

• /watch/:sessionId Join an existing session

  ⚠️ The player must be synced for all users at all times no matter when they join the party

  • Playing/pausing/seek the video. When someone plays/pauses the video or jumps to a certain time in the video, this should update for everyone in the session
  • Realtime Switching the video. When someone switches the session to a different youtube video, this should update for everyone
  • Late to the party... Everything should stay synced if a user joins the session late (e.g. if the video was already playing, the new user should see it playing at the correct time)

Assumptions

• This app obviously doesn’t need to be production-ready, but you should at least be aware of any issues you may encounter in more real-world scenarios.
• We gave you all of the frontend UX you’ll need in the starter repo, including skeleton pages for the create and watch routes, so you can focus on implementing the core backend functionality & frontend video playing logic for the app.
• You should probably use websockets to keep state synchronized between multiple users.

You will need to embed a Youtube video directly in the website. In our skeleton code we use react-player, but feel free to use another library or use the Youtube IFrame API directly.

In order to sync the video, you’ll need to know when any user plays, pauses, or seeks in their own player and transmit that information to everyone else. In order to get play, pause, and seek events you can use:

1. YouTube iFrame API - Events
2. Build your own custom controls for play, pause & seek. If you choose this option, make sure the controls UX works very similarly to youtube’s standard controls (e.g. play/pause button and a slider for seek)

Required Functionality

• 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)

🚨 Please fill out the rubric in the README with the functionality you were able to complete

Help & Clarifications

If you want something about the problem statement clarified at any point while you’re working on this, feel free to email me at nikhil@nooks.in or even text me at 408-464-2288. I will reply as soon as humanly possible and do my best to unblock you.

Feel free to use any resource on the Internet to help you tackle this challenge better: guides, technical documentation, sample projects on Github — anything is fair game! We want to see how you can build things in a real working environment where no information is off limits.

Submission

When you’ve finished, please send back your results to me via email as a zip file. Make sure to include any instructions about how to run the app in the README.md.

I will take a look and schedule a time to talk about your solution!