Soundbite Storycards
A playful interactive storyteller where users build short branching tales by arranging “story cards” (characters, settings, conflicts, twists) and recording optional 5–10 second voice soundbites per card. The app renders the story as a clickable flow map with preview playback, lets users reorder/branch nodes via drag-and-drop, and exports/imports stories as JSON; everything is saved locally in localStorage. Includes a small prompt generator (random card suggestions + constraints like “only 6 cards” or “must include a twist”) to spark quick sessions and keep scope tight.
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 @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tabs @radix-ui/react-toast && npx shadcn@latest init.
by system
Configure src/index.css with Tailwind directives and a minimal app background/text theme.
by system
Build src/App.tsx with a header, main two-panel layout, and placeholder panels.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/story.ts defining Story, CardNode, Edge, CardKind, and AudioClip metadata types.
by system
Create src/lib/storage.ts to load/save the current story and app settings in localStorage.
by system
Create src/state/useStoryStore.ts as a React hook managing story graph state and CRUD actions.
by system
Add src/components/ToasterHost.tsx and wire it in App to show save/import/export errors.
by system
Create src/components/CardKindBadge.tsx to render a small colored label for card types.
by system
Create src/components/StoryCard.tsx to display a node title, kind, short text, and audio status.
by system
Create src/components/CardEditorDialog.tsx for editing node title/text/kind and deleting the card.
by system
Create src/components/AddCardToolbar.tsx with buttons to add Character/Setting/Conflict/Twist cards.
by system
Add edge creation UI in src/components/LinkNodeMenu.tsx to connect one card to another as a branch.
by system
Create src/components/FlowMap.tsx to render nodes and edges in a simple clickable map layout.
by system
Implement selected node state and click handlers in src/state/useStoryStore.ts.
by system
Create src/components/FlowNode.tsx to render a positioned StoryCard with selection styling.
by system
Create src/components/FlowEdge.tsx to draw SVG lines/arrows between nodes with click-to-select.
by system
Create src/lib/layout.ts to compute simple layered positions from the story graph starting at root.
by system
Add src/components/DragReorderList.tsx to reorder a linear list of nodes using pointer events.
by system
Create src/components/BranchControls.tsx to move a node up/down within its parent’s outgoing edges.
by system
Create src/lib/useAudioRecorder.ts to record 5–10s audio clips via MediaRecorder and return a Blob.
by system
Create src/lib/audioStore.ts to persist recorded audio as base64 in localStorage per node id.
by system
Create src/components/RecordButton.tsx with start/stop recording UI and a duration countdown.
by system
Create src/components/AudioPreview.tsx to play/pause a node’s clip and show a small progress bar.
by system
Wire recording and playback into src/components/CardEditorDialog.tsx for the selected node.
by system
Create src/lib/prompts.ts to generate random card suggestions and constraints (e.g., max cards, must include twist).
by system
Create src/components/PromptPanel.tsx to display generated prompts and an “Apply to new story” action.
by system
Create src/components/ExportButton.tsx to download the current story (and embedded audio) as a JSON file.
by system
Create src/components/ImportButton.tsx to upload/parse a JSON file and replace the current story safely.
by system
Add an effect in src/state/useStoryStore.ts to persist story updates to localStorage with debouncing.
by system