Myth Map Journal
A playful mood journal that turns daily entries into a growing fantasy “map”: each day you pick a mood, add a short note, and the app generates a small themed tile (forest, cave, village, storm, etc.) that snaps onto a grid. Users can browse the map by date, filter tiles by mood/tag, and click any tile to view/edit the entry, with everything saved client-side in localStorage. Includes a lightweight “quest prompts” panel (random writing prompts) and an export/import feature to share or back up your map as JSON.
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 content paths and add @tailwind directives in src/index.css.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/journal.ts defining Entry, Mood, Tag, Tile, and ExportPayload types.
by system
Create src/lib/theme.ts mapping moods to tile themes (forest/cave/village/storm/etc.) and colors.
by system
Create src/lib/date.ts for ISO date keys, formatting, and date comparisons.
by system
Create src/lib/storage.ts to load/save ExportPayload with versioning and error handling.
by system
Create src/state/useJournalStore.ts providing entries CRUD, filters, and persistence integration.
by system
Create src/data/questPrompts.ts exporting a small array of writing prompts.
by system
Create src/lib/random.ts with a deterministic-friendly random picker helper.
by system
Create src/components/AppShell.tsx with header, main two-column layout, and responsive behavior.
by system
Create src/components/HeaderBar.tsx with app title and actions (export/import).
by system
Create src/components/MoodPicker.tsx using shadcn/ui controls to choose a mood.
by system
Create src/components/TagInput.tsx to add/remove simple string tags for an entry.
by system
Create src/components/EntryEditor.tsx for mood, note, tags, and save/cancel actions.
by system
Create src/components/NewEntryPanel.tsx that pre-fills today’s date and opens EntryEditor.
by system
Create src/components/MapTile.tsx that renders a themed tile preview from an Entry.
by system
Create src/components/MapGrid.tsx to display tiles on a snap-to grid and handle selection.
by system
Create src/lib/placement.ts to compute stable grid coordinates per date (and handle collisions).
by system
Create src/components/EntryModal.tsx (shadcn Dialog) to view/edit a selected entry.
by system
Create src/components/FilterBar.tsx with mood multi-select, tag filter, and search.
by system
Create src/lib/filter.ts to apply mood/tag/search/date filters to entries.
by system
Create src/components/DateNavigator.tsx to jump to a date and highlight that tile.
by system
Create src/components/QuestPrompts.tsx showing a random prompt with refresh/copy buttons.
by system
Create src/components/ExportDialog.tsx to download JSON from current stored payload.
by system
Create src/components/ImportDialog.tsx to paste/upload JSON and merge/replace entries.
by system
Create src/lib/validate.ts to validate payload shape/version and surface friendly errors.
by system
Update src/App.tsx to compose AppShell, NewEntryPanel, FilterBar, MapGrid, and side panels.
by system
Create src/components/EmptyState.tsx for no entries/no filter matches messaging.
by system
Add keyboard focus, aria labels, and sensible tab order across key interactive components.
by system