Drum Machine

The following application is a simple 8-bit drum machine built with TypeScript, Parcel, Sass and ReactJS.

Motivation

This project was made for the Front End Development Libraries Certification on Free Code Camp.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Features
• Getting started
  • Prerequisites
  • Installation
  • Built with
  • License
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

• Contain clickable "drum pads"

• Trigger audio clips upon clicking or hitting the corresponding keystrokes shown on the "drum pads".

• Display the name of the audio clip when triggered.

• Change the volume of the drum machine

• Give the user the option to swap between different themes

• Show a modal explaining the application when clicking the "help" button

Screenshot

Desktop View

Mobile View

Links

• Project URL: Github Repository
• Live App URL: Github Page

Features

This project was based on the sample project provided by Free Code Camp as an example output and has a number of additional features to distinguish itself from the provided sample output, these include:

• The design was based off of designs made by Tom Piggott and Nikonov Dmitry.
• The application was built from scratch using ReactJS
• Utilizies TypeScript for type checking.
• Parcel was used to bundle all the files to reduce file size
• Has light and dark mode theming
• And is mobile responsive

Getting started

Prerequisites

You are going to need the latest version of NPM in order to install this project on your machine.

• npm

  npm install npm@latest -g

Installation

1. Clone the repository

   git clone https://github.com/N-Nikolaev/drum-machine.git

2. Install NPM packages

   npm install

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• SASS - CSS Preprocessor
• Parcel - Web Application Bundler
• TypeScript - Static Typing Language
• ReactJS - JavaScript Library / Framework
• FontAwesome - Icon toolkit
• Sample Swap - Royalty Free Sound Clips
• Favicon.io - Favicon generator

License

Distributed under the MIT License. See LICENSE for more information.

Useful resources

1. FCC - Drum Machine Example Project
2. React, Typescript and Sass with Parcel - Part 1
3. How do I revert a Git repository to a previous commit?
4. How To Create Vertical Text Using HTML and CSS
5. How to detect Esc Key Press in React and how to handle it
6. React with TypeScript Crash Course - 2021
7. CSS Grid cheat sheet
8. How can I adjust the volume of an audio file in JavaScript
9. Style Input Range

Author

• Github - Nikolay Nikolaev
• Frontend Mentor - @N-Nikolaev

Acknowledgments

• Free Code Camp
• ReactJS
• Parcel
• SASS
• TypeScript
• FontAwesome
• Sample Swap
• Favicon.io
• Stackoverflow
• Richard Oliver Bray
• Spotify Design Guidelines
• Yanácska Coding
• Laith Harb
• CSS Portal
• Tom Piggott
• Nikonov Dmitry
• Scheme Color
• Yaizl