Myth Map Journal
A playful mood-and-memory journal that lets you pin short entries onto a tiny fantasy map made of draggable “locations” (forest, tavern, mountain, etc.), each with its own icon, color, and notes. Users can create locations, write entries with tags and a mood meter, then filter/search to see how their “story world” changes over time. Everything runs client-side with localStorage, featuring a clean shadcn/ui layout (map canvas, entry editor drawer, timeline/list view) and export/import of the journal as JSON.
Add empty/loading-like states in MapCanvas and TimelineView for first-run usability.
by system
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i clsx tailwind-merge lucide-react && npx shadcn@latest init && npx shadcn@latest add button card input textarea badge drawer sheet tabs select slider dialog dropdown-menu separator scroll-area tooltip
by system
Configure Tailwind content paths and add Tailwind directives to src/index.css.
by system
Create src/lib/utils.ts with cn() helper and any needed exports.
by system
Create src/types.ts for Location, Entry, Mood, Tag, and persisted state shapes.
by system
Create src/data/seed.ts exporting a small starter map and sample entries.
by system
Create src/store/useJournalStore.ts implementing CRUD + persistence with localStorage.
by system
Create src/lib/serialization.ts to serialize/validate/parse journal JSON.
by system
Implement src/App.tsx with a header and 3-pane layout (map, editor drawer, timeline).
by system
Create src/components/HeaderBar.tsx with app title and export/import/reset actions.
by system
Create src/components/ExportDialog.tsx to show JSON output and copy/download controls.
by system
Create src/components/ImportDialog.tsx to paste/upload JSON and apply it to the store.
by system
Create src/components/ResetDialog.tsx to confirm clearing localStorage and state.
by system
Create src/components/MapCanvas.tsx rendering the map background and location nodes.
by system
Create src/components/MapBackground.tsx with a lightweight SVG/pattern backdrop.
by system
Create src/components/LocationNode.tsx showing icon, name, and color with hover affordances.
by system
Add pointer-based drag handling in src/components/MapCanvas.tsx to update node positions.
by system
Create src/components/CreateLocationDialog.tsx with form fields (name, type/icon, color).
by system
Create src/components/EditLocationDialog.tsx to rename, recolor, change icon, or delete.
by system
Create src/data/locationPresets.ts listing fantasy location types with icons/colors defaults.
by system
Create src/components/EntryEditorDrawer.tsx using shadcn Drawer/Sheet for entry editing.
by system
Create src/components/EntryForm.tsx with title/body, location picker, and tag input.
by system
Create src/components/MoodMeter.tsx using a Slider with labeled mood states.
by system
Wire src/components/EntryForm.tsx submit to create/update entries in the store.
by system
Create src/components/TimelineView.tsx listing entries grouped by date with quick actions.
by system
Create src/components/EntryListItem.tsx rendering entry summary, mood, tags, and location.
by system
Create src/components/FilterBar.tsx for query, mood range, tag, and location filters.
by system
Create src/store/useFilters.ts to manage filter UI state separately from journal data.
by system
Create src/lib/selectors.ts to derive filtered/sorted entries from store + filters.
by system
Create src/components/TagChips.tsx for displaying and removing tags consistently.
by system