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

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!)
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.

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

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!

The codebase consists of:

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