Loop Machine

Description

This app allows you to listen to audio track that consists of eight separate tracks simultaneously.
giving you the option to mute each of the tracks while listening.
As part of the recruitment process for front-end developer position,
I was given a home assignment, and this is the result.

development process

I divided the development process into four sections:

1. Planning:
   1.1 Breaking down each task from the characterization page into sub-tasks.
   1.2 Classifying each sub-task by topics I know and issues I need to study.
2. Application's structure planning.
3. Functionality development.
4. Styling.

Application structure

There are three parts to the application:

1. Slider shows current playing position in real-time.
2. The central part - the audio channels, each with a track name and a mute button.
3. Buttons for play, stop & back to start, loop.

Libraries

The app was developed using two external libraries:

1. React-icons I've used for the buttons.
2. Styled-components I've used for the styling.
3. react-beautiful-dnd I've used for drag and drop abilities. This guide is a recommended resource if you want one here
   As for the background svg, I use Hero Patterns, which is easy to use and highly recommended here