hannesreinsch / piano-flowkey

React Piano Task

Build a small piano application that can play sounds, as well as store and retrieve sequences of played keys (songs).

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

Implementation instructions

• Focus on clean, readable Code and Simplicity
• Use React for the Frontend
• For the piano sounds you can use the given files files or any of your choice

Minimum requirements

• Piano UI:
  • Clickable black and white keys, which play a sound when clicked
  • Visual feedback on touching the keys
• Store song locally (e.g. in an Array):
  • Show buttons to start/stop recording a sequence of keys
  • Enable defining a song title
  • Show a list of stored songs with title

Optional features

• Enable replaying stored songs
• Store and retrieve the songs from a GraphQL server instead of from a local storage (sample server given here: Apollo Server)

Piano Sounds

The directory grand-piano-mp3-sounds contains sample sounds you can use for this task. Alternatively you can use sounds from https://github.com/pffy/mp3-piano-sound or other sample sounds of your preference.