Soundtrack Shuffle
A playful “life playlist” generator that turns your day into a mock album: users log short moments (e.g., commute, coffee, victory, stress) and the app maps them to a themed tracklist with titles, durations, and a cohesive album cover. It includes a drag-and-drop track reordering view, a mood-to-genre rule editor (simple presets + custom mappings), and an export panel to save/share the album as an image or JSON—all client-side with localStorage.
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 && npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities html-to-image && npx shadcn@latest init
by system
Configure Tailwind content/theme and add @tailwind directives in src/index.css.
by system
Add a minimal set of shadcn/ui primitives (button, input, textarea, card, dialog, tabs, select, toast) via generated component files.
by system
Create src/types.ts with Moment, Track, Album, and MoodGenreRule TypeScript types.
by system
Create src/lib/storage.ts with load/save utilities and versioned keys.
by system
Create src/lib/presets.ts exporting default mood-to-genre rules and album theme presets.
by system
Create src/lib/generator.ts to transform moments + rules into a tracklist with titles and durations.
by system
Create src/lib/cover.ts to derive cohesive cover colors/pattern seed from album theme and track moods.
by system
Create src/App.tsx with header, main container, and tabbed navigation (Log, Tracklist, Rules, Export).
by system
Wire shadcn toaster into src/main.tsx and expose a simple notify helper.
by system
Create src/state/useAlbum.ts as a single React hook managing moments, rules, album output, and persistence.
by system
Create src/components/MomentForm.tsx to add a moment (label, mood, optional note) with validation.
by system
Create src/components/MomentList.tsx to display, edit, and delete logged moments.
by system
Create src/components/MoodSelect.tsx as a reusable select for moods/presets.
by system
Create src/pages/LogPage.tsx composing MomentForm + MomentList and calling album regeneration.
by system
Create src/components/TrackCard.tsx to render track title, genre, duration, and mood badge.
by system
Create src/components/SortableTracklist.tsx using dnd-kit to reorder tracks and emit new order.
by system
Create src/pages/TracklistPage.tsx to show the generated album tracklist with drag-and-drop ordering.
by system
Create src/components/AlbumCover.tsx to render a square cover (SVG/CSS) with title/artist styling.
by system
Create src/components/AlbumHeader.tsx to show album title, “artist” (user-defined), date, and runtime.
by system
Create src/components/RulesList.tsx to display mood-to-genre rules with inline enable/disable and delete.
by system
Create src/components/RuleEditorDialog.tsx to add/edit a single mapping (mood → genre + naming style).
by system
Create src/components/PresetPicker.tsx to apply preset rule sets and themes.
by system
Create src/pages/RulesPage.tsx composing PresetPicker + RulesList + RuleEditorDialog.
by system
Create src/components/ExportPanel.tsx with buttons to export JSON and render-to-image.
by system
Create src/components/AlbumExportView.tsx as a dedicated DOM layout to screenshot (cover + tracklist).
by system
Create src/lib/exportImage.ts using html-to-image to download PNG from AlbumExportView.
by system
Create src/lib/exportJson.ts to download the album as a JSON file and copy to clipboard.
by system
Create src/pages/ExportPage.tsx composing AlbumExportView + ExportPanel with success toasts.
by system
Update src/App.tsx to render the four pages via shadcn Tabs while sharing album state across views.
by system