Skip to content

REFACTOR_V2.md

Latest commit

 

History

History
261 lines (201 loc) · 6.43 KB

REFACTOR_V2.md

File metadata and controls

261 lines (201 loc) · 6.43 KB

DrumFlow V2 Refactor Guide

📋 Overview

This guide walks you through refactoring your existing React app to V2 with the new design and features.

🚀 Quick Start

Step 1: Create Branch

git checkout -b v2-refactor

Step 2: File Structure

Your updated file structure should look like this:

src/
├── data/
│   └── DrumData.v2.js          ← NEW: Updated data module
├── hooks/
│   └── useRoutineGenerator.js  ← NEW: Smart rotation hook
├── components/
│   ├── Header.js               ← UPDATED: New design
│   └── SessionFlow.jsx         ← NEW: Practice session component
├── pages/
│   ├── HomePage.jsx            ← NEW: Main dashboard
│   ├── LibraryPage.jsx         ← NEW: Lessons browser
│   └── SongsPage.jsx           ← NEW: Song table
└── App.js                      ← UPDATED: New state management

📝 Implementation Checklist

✅ Data Layer

  • Replace/update DrumData.v2.js in src/data/
  • Verify all imports use correct paths

✅ Hooks

  • Create src/hooks/useRoutineGenerator.js
  • Test routine generation logic

✅ Components

  • Update src/components/Header.js with new design
  • Create src/components/SessionFlow.jsx for practice sessions
  • Remove old components no longer needed

✅ Pages

  • Create src/pages/HomePage.jsx
  • Create src/pages/LibraryPage.jsx
  • Create src/pages/SongsPage.jsx
  • Remove old page files

✅ Main App

  • Update src/App.js with new state management
  • Verify all props are passed correctly
  • Test navigation between screens

✅ Dependencies

Make sure you have these dependencies:

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "lucide-react": "^0.263.1"
  }
}

Install if needed:

npm install lucide-react

🔑 Key Changes from V1

1. State Management

  • Moved all state to App.js (single source of truth)
  • Uses useEffect for localStorage persistence
  • Custom useRoutineGenerator hook for smart rotation

2. Routing

  • Simple state-based routing (no react-router needed)
  • Screens: home, library, songs, session
  • Clean navigation via currentScreen state

3. Component Architecture

App.js (state container)
  ├── Header (navigation + stats)
  ├── HomePage (dashboard)
  ├── LibraryPage (lessons)
  ├── SongsPage (song table)
  └── SessionFlow (practice)

4. New Features

  • ✨ Smart routine rotation (respects pins/excludes)
  • ✨ 10-minute quick session option
  • ✨ Improved library with 3 tabs
  • ✨ Song progression table
  • ✨ Better visual design (matches mockups)

🧪 Testing Checklist

Home Page

  • Session buttons work (20min & 10min)
  • Routine card displays correctly
  • Regenerate button creates new routine
  • Current/Goal song cards show correct data
  • Mark Complete button works

Library Page

  • All 3 tabs work (Warmups, Grooves, Practice)
  • Pin button toggles correctly (blue when pinned)
  • Exclude button toggles correctly (red when excluded)
  • Watch links open in new tab
  • Routine regenerates when pins/excludes change

Songs Page

  • Search filters songs
  • Show/hide hidden songs toggle works
  • Sort dropdown works
  • All links (Tutorial, Play-along, Sheet) open correctly
  • Mark Complete advances to next song
  • Hide/Show button works

Session Flow

  • Progress circle animates correctly
  • All video links work
  • Continue button advances steps
  • Complete session updates stats
  • Streak logic works correctly
  • Exit returns to home

Stats

  • Streak increments on practice
  • Streak breaks if day missed
  • Sessions count increases
  • Songs completed count updates

🐛 Common Issues & Solutions

Issue: "Cannot find module"

Solution: Check import paths match your file structure exactly

// Correct:
import { warmups } from '../data/DrumData.v2';

// Wrong:
import { warmups } from './data/DrumData.v2';

Issue: Routine not generating

Solution: Check browser console for errors in useRoutineGenerator hook

Issue: localStorage not persisting

Solution: Check useEffect dependencies in App.js

Issue: Icons not showing

Solution: Install lucide-react: npm install lucide-react

🚢 Deployment

Build

npm run build

Deploy to Netlify

netlify deploy --prod --dir=build

Or use Netlify's GitHub integration for automatic deployments.

📊 Migration from V1

Data Migration

If users have existing data in localStorage:

  • drumflow_songs - Will work as-is ✅
  • drumflow_stats - Will work as-is ✅
  • New keys: drumflow_pinned, drumflow_excluded, drumflow_todays_routine

Backwards Compatibility

V2 is designed to work with V1 localStorage data. New features (pins/excludes) start empty if not present.

🎨 Design System

Colors

  • Primary: Purple #8b5cf6
  • Accent: Pink #ec4899
  • Success: Green #22c55e
  • Warning: Orange #f97316
  • Info: Blue #3b82f6

Spacing

  • Card padding: p-6 or p-8
  • Card radius: rounded-2xl or rounded-3xl
  • Button radius: rounded-xl
  • Gap between items: gap-4 or gap-6

Typography

  • Hero: text-5xl font-bold
  • Page title: text-4xl font-bold
  • Section title: text-xl font-bold
  • Body: text-base or text-sm

💡 Tips

  1. Start with data - Get DrumData.v2.js working first
  2. Build bottom-up - Hook → Components → Pages → App
  3. Test incrementally - Don't wait to test until everything is done
  4. Use console.log - Debug state changes in App.js
  5. Check localStorage - Use browser DevTools → Application → Local Storage

🆘 Need Help?

If you encounter issues:

  1. Check the browser console for errors
  2. Verify file paths and imports
  3. Compare your code with the artifacts provided
  4. Test individual components in isolation

✅ Final Checklist Before Merge

  • All files created and in correct locations
  • No console errors
  • All features work as expected
  • localStorage persists correctly
  • Responsive on mobile
  • Build succeeds (npm run build)
  • Deployed to staging/test environment
  • Code committed with clear message
  • Ready to merge to main!

Good luck with the refactor! 🥁🎉