Dream Doodle Deck
A playful mini journaling app where you capture dreams as swipeable “cards” with a title, mood, tags, and a quick doodle on a simple canvas. It includes a daily prompt generator, a searchable/filterable card gallery, and a “remix” view that creates a lightweight collage/word-cloud from your saved tags and moods. Everything runs client-side with localStorage, built as a single React + Vite SPA styled with Tailwind and shadcn/ui components.
Create src/components/HeaderNav.tsx with links to Capture, Gallery, Remix.
by system
Install and export needed shadcn components (button, input, card, badge, dialog, tabs) in src/components/ui.
by system
Create src/components/MoodPicker.tsx as a small selectable mood control.
by system
Create src/components/TagInput.tsx to add/remove tags with badges.
by system
Create src/components/DoodleCanvas.tsx for drawing/clearing and exporting a dataURL.
by system
Create src/components/DreamForm.tsx with fields (title, mood, tags, doodle) and submit handler prop.
by system
Create src/pages/CapturePage.tsx composing prompt + form and saving via useDreams.
by system
Create src/components/SwipeDreamCard.tsx with drag-to-swipe interactions and action callbacks.
by system
Create src/components/DreamDeck.tsx rendering a stack of SwipeDreamCard items.
by system
Create src/components/DeckToolbar.tsx with next/prev and delete/edit shortcuts.
by system
Create src/components/GallerySearch.tsx for text search with debounced input.
by system
Create src/components/GalleryFilters.tsx for mood and tag filtering.
by system
Create src/components/DreamGridCard.tsx to display a dream summary with doodle thumbnail.
by system
Create src/pages/GalleryPage.tsx showing searchable/filterable grid from useDreams.
by system
Create src/components/EditDreamDialog.tsx using shadcn Dialog to edit a selected dream.
by system
Create src/components/DeleteDreamDialog.tsx to confirm removals from gallery/deck.
by system
Create src/components/RemixCloud.tsx rendering a lightweight word-cloud/collage with Tailwind styling.
by system
Create src/pages/RemixPage.tsx composing RemixCloud with controls (shuffle/regenerate) fed by useDreams.
by system
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.config.ts with content paths and shadcn theme tokens.
by system
Set up src/index.css with Tailwind directives and shadcn base styles.
by system
Create src/hooks/useDreams.ts managing CRUD state persisted to localStorage.
by system
Create src/lib/storage.ts with load/save helpers and safe JSON parsing.
by system
Create src/App.tsx with shell layout (header + main) and route outlet placeholder.
by system
Implement SPA routing in src/main.tsx using react-router-dom and render App routes.
by system
Create src/types/dream.ts defining DreamCard, Mood, and Tag types.
by system
Add optional sample dreams in src/lib/seed.ts for first-run demo content.
by system
Create src/lib/prompts.ts returning a deterministic daily prompt and shuffle helpers.
by system
Create src/components/DailyPromptCard.tsx showing the prompt and a refresh action.
by system
Create src/lib/remix.ts to aggregate moods/tags into weighted counts for visualization.
by system