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

Architecture Questions

After building the watch party app, we would like you to answer the following questions about design decisions and tradeoffs you made while building it. Please fill them out in the README along with your submission.

1. How did you approach the problem? What did you choose to learn or work on first? Did any unexpected difficulties come up - if so, how did you resolve them?

2. How did you implement seeking to different times in the video? Are there any other approaches you considered and what are the tradeoffs between them?

3. How do new users know what time to join the watch party? Are there any other approaches you considered and what were the tradeoffs between them?

4. How do you guarantee that the time that a new user joins is accurate (i.e perfectly in sync with the other users in the session) and are there any edge cases where it isn’t? Think about cases that might occur with real production traffic.

5. Are there any other situations - i.e race conditions, edge cases - where one user can be out of sync with another? (Out of sync meaning that user A has the video playing or paused at some time, while user B has the video playing or paused at some other time.)

6. How would you productionize this application to a scale where it needs to be used reliably with 1M+ DAUs and 10k people connected to a single session? Think infrastructure changes, code changes & UX changes.

🚨 Please fill out this section in the README with answers to these questions, or send the answers in your email instead.

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 [email protected] 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 ([email protected]) and CC our recruiting lead Kev ([email protected]) 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!