max-berman / flowkey-code-challenge

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 Instruction

1. Please copy this codebase to a private repo on your Github account by using Github Importer or by cloning it (don't create a fork!).

2. Add a Pull Request (to merge your changes to master of your copy, not this repository!) implementing the following functionality: Enable the user of the app to record a sequence of keys played on the Piano UI as a "Song" and replay it.

Implementation guidelines

• Focus on clean, readable code and simplicity
• Use the graphql-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 piano-app based on the react-piano package
• a graphql-server based on Apollo

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