DEMO www.react-drum-machine.netlify.app

Frontend: deploy statusDocz: deploy
Netlify StatusNetlify Status

React drums is a virtual drum machine built with React and Node.js using an Apollo GraphQL server. I love coding, music, Native Instruments software & hardware. So why not build a virtual Drum Machine 1 to play around with all of the tech.

The code is always changing, feel free to change it also and i'm certain it's overcooked and undercooked in places 😆. I hope you enjoy it as much as I have enjoyed building it.

Project Structure

The project is managed with Yarn and Yarn Workspaces. It is mono-repo housing 3 seperate projects, the React frontend, the docz2 documentation site and the server an Apollo GraphQL backend.

Click links below to read documentation on how to get started.

📁 client

📁 documentation

📁 server

Local development

Fork repository: https://github.com/mannuelf/react-drums

Install Node.js dependencies

yarn install

Start local server

This will start the React front-end, Apollo GraphQL server, Prisma Studio and documentation site respectively.

yarn dev




  1. This project was insired by the WesBos JavaScript 30 course.
  2. docz is an awesome open source documentation creation tool used to make this site. Get it here.