Soundtrack Moodboard
A playful client-side app where you build “moodboards” made of colors, adjectives, and short notes, then pair each board with a generated mini playlist of embedded audio previews (user-provided links or local files) and a simple animated visualizer. Create, edit, and reorder boards, tag them (e.g., “focus”, “rainy”, “hype”), and search/filter your library; everything is saved to localStorage. Includes a “Shuffle a Vibe” mode that randomly combines a color palette + prompt words + animation style to spark new boards, with clear modular components for boards, tags, audio slots, and the visualizer.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure tailwind.config + src/index.css with Tailwind directives and a minimal app background.
by system
Add src/lib/utils.ts with cn() and ensure path alias resolves for imports.
by system
Implement src/App.tsx with a header, main container, and placeholder content.
by system
Add client-side routing (react-router) with Library and Shuffle pages.
by system
Create src/types.ts defining Moodboard, Tag, AudioSlot, and VisualizerStyle types.
by system
Implement src/lib/storage.ts for load/save with schema versioning and safe parsing.
by system
Create src/hooks/useMoodboards.ts to manage CRUD, reorder, and persistence.
by system
Create src/lib/tags.ts for normalize, color assignment, and tag matching helpers.
by system
Create src/lib/palette.ts for generating/validating 3–6 color palettes.
by system
Create src/lib/shuffle.ts that returns random palette + prompt words + visualizer style.
by system
Generate shadcn/ui Button and ensure Tailwind styling works.
by system
Generate shadcn/ui Input, Textarea, and Label for forms.
by system
Generate shadcn/ui Dialog for create/edit moodboard modal.
by system
Generate shadcn/ui Badge to display tags and prompt words.
by system
Generate shadcn/ui Tabs for switching between board details sections.
by system
Create src/components/BoardCard.tsx to display palette, title, tags, and quick actions.
by system
Create src/components/PaletteStrip.tsx to render clickable color swatches.
by system
Create src/components/TagList.tsx for rendering tags with optional remove buttons.
by system
Create src/components/TagInput.tsx to add tags with enter/comma and suggestions.
by system
Create src/components/NotesEditor.tsx as a controlled Textarea with char count.
by system
Create src/components/AudioSlot.tsx supporting URL input or local file selection with preview.
by system
Create src/components/AudioSlotsList.tsx to add/remove/reorder up to N slots.
by system
Create src/components/VisualizerCanvas.tsx rendering a simple animated visualization for the current audio.
by system
Create src/components/VisualizerStylePicker.tsx to select among a few animation styles.
by system
Create src/components/BoardEditorDialog.tsx combining title, palette, adjectives, tags, notes, audio, and visualizer fields.
by system
Implement src/pages/LibraryPage.tsx showing board grid and a create button.
by system
Create src/components/SearchFilterBar.tsx for text search and tag filtering.
by system
Add src/components/BoardReorderControls.tsx with move up/down actions wired to reorder logic.
by system
Implement src/pages/ShufflePage.tsx to generate a vibe, preview it, and create a new board from it.
by system