Beat Map Builder
A playful rhythm-workout planner where users create short “beat maps” by placing tap, hold, and rest notes on a looping timeline, then play it back with sound and visual cues. It includes a simple metronome, adjustable BPM, difficulty presets, and a practice mode that scores timing accuracy and streaks. Beat maps can be saved to localStorage, shared via export/import JSON, and organized in a small library with tags and quick previews.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react clsx tailwind-merge && npx shadcn@latest init
by system
Configure src/index.css with Tailwind directives and set a minimal app background/text theme.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Implement src/App.tsx with header, main container, and footer shell.
by system
Add React Router and define routes in src/main.tsx for Builder, Practice, and Library pages.
by system
Create src/pages/BuilderPage.tsx with placeholder panels for timeline, controls, and inspector.
by system
Create src/pages/PracticePage.tsx with placeholder for play HUD and scoring summary.
by system
Create src/pages/LibraryPage.tsx with placeholder for map list, search, and import/export actions.
by system
Create src/types/beatmap.ts defining NoteType, Note, BeatMap, and DifficultyPreset types.
by system
Create src/data/presets.ts exporting a few preset configurations (BPM, length, density hints).
by system
Create src/state/beatmapStore.ts using a small reducer and context for current map editing.
by system
Create src/state/libraryStore.ts to manage saved maps list, selection, and filtering.
by system
Create src/lib/storage.ts to load/save beatmap library and last-opened map to localStorage.
by system
Create src/lib/serialization.ts for JSON export/import with basic validation and version field.
by system
Create src/components/timeline/TimelineGrid.tsx rendering a looping timeline grid based on beats and subdivisions.
by system
Create src/components/timeline/NoteItem.tsx to render tap/hold/rest visuals with color and icons.
by system
Create src/components/timeline/useTimelineInteractions.ts to place/remove notes by click/drag with snapping.
by system
Create src/components/builder/BuilderControls.tsx with BPM slider/input, length, and play/stop buttons.
by system
Create src/components/builder/NotePalette.tsx to choose active tool (tap/hold/rest/erase).
by system
Create src/components/builder/PresetPicker.tsx to apply presets to the current beat map.
by system
Create src/components/builder/MapMetaForm.tsx for title, description, and tags editing.
by system
Create src/audio/metronome.ts using Web Audio API to schedule clicks at the current BPM.
by system
Create src/audio/playback.ts to schedule note sounds and emit timeline events during playback.
by system
Create src/components/builder/SoundSetSelect.tsx to switch between a couple of synthesized click tones.
by system
Create src/hooks/useTransport.ts managing play/stop, current tick, loop, and sync to engines.
by system
Create src/components/timeline/Playhead.tsx to display animated playhead position over the timeline.
by system
Create src/practice/usePracticeInput.ts to record tap timing from keyboard/mouse/touch with debouncing.
by system
Create src/practice/scoring.ts to compute hit windows, accuracy score, and streaks per note.
by system
Create src/components/practice/PracticeHUD.tsx showing BPM, time, next note, streak, and accuracy.
by system
Create src/components/library/BeatMapCard.tsx and src/components/library/BeatMapList.tsx for browsing and selecting saved maps.
by system
Create src/components/library/QuickPreviewButton.tsx to play a short loop preview of a map without entering builder.
by system
Create src/components/library/ImportExportDialog.tsx to paste JSON, download JSON, and handle errors.
by system