Soundtrack Compass
A playful mood-to-music planner where users log a daily “vibe” (e.g., calm, focused, bold) and the app generates a tiny playlist card using locally curated prompts (no streaming APIs): suggested genres, tempos, and a 3-track “imaginary setlist” with editable titles. It includes a weekly grid view, quick-searchable tags, and a “shuffle today’s vibe” button that remixes suggestions with simple client-side rules. Entries are saved to localStorage, and the UI is split into clear components: VibePicker, SetlistCard, WeekGrid, TagFilter, and HistoryDrawer.
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 -d
by system
Configure Tailwind content paths and add the Tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Implement a simple shell layout in src/App.tsx with header, main, and footer slots.
by system
Create src/types.ts defining Vibe, VibeEntry, SetlistSuggestion, and Tag types.
by system
Create src/data/vibes.ts exporting a curated list of vibes with default tags and tones.
by system
Create src/data/prompts.ts with locally curated genre/tempo/setlist prompt fragments.
by system
Create src/lib/generator.ts that turns a vibe + optional tags into genres/tempo + 3-track setlist.
by system
Extend src/lib/generator.ts with a deterministic-ish shuffle/remix function for today's vibe.
by system
Create src/lib/storage.ts with loadEntries(), saveEntries(), and migration-safe parsing.
by system
Create src/hooks/useEntries.ts to manage entries list state and persist to localStorage.
by system
Create src/lib/dates.ts for week start, day keys, and formatting helpers.
by system
Create src/lib/tags.ts to extract unique tags and perform tag search filtering.
by system
Create src/components/VibePicker.tsx for selecting a vibe and setting optional note/tags.
by system
Wire VibePicker.tsx callbacks for onSelectVibe, onAddTag, and onRemoveTag.
by system
Create src/components/SetlistCard.tsx to display genres, tempo, and editable 3-track titles.
by system
Implement inline editing in SetlistCard.tsx and emit onChangeTrackTitles.
by system
Create src/components/ShuffleButton.tsx that triggers remixing suggestions for the selected day.
by system
Create src/components/WeekGrid.tsx to render a 7-day grid with per-day vibe summary.
by system
Add selection handling in WeekGrid.tsx to switch the active day.
by system
Show small badges for vibe and tags in each day cell in WeekGrid.tsx.
by system
Create src/components/TagFilter.tsx with searchable tag input and selectable chips.
by system
Implement client-side filtering and highlighting behavior in TagFilter.tsx.
by system
Create src/components/HistoryDrawer.tsx using shadcn Sheet/Drawer to list past entries.
by system
Add a compact entry row UI in HistoryDrawer.tsx with date, vibe, and quick load action.
by system
Wire App.tsx to create/update an entry for the selected day when a vibe is picked.
by system
Implement filtering of grid/history views in App.tsx based on selected TagFilter tags.
by system
Wire App.tsx to store edited track titles back into the corresponding entry in local state.
by system
Add minimal empty/placeholder UI states in App.tsx for no selection, no entries, and no matches.
by system
Add light Tailwind/shadcn styling tweaks across components to keep spacing/typography consistent.
by system