Constellation Diary
A playful mood journal where each daily entry becomes a “star” plotted on a simple night-sky canvas, with position and color derived from sliders like mood, energy, and stress plus an optional tag. Users can connect stars into named constellations (drag-to-link entries) to represent themes or habits over time, then filter by date range, tag, or mood to reveal patterns. Everything runs client-side with localStorage, featuring a calendar view, a sky view, and an insights panel showing streaks, tag frequency, and mood trends.
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 to src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Add client-side routing with React Router and three routes: Calendar, Sky, Insights.
by system
Build src/components/AppShell.tsx with header and tabbed nav links to the three routes.
by system
Create src/types.ts with Entry, Constellation, StarPoint, and FilterState types.
by system
Implement src/store/storage.ts to load/save entries and constellations to localStorage.
by system
Create src/store/AppStateProvider.tsx to hold entries, constellations, and filters in context.
by system
Add src/store/useEntries.ts with add/update/delete entry helpers wired to persistence.
by system
Add src/store/useConstellations.ts with create/rename/delete/link helpers wired to persistence.
by system
Add a one-time dev-only seed function in src/store/seed.ts to populate sample entries if empty.
by system
Create src/lib/starMapping.ts to convert mood/energy/stress into x/y coordinates, color, and size.
by system
Add src/lib/dates.ts for day keys, range checks, and calendar grid generation.
by system
Add src/lib/tags.ts for normalizing tags and computing tag frequency.
by system
Build src/components/EntryForm.tsx with sliders (mood/energy/stress), tag input, notes, and save.
by system
Create src/components/EntryDialog.tsx to open EntryForm in a shadcn Dialog for add/edit.
by system
Add src/components/EntryListItem.tsx to render an entry summary with edit/delete actions.
by system
Implement src/components/CalendarGrid.tsx showing month days and indicating days with entries.
by system
Create src/components/DayEntriesDrawer.tsx to show entries for a selected day with add/edit.
by system
Build src/pages/CalendarPage.tsx composing CalendarGrid and DayEntriesDrawer.
by system
Create src/components/SkyCanvas.tsx to render stars on a responsive SVG/canvas with pan/zoom.
by system
Add src/components/StarPopover.tsx to show entry details when hovering/clicking a star.
by system
Implement src/components/useSkySelection.ts to manage selected star IDs and drag-link mode.
by system
Enhance SkyCanvas to support drag from one star to another to create a link preview.
by system
Create src/components/ConstellationDialog.tsx to name a new constellation and confirm creation.
by system
Add src/components/ConstellationLayer.tsx to draw polylines/segments connecting linked entries.
by system
Build src/components/FiltersPanel.tsx with date range, tag selector, and mood range controls.
by system
Create src/pages/SkyPage.tsx composing FiltersPanel, SkyCanvas, and constellation rendering.
by system
Implement src/lib/insights.ts to compute streaks, tag frequency, and mood trend series.
by system
Build src/pages/InsightsPage.tsx to display streaks, top tags, and simple charts using SVG.
by system