Echo Memo Mixer
A playful voice-and-text micro-journal where each entry is tagged with a mood, color, and a short “echo” prompt, then remixed into a daily collage of snippets. Users can record (or type) 10–60 second memos, auto-generate a title from keywords, and browse entries via a timeline, mood filter, and a shuffle mode that stitches 3–5 random moments into a mini “memory mix.” Everything runs client-side with in-memory state + localStorage, using clear components for recording, entry cards, filters, and the remix player.
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
Add shadcn/ui CSS variables and base styles in src/index.css.
by system
Create src/types.ts defining MemoEntry, Mood, EchoPrompt, and RemixItem types.
by system
Create src/lib/storage.ts to load/save entries and preferences with versioned keys.
by system
Create src/lib/titleGen.ts to generate a short title from memo text using keyword frequency.
by system
Create src/lib/dates.ts for relative time and day-group labels.
by system
Create src/lib/moods.ts exporting mood list with labels, colors, and Tailwind classes.
by system
Create src/lib/echoPrompts.ts exporting a small curated list of prompts and random picker.
by system
Create src/state/useEntriesStore.ts providing CRUD actions and persistence via localStorage.
by system
Create src/state/useFiltersStore.ts for mood filter, shuffle toggle, and search text state.
by system
Implement src/App.tsx with header, main content grid, and footer placeholders.
by system
Create src/components/TopBar.tsx with app title and quick actions buttons.
by system
Create src/pages/NewEntryPage.tsx composing recorder, text input, mood picker, and save action.
by system
Create src/pages/TimelinePage.tsx to list entries grouped by day with filters applied.
by system
Create src/pages/RemixPage.tsx that builds and plays a 3–5 item memory mix.
by system
Add src/router.tsx using react-router-dom routes for New, Timeline, and Remix pages.
by system
Create src/components/Recorder.tsx using MediaRecorder to capture 10–60s audio to a Blob URL.
by system
Create src/components/AudioPlayer.tsx with play/pause, scrubber, and time display.
by system
Create src/components/TextMemoInput.tsx for typing memo text with character/seconds guidance.
by system
Create src/components/MoodPicker.tsx to select a mood with colored options.
by system
Create src/components/ColorPicker.tsx to select an accent color for an entry.
by system
Create src/components/EchoPromptPicker.tsx to choose or randomize a short echo prompt.
by system
Create src/components/AutoTitlePreview.tsx that shows the generated title and allows manual override.
by system
Implement save logic in src/pages/NewEntryPage.tsx to create a MemoEntry and persist via store.
by system
Create src/components/EntryCard.tsx to display title, mood, color, echo prompt, and snippet playback.
by system
Create src/components/DayGroupHeader.tsx for date labels and entry counts.
by system
Create src/components/FiltersBar.tsx with mood dropdown, search input, and clear controls.
by system
Create src/lib/remix.ts to pick 3–5 random entries and produce an ordered RemixItem list.
by system
Create src/components/RemixPlayer.tsx to step through RemixItems with next/prev and autoplay.
by system