Myth Map Journal
A playful mood-and-memories journal where each entry becomes a “landmark” on a fantasy map—users pick a mood, write a short note, and the app generates a themed icon, color, and location on a draggable 2D map. Entries are browsable via map pins and a timeline/list view, with simple filters (mood, tag) and optional prompts to inspire writing; everything saves to localStorage. The UI is split into clear components (MapCanvas, EntryModal, PromptDeck, FiltersBar, TimelineList, Settings) so multiple agents can build features in parallel without overlap.
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 content paths and base theme to work with shadcn/ui.
by system
Set up src/index.css with Tailwind directives and shadcn/ui CSS variables.
by system
Implement src/App.tsx layout with header, main split, and responsive grid.
by system
Define Entry, Mood, Tag, Prompt, and Settings types in src/types.ts.
by system
Implement src/store/storage.ts helpers for load/save JSON with versioning.
by system
Implement src/store/useEntries.ts for CRUD, selection, and persistence.
by system
Implement src/store/useSettings.ts for settings state and persistence.
by system
Create src/lib/seeded.ts for deterministic random based on entry id.
by system
Create src/lib/moods.ts mapping mood to label, color, and icon key.
by system
Create src/lib/icons.ts to map icon keys to lucide-react components.
by system
Create src/lib/landmarks.ts to derive entry icon/color/coords from seed.
by system
Implement src/components/MapCanvas.tsx rendering a pannable 2D map surface.
by system
Implement src/components/MapPinsLayer.tsx to draw clickable pins for entries.
by system
Implement src/components/usePinDrag.ts to drag pins and update entry coords.
by system
Implement src/components/MapGridOverlay.tsx for subtle fantasy grid overlay.
by system
Implement src/components/EntryModal.tsx using shadcn Dialog for create/edit.
by system
Implement src/components/MoodPicker.tsx as a compact mood select grid.
by system
Implement src/components/TagsInput.tsx for adding/removing simple text tags.
by system
Implement src/components/EntryForm.tsx handling validation and submit.
by system
Implement src/components/PromptDeck.tsx to show shuffleable writing prompts.
by system
Create src/lib/prompts.ts exporting default prompt strings by theme.
by system
Implement src/components/FiltersBar.tsx with mood and tag filters + search.
by system
Implement src/store/useFilters.ts to manage filter state and derived results.
by system
Implement src/components/TimelineList.tsx for chronological entry cards.
by system
Implement src/components/EntryCard.tsx displaying mood, note, tags, date.
by system
Implement src/store/useSelection.ts for shared selectedEntryId and actions.
by system
Implement src/components/Settings.tsx for toggles like prompts and map style.
by system
Implement src/components/DataPort.tsx to export/import JSON to/from file.
by system
Update src/App.tsx to connect hooks and compose MapCanvas, lists, modal, and settings.
by system