Lantern Mood Map
A playful mood journaling SPA where each day you drop a “lantern” on a tiny map (grid or free-drag canvas), pick a mood color, add 1–2 tags, and optionally a short note. The app renders a monthly view as a glowing constellation of lanterns with filters (by mood, tag, date range), simple insights (streaks, most-used tags, mood distribution), and all data stored in localStorage. Components are clearly separable: entry modal, map/canvas board, calendar timeline, filter/insights sidebar, and export/import (JSON) for backups.
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 -d && npx shadcn@latest add button dialog input textarea select badge calendar separator scroll-area tooltip dropdown-menu sheet tabs
by system
Configure tailwind.config.ts and src/index.css with shadcn/ui globals and Tailwind directives.
by system
Implement App.tsx shell with header, main split-pane, and responsive sidebar using shadcn/ui components.
by system
Create src/lib/types.ts defining LanternEntry, Mood, Tag, Filters, and ImportExportPayload types.
by system
Create src/lib/storage.ts with load/save helpers, versioning, and safe JSON parsing.
by system
Create src/lib/useEntries.ts hook for CRUD entries with localStorage persistence.
by system
Create src/lib/useFilters.ts hook to manage mood/tag/date-range filters in URL-free local state.
by system
Create src/lib/selectors.ts for filtering entries, grouping by month/day, and computing derived views.
by system
Create src/lib/insights.ts to compute streaks, mood distribution, and top tags from entries.
by system
Create src/lib/moods.ts exporting mood options, labels, and Tailwind color tokens.
by system
Create src/components/Header.tsx with app title and actions (new entry, import/export).
by system
Create src/components/NewEntryButton.tsx that opens the entry modal via props.
by system
Create src/components/LanternMarker.tsx rendering a glowing lantern dot with mood color and tooltip.
by system
Create src/components/MapBoard.tsx showing a bounded grid/canvas area and rendering lantern markers.
by system
Add pointer drag/drop handling in MapBoard.tsx to create/move a lantern position for a selected date.
by system
Add lightweight zoom and pan state to MapBoard.tsx with mousewheel and drag background.
by system
Create src/components/DayPicker.tsx using shadcn/ui Calendar to pick the active journaling day.
by system
Create src/components/MonthlyTimeline.tsx to display the current month’s entries as a list/strip by day.
by system
Create src/components/EntryModal.tsx using Dialog that supports create/edit modes via props.
by system
Create src/components/fields/MoodPicker.tsx for selecting mood color/label.
by system
Create src/components/fields/TagsPicker.tsx allowing 1–2 tags with suggestions and validation.
by system
Create src/components/fields/NoteField.tsx with textarea and character limit hint.
by system
Wire EntryModal.tsx to validate inputs and call onSave/onDelete callbacks.
by system
Create src/components/FilterSidebar.tsx with mood, tag, and date-range filter controls.
by system
Create src/components/ActiveFilters.tsx to show removable filter badges.
by system
Create src/components/InsightsPanel.tsx showing streak, top tags, and mood distribution summary.
by system
Create src/components/ExportDialog.tsx to download entries+settings as a JSON file.
by system
Create src/components/ImportDialog.tsx to upload JSON, validate schema, and merge/replace entries.
by system
Add src/components/Toaster.tsx and use it for save/import/export feedback messages.
by system
Connect Header, MapBoard, DayPicker, MonthlyTimeline, FilterSidebar, and EntryModal in App.tsx using hooks/selectors.
by system