DrumFlow

A practice session manager that helps drummers follow structured daily routines with warmups, exercises, and songs.

Table of Contents

• Overview
• Features
• Tech Stack
• Getting Started
• Project Structure
• Development
• Deployment
• Documentation
• Contributing

---

Overview

DrumFlow is an ADHD-friendly drum practice app that generates personalized daily routines using smart rotation algorithms. Practice consistently with structured 20-minute or quick 10-minute sessions.

Live Demo: https://drumflow.netlify.app

---

Features

Core Features

• 🎵 Smart Routine Generation - Daily rotation with pin/exclude preferences
• ⚡ Two Session Types - 20-min full practice or 10-min quick session
• 📚 Lesson Library - Organized warmups, grooves, and practice lessons
• 🎼 Song Progression - Structured learning path from beginner to advanced
• 📊 Progress Tracking - Streak counter, session history, song completion
• 💾 Local Persistence - All data stored in browser localStorage

Design Philosophy

• ADHD-Friendly - Clear visual hierarchy, minimal decisions
• Consistent Practice - Automatic daily routines reduce decision fatigue
• Flexible Learning - Pin favorites, exclude items you want to skip
• Progressive Difficulty - Structured song progression from beginner to goal

---

Tech Stack

• Frontend: React 18, JavaScript (ES6+)
• Styling: Tailwind CSS
• Icons: Lucide React
• State Management: React Hooks (useState, useEffect, custom hooks)
• Data Persistence: Browser localStorage
• Build Tool: Create React App
• Hosting: Netlify
• Version Control: Git & GitHub

---

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/yourusername/drumflow.git
   cd drumflow

2. Install dependencies

   npm install

3. Start development server

   npm start

4. Open in browser

   http://localhost:3000
   

Build for Production

npm run build

---

Project Structure

drumflow/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Header.js
│   │   └── SessionFlow.jsx
│   ├── pages/               # Page-level components
│   │   ├── HomePage.jsx
│   │   ├── LibraryPage.jsx
│   │   └── SongsPage.jsx
│   ├── hooks/               # Custom React hooks
│   │   └── useRoutineGenerator.js
│   ├── data/                # Data models and constants
│   │   └── DrumData.v2.js
│   ├── App.js               # Main app component
│   └── index.js             # React entry point
├── docs/                    # Project documentation
│   ├── REFACTOR_V2.md
│   ├── ARCHITECTURE.md
│   └── CHANGELOG.md
├── .gitignore
├── package.json
└── README.md

---

Development

Available Scripts

Command	Description
npm start	Start development server
npm test	Run test suite
npm run build	Build for production
npm run eject	Eject from CRA (irreversible)

Development Workflow

1. Create a branch for your feature

   git checkout -b feature/your-feature-name

2. Make changes and test locally

   npm start

3. Commit your changes

   git add .
   git commit -m "feat: add your feature description"

4. Push to GitHub

   git push origin feature/your-feature-name

5. Create Pull Request on GitHub

Commit Convention

We follow Conventional Commits:

• feat: New feature
• fix: Bug fix
• docs: Documentation changes
• style: Code style changes (formatting)
• refactor: Code refactoring
• test: Adding or updating tests
• chore: Maintenance tasks

Examples:

git commit -m "feat: add 10-minute quick session option"
git commit -m "fix: resolve routine generation bug"
git commit -m "docs: update README with setup instructions"

---

Deployment

Netlify (Recommended)

Automatic Deployment (via GitHub):

1. Connect repository to Netlify
2. Build settings:
   • Build command: npm run build
   • Publish directory: build
3. Deploy automatically on push to main

Manual Deployment:

npm run build
netlify deploy --prod --dir=build

Other Platforms

The app can be deployed to any static hosting service:

• Vercel
• GitHub Pages
• Firebase Hosting
• AWS S3 + CloudFront

---

Documentation

All documentation is in the docs/ folder:

• REFACTOR_V2.md - V2 refactoring guide
• ARCHITECTURE.md - System architecture & design decisions
• CHANGELOG.md - Version history and release notes

---

Contributing

This is currently a solo project, and contributions are welcome!

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Style

• Use meaningful variable and function names
• Comment complex logic
• Follow React best practices
• Keep components focused and reusable
• Write tests for critical functionality

---

Known Issues

Check the Issues page for current bugs and feature requests.

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Acknowledgments

• All drum instructors whose videos are linked for generously providing amazing educational content
• YouTube for offering a platform to share great content
• All bands, for creating inspiring songs

---

Contact

• Project Link: https://github.com/SilviaMiranda/drumflow

---

Roadmap

V2.0 (Current)

• ✅ Smart routine generation with pins/excludes
• ✅ 10-minute quick sessions
• ✅ Improved UI/UX design
• ✅ Song progression tracking

V2.1 (Planned)

• Practice session timer with notifications
• BPM metronome integration
• Export practice history to CSV
• Dark mode support

V3.0 (Future)

• User accounts and cloud sync
• Community-shared lessons
• Video embedding instead of external links
• Mobile app (React Native)

---

Made with ❤️ and 🥁 by drummers, for drummers.