Piano Recording Task

This repository contains the instruction and codebase for an interview task at flowkey.

If anything here is unclear or any questions come to your mind, don’t hesitate to contact us - we’re here to help you!

Task Instructions

1. Please copy this codebase to a private repo on your Github account by clicking Use this template on GitHub, or by cloning it manually (don't create a fork!)

2. Add a Pull Request (to merge your changes to main of your copy, not this repository!) implementing the following functionality: Allow users of the app to record a sequence of keys played on the Piano UI as a "Song" and replay it.
   Please ensure the PR has a clear description explaining the change. You can add screenshots for the reviewer to get a better first impression of the UI.

Implementation guidelines

• Focus on clean, readable code and simplicity
• The review will focus on the structure of the React code, and the recording/playback solution you use (storing the recordings in an appropriate data structure will help a lot).
• Use the server to store and retrieve songs (here the docs for client-side Queries & Mutations)
• Continue to use npm as package manager, don't switch to yarn

Product requirements

• Provide a button to start/stop recording a sequence of keys played on the Piano UI
• Define a song title when storing a song on stop recording
• Show a list of stored songs with title
• Enable replaying stored songs with a small play button next to the title (with correct timing of replayed keys!)

Here a very simple example of what the UI could look like:

IMPORTANT: It does not have to look like this, that's just an example!

Provided Codebase

The codebase consists of:

• a minimal React client based on the react-piano package
• a server based on Apollo

Basic infos and how to run instructions for both parts can be found in the according READMEs in each directory.