Soundbite Scrapbook
A playful “audio postcard” maker: record short voice clips (or upload audio), trim to a few seconds, and pair each clip with a title, color theme, and optional doodle sticker to create a grid of soundbites. Tap a card to play it with a simple waveform visualizer and animated gradient background; organize cards with tags and search, and persist everything in localStorage. The app stays small and parallelizable with clear components: recorder/uploader + trimmer, card creator/editor, scrapbook grid + filters, and player/visualizer modal.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react && npx shadcn@latest init.
by system
Configure Tailwind content/theme in tailwind.config.ts and wire Tailwind into src/index.css.
by system
Build src/App.tsx with header, main container, and placeholder sections for grid/filters/modals.
by system
Create src/types/soundbite.ts defining Soundbite, Tag, Theme, and persisted schema types.
by system
Create src/lib/storage.ts to load/save soundbites with versioning and safe JSON parsing.
by system
Create src/hooks/useSoundbites.ts to manage CRUD state and persist changes via localStorage.
by system
Create src/lib/audio.ts for blob/base64 conversion, duration reading, and safe AudioContext creation.
by system
Create src/lib/waveform.ts to decode audio and produce downsampled amplitude arrays for visualization.
by system
Create src/lib/themes.ts exporting a small set of color/gradient theme presets.
by system
Create src/lib/tags.ts for normalizing tags, splitting input, and de-duplicating lists.
by system
Install minimal shadcn/ui components used by the app (button, input, dialog, tabs, badge, dropdown-menu, slider).
by system
Create src/lib/stickers.ts exporting a small list of simple sticker SVG strings/paths.
by system
Create src/components/StickerPicker.tsx to select an optional sticker from the preset list.
by system
Create src/components/ThemePicker.tsx to pick a theme preset with preview swatches.
by system
Create src/components/TagInput.tsx to add/remove tags with inline chips and keyboard support.
by system
Create src/components/Recorder.tsx using MediaRecorder to record audio and return a Blob.
by system
Create src/components/AudioUploader.tsx to choose an audio file and return a Blob plus filename.
by system
Create src/components/TrimWaveform.tsx to render a static waveform with selectable trim region.
by system
Create src/components/AudioTrimmer.tsx to set start/end times with slider controls and live duration readout.
by system
Create src/lib/trim.ts to export a trimmed audio segment using WebAudio OfflineAudioContext.
by system
Create src/components/SoundbiteCreateDialog.tsx combining record/upload, trim, and metadata fields into a Dialog.
by system
Create src/components/SoundbiteEditDialog.tsx to edit title/theme/tags/sticker for an existing soundbite.
by system
Create src/components/SoundbiteCard.tsx to display title, tags, theme, sticker, and play button.
by system
Create src/components/ScrapbookGrid.tsx to render a responsive grid of SoundbiteCard items.
by system
Create src/components/SearchBar.tsx to update a search query state with debounced input.
by system
Create src/components/TagFilterBar.tsx to show available tags and toggle active filters.
by system
Create src/components/SortMenu.tsx to switch sorting (newest, oldest, title) for the grid.
by system
Create src/components/PlayerModal.tsx as a Dialog that plays audio and shows metadata.
by system
Create src/components/WaveformVisualizer.tsx to animate playback progress over a sampled waveform.
by system
Wire state, dialogs, filters, grid, and player modal together in src/App.tsx using useSoundbites.
by system