https://github.com/ayokanmi-adejola/drum-machine
A beautiful, responsive drum machine built with React and TypeScript. It allows users to create and play drum patterns directly in their web browser featuring responsive design, intuitive interface and dynamic playback
https://github.com/ayokanmi-adejola/drum-machine
lucide-react mobile-first-workflow react18 tailwindcss typescript vite
Last synced: 8 months ago
JSON representation
A beautiful, responsive drum machine built with React and TypeScript. It allows users to create and play drum patterns directly in their web browser featuring responsive design, intuitive interface and dynamic playback
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/drum-machine
- Owner: Ayokanmi-Adejola
- Created: 2025-06-23T11:31:04.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-09-04T22:13:03.000Z (10 months ago)
- Last Synced: 2025-09-30T00:00:36.011Z (9 months ago)
- Topics: lucide-react, mobile-first-workflow, react18, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://drum-machine-beryl-six.vercel.app
- Size: 62.5 KB
- Stars: 10
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🥁 Drum Machine
A beautiful, responsive drum machine built with React and TypeScript for the FreeCodeCamp Front End Development Libraries certification.
| Desktop | Mobile |
| ------- | ------ |
| 
| 
|
## ✨ Features
- **9 Interactive Drum Pads** - Click or use keyboard keys (Q, W, E, A, S, D, Z, X, C)
- **Real-time Audio Playback** - High-quality drum samples from FreeCodeCamp
- **Visual Feedback** - Animated button states and display updates
- **Responsive Design** - Works perfectly on desktop and mobile devices
- **Modern UI** - Sleek gradient design with glassmorphism effects
- **Keyboard Support** - Full keyboard interaction for seamless playing
## 🎵 Drum Sounds
- **Q** - Heater 1
- **W** - Heater 2
- **E** - Heater 3
- **A** - Heater 4
- **S** - Clap
- **D** - Open Hi-Hat
- **Z** - Kick n' Hat
- **X** - Kick
- **C** - Closed Hi-Hat
## 🚀 Technologies Used
- **React 18** - Modern React with hooks
- **TypeScript** - Type-safe development
- **Tailwind CSS** - Utility-first styling
- **Vite** - Fast build tool and dev server
- **Lucide React** - Beautiful icons
## 🎯 FreeCodeCamp Requirements
This project fulfills all FreeCodeCamp user stories:
✅ Outer container with `id="drum-machine"`
✅ Display element with `id="display"`
✅ 9 clickable drum pads with class `drum-pad`
✅ Audio elements with class `clip` and proper IDs
✅ Click functionality triggers audio
✅ Keyboard functionality (Q, W, E, A, S, D, Z, X, C)
✅ Display updates with sound descriptions
## 🛠️ Installation & Setup
```bash
# Clone the repository
git clone https://github.com/Ayokanmi-Adejola/Drum-Machine
# Navigate to project directory
cd drum-machine
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
```
## 🎮 How to Use
1. **Click** any drum pad to play the corresponding sound
2. **Press** keyboard keys Q, W, E, A, S, D, Z, X, C to trigger sounds
3. **Watch** the display update with the name of each sound
4. **Enjoy** creating beats and rhythms!
## 🎨 Design Features
- **Gradient Background** - Beautiful purple-to-blue gradient
- **Glassmorphism** - Modern frosted glass effect
- **Hover Effects** - Smooth transitions and scaling
- **Active States** - Visual feedback when pads are pressed
- **Responsive Grid** - Perfect layout on all screen sizes
- **Typography** - Clean, modern font choices
## 📱 Responsive Design
The drum machine is fully responsive and works great on:
- Desktop computers
- Tablets
- Mobile phones
- All modern browsers