Constellation Journal
A playful mood-and-memories journal where each entry becomes a "star" on a nightly sky map, with mood, tags, and a short note determining its color, size, and position. Users can browse by calendar or explore the interactive sky, filter by mood/tag, and click stars to view/edit entries; everything is saved to localStorage. Include a simple "auto-constellation" mode that draws subtle lines between related entries (same tag or similar mood) and a shareable export/import JSON for moving journals between devices.
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
by system
Configure tailwind.config and src/index.css with Tailwind directives and a minimal app theme.
by system
Add core shadcn/ui components (Button, Card, Dialog, Input, Textarea, Select, Badge, Tabs, Calendar) via CLI.
by system
Create src/types/journal.ts with JournalEntry, Mood, Tag, and ExportSchema types.
by system
Create src/lib/storage.ts with load/save helpers and schema versioning.
by system
Create src/state/useJournalStore.ts with CRUD actions and persistence to localStorage.
by system
Add optional dev-only seeding function for a few sample entries in the store.
by system
Create src/components/AppShell.tsx with top nav, main area, and responsive container.
by system
Add react-router and create src/router.tsx with routes for Sky, Calendar, and Settings.
by system
Create src/components/NavBar.tsx with links and active state styling.
by system
Create src/lib/moods.ts defining mood labels, colors, and size multipliers.
by system
Create src/lib/starMapping.ts to compute star color/size/position from entry fields deterministically.
by system
Create src/lib/tags.ts for parsing, normalizing, and displaying tags.
by system
Create src/pages/SkyPage.tsx with toolbar area and canvas/SVG container.
by system
Create src/components/SkyMap.tsx that renders stars as SVG circles with pan/zoom-ready viewBox.
by system
Create src/components/StarTooltip.tsx to show date, mood, and note snippet on hover/focus.
by system
Add selection state in SkyPage to open an entry details dialog when a star is clicked.
by system
Create src/components/EntryDialog.tsx to view entry fields and provide Edit/Delete actions.
by system
Create src/components/EntryForm.tsx for create/edit with mood select, tags input, and note textarea.
by system
Add a New Entry button on SkyPage that opens EntryForm with defaults for today.
by system
Create src/pages/CalendarPage.tsx using shadcn Calendar and a side list for that day’s entries.
by system
Add day-level indicators (dots/badges) for days with entries in CalendarPage.
by system
Create src/components/EntryListItem.tsx for compact display and click-to-open EntryDialog.
by system
Create src/components/FiltersBar.tsx with mood multi-select and tag chips input.
by system
Create src/lib/filtering.ts to filter entries by mood and tags consistently across pages.
by system
Wire FiltersBar into SkyPage so only matching stars and constellations render.
by system
Create src/lib/constellations.ts that returns subtle line segments connecting related entries by tag or similar mood.
by system
Update SkyMap to render SVG line segments behind stars with a toggle to enable/disable.
by system
Create src/pages/SettingsPage.tsx with export button (download) and import textarea/file input (validate then merge/replace).
by system
Create src/lib/transfer.ts to serialize/deserialize entries with validation and schema version handling.
by system