Constellation Journal
A mood-and-moment journal where each entry becomes a “star” on an interactive night-sky canvas, positioned by mood (y-axis) and energy (x-axis), with color representing emotion. Users can add/edit entries, filter by tags/date, and click stars to open a shadcn/ui drawer with the full note, plus simple stats like streaks and mood distribution—all saved to localStorage in a single React + Vite SPA.
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 and add base styles in src/index.css (tailwind directives + CSS variables for shadcn).
by system
Install shadcn/ui components needed (button, input, textarea, label, badge, card, drawer, dialog, popover, tabs, separator, toast).
by system
Build src/App.tsx layout with header, main area, and responsive two-pane structure (canvas + sidebar).
by system
Create src/types/journal.ts defining Entry, Mood, Energy, Tag, and derived stat shapes.
by system
Create src/lib/storage.ts with load/save utilities and schema versioning key.
by system
Create src/hooks/useEntries.ts to manage CRUD + persistence to localStorage.
by system
Create src/lib/moodColors.ts to map mood/emotion to star color and UI accents.
by system
Create src/lib/tags.ts for parsing, normalizing, and deduplicating tag strings.
by system
Add optional dev-only seed data helper in src/lib/seed.ts to populate entries when storage empty.
by system
Create src/components/EntryForm.tsx with inputs for title, note, mood, energy, tags, and date.
by system
Create src/components/AddEntryDialog.tsx wrapping EntryForm in a shadcn Dialog and calling createEntry.
by system
Create src/components/EditEntryDialog.tsx to edit an existing entry and call updateEntry.
by system
Create src/components/DeleteEntryDialog.tsx to confirm deletion and call deleteEntry.
by system
Create src/hooks/useFilters.ts managing tag selection, date range, and search query.
by system
Create src/components/FilterBar.tsx with tag chips, date inputs, and search field bound to useFilters.
by system
Create src/components/EntryList.tsx showing filtered entries with quick actions (edit/delete).
by system
Create src/lib/stats.ts to compute streaks, mood distribution, and counts from entries.
by system
Create src/components/StatsPanel.tsx to render streaks and mood distribution using computed stats.
by system
Create src/lib/skyCoords.ts mapping mood/energy values to canvas x/y with padding and scaling.
by system
Create src/components/SkyCanvas.tsx rendering stars on an HTML canvas with pan/zoom disabled initially.
by system
Add lightweight hover hit-testing + tooltip rendering inside SkyCanvas for entry title/date.
by system
Implement click hit-testing in SkyCanvas to set selectedEntryId when a star is clicked.
by system
Create src/components/EntryDrawer.tsx using shadcn Drawer to show selected entry details.
by system
Add an Edit button inside EntryDrawer that opens EditEntryDialog for the selected entry.
by system
Add a Delete button inside EntryDrawer that opens DeleteEntryDialog for the selected entry.
by system
Wire App.tsx to combine useEntries + useFilters to produce filteredEntries for list and canvas.
by system
Add success/error toasts for create/update/delete using shadcn toast primitives.
by system
Add friendly empty-state UI for no entries and no filter matches in canvas and list.
by system
Create src/components/ImportExportPanel.tsx to export entries to JSON and import/merge from a file.
by system