Dream Map
A playful mood-and-memory journaling SPA where users drop short “dream notes” onto a draggable, zoomable map canvas as floating islands, then tag them with emotions, symbols, and colors. The app generates lightweight connections between notes based on shared tags, offering a toggleable “constellation view” that highlights recurring themes over time. Everything runs client-side with localStorage: create/edit notes, filter by tag/date/emotion, and export or import the journal as a JSON file.
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 + @tailwindcss/vite and add Tailwind directives to src/index.css.
by system
Build a basic shell in src/App.tsx with header, left sidebar, and main canvas area.
by system
Create src/lib/types.ts defining DreamNote, Tag, Emotion, and import/export schema types.
by system
Add src/lib/storage.ts with load/save utilities and schema versioning.
by system
Implement src/lib/useNotesStore.ts as a React hook managing notes CRUD + persistence.
by system
Add a small optional demo dataset in src/lib/demoData.ts and a toggle to load it.
by system
Create src/lib/useViewport.ts to manage pan/zoom state and coordinate transforms.
by system
Implement src/components/MapCanvas.tsx rendering a pan/zoomable container for islands.
by system
Add pointer/trackpad interactions + UI buttons for zoom in/out/reset in MapCanvas.tsx.
by system
Create src/components/NoteIsland.tsx to display a note as a floating “island” card.
by system
Add draggable behavior to NoteIsland.tsx that updates the note’s x/y coordinates.
by system
Map note color/emotion to Tailwind styles in NoteIsland.tsx with a small palette.
by system
Build src/components/CreateNoteDialog.tsx for adding a new dream note with title/body.
by system
Build src/components/EditNoteDialog.tsx for editing an existing note’s fields.
by system
Add a delete confirmation action to EditNoteDialog.tsx that removes the note.
by system
Create src/components/EmotionPicker.tsx for selecting one emotion from a fixed list.
by system
Create src/components/TagInput.tsx to add/remove string tags with chips.
by system
Create src/components/SymbolPicker.tsx to select common dream symbols (strings/icons).
by system
Implement src/components/FiltersPanel.tsx with controls for tag, emotion, and date range.
by system
Add src/lib/filtering.ts to filter notes by active filters and return visible notes.
by system
Create src/components/NotesList.tsx showing filtered notes with click-to-focus.
by system
Implement centering/zoom-to-note in MapCanvas.tsx when a note is selected.
by system
Add src/lib/connections.ts to compute lightweight edges based on shared tags/symbols/emotions.
by system
Add a UI toggle in src/App.tsx to enable/disable constellation view.
by system
Implement src/components/ConstellationOverlay.tsx drawing SVG lines between connected notes.
by system
Create src/components/InsightsPanel.tsx summarizing top recurring tags/emotions over time.
by system
Add src/lib/exportImport.ts to export the full journal state as a downloadable JSON file.
by system
Add src/components/ImportDialog.tsx to load a JSON file and replace/merge local data.
by system
Add minimal empty-state UI and shadcn/ui toast notifications for save/import/export actions.
by system