Soundless DJ
A playful “silent mixing” app that lets users build beat sequences using a grid of tappable pads, each pad representing a simple instrument and rhythm pattern, with instant visual feedback instead of audio. Users can create multiple scenes, chain them into a short set list, and export/share their mix as a compact JSON string (plus save/load via localStorage). The UI is split cleanly into components like PadGrid, SceneList, SetListTimeline, TempoControls, and ShareModal, making it easy for multiple agents to build in parallel.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init.
by system
Configure Tailwind content paths and add Tailwind directives to src/index.css.
by system
Create src/types.ts with Scene/Pad/Pattern/SetList and share payload TypeScript types.
by system
Create src/constants.ts for instruments, grid size, default tempo, and default scenes.
by system
Create src/state/useSoundlessDj.ts with a React hook that owns scenes, setlist, tempo, and selection state.
by system
Create src/state/persistence.ts to save/load the full app state to localStorage with versioning.
by system
Create src/state/shareCodec.ts to encode/decode the app state to a compact JSON string.
by system
Add shadcn/ui toaster setup and a small helper for success/error toasts.
by system
Create src/components/AppShell.tsx to lay out header, main panels, and responsive columns.
by system
Create src/components/HeaderBar.tsx with app title and buttons for Share, Save, Load, and Reset.
by system
Create src/components/TempoControls.tsx with BPM slider/input and playhead speed preview indicator.
by system
Create src/components/Pad.tsx for a single tappable pad with active state and step highlighting.
by system
Create src/components/PadGrid.tsx rendering the grid of pads for the selected scene.
by system
Wire PadGrid to state actions to toggle a pad’s pattern/active state on click or tap.
by system
Create src/state/usePlayhead.ts to advance a step index on an interval based on BPM and steps.
by system
Connect usePlayhead to Pad/PadGrid to visually indicate the current step across the grid.
by system
Create src/components/SceneList.tsx to show scenes, allow selection, and display scene metadata.
by system
Add actions in useSoundlessDj.ts for add/duplicate/rename/delete scenes with safe defaults.
by system
Add UI controls in SceneList for add, duplicate, rename (inline), and delete (confirm).
by system
Create src/components/SetListTimeline.tsx showing ordered scene blocks with durations.
by system
Add actions in useSoundlessDj.ts to add/remove/reorder setlist entries and change repeats.
by system
Implement pointer-based drag-and-drop reordering inside SetListTimeline without external libs.
by system
Add per-block controls in SetListTimeline for repeat count and remove entry.
by system
Create src/state/useSetlistPlayback.ts to compute the active scene from playhead + setlist.
by system
Show which scene is currently active in SceneList and SetListTimeline during playback.
by system
Create src/components/ShareModal.tsx using shadcn Dialog with textarea and copy button.
by system
Wire ShareModal to export the current state via shareCodec and copy to clipboard with toast.
by system
Add import handling in ShareModal to parse a pasted string and replace state with validation.
by system
Add minimal empty-state UI and error boundaries/messages for no scenes, bad imports, and resets.
by system
Refine Tailwind/shadcn styles for consistent spacing, focus rings, and mobile-friendly tap targets.
by system