createdbycc/drum-machine-freecodecamp

This is one of the freeCodeCamp Front End Development Libraries Projects. In this project we build a react app that plays a drum sound when you click a button or the keyboard key equivalent.

Drum Machine

Click here for DEMO

This is one of the freeCodeCamp Front End Development Libraries Projects.

In this project we build a react app that plays a drum sound when you click a button or the keyboard key equivalent.

---

I prefer to code in VS Code over CodePen

Steps I took:

Getting VS ready:

1. Open the folder where you project folder will be saved
2. Use terminal to install Vite npm create vite@latest - I selected React and JS

Minor tweaks to Vite files:

1. Remove the flavicon icon in the head element of the index.html file - personal preference
2. Clear out App.css - here you add your own styles
3. Clear out most of Index.css - I kept some of the root styles (font-family, line-height and font-weight)
4. Delete the content in the return method of App.jsx

Deploy the project on GitHub Pages:

1. I usually follow the instructions in the blog listed in the Resources below
   • There is a step where you need to add a new .github folder INSIDE your main project folder

Resources:

• VS Code - prerequisite
• Nodejs - prerequisite
• Vite
• How to deploy Vite-React App or YouTube video link