Constellation Journal
A mood-and-moment journal that turns your entries into a night-sky constellation map: each entry becomes a “star” plotted on a canvas, clustered by mood, with brightness based on intensity and size based on word count. Users can add/edit entries (title, text, mood, intensity, tags), filter the sky by date range/tags/mood, and click stars to open a detail drawer with the full entry. Everything is client-side with localStorage persistence, plus an export/import JSON feature to back up or move your constellation.
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 simple dark sky background.
by system
Create src/App.tsx with a responsive layout shell (header, main, side panel area).
by system
Add src/types/journal.ts defining JournalEntry, Mood, Filters, and import/export payload types.
by system
Add src/lib/storage.ts with load/save utilities and basic schema/version wrapper.
by system
Create src/hooks/useJournalStore.ts managing entries CRUD and persisting to localStorage.
by system
Create src/hooks/useFiltersStore.ts to hold mood/tags/date-range filters and derived predicates.
by system
Add src/lib/seed.ts to provide optional sample entries for empty storage.
by system
Create src/lib/moods.ts defining mood labels, colors, and cluster centers used by the sky plot.
by system
Add src/lib/text.ts with a wordCount() helper for entry size mapping.
by system
Create src/lib/starMap.ts to convert entries into star positions, size, and brightness values.
by system
Implement src/components/SkyCanvas.tsx rendering stars to a <canvas> with pan/zoom basics.
by system
Add star click detection in src/components/SkyCanvas.tsx to emit the selected entry id.
by system
Create src/components/SkyLegend.tsx showing mood colors and a brief size/brightness key.
by system
Create src/components/EntryList.tsx listing entries with mood color chip and date.
by system
Add src/components/AddEntryButton.tsx that opens the entry editor dialog.
by system
Create src/components/EntryForm.tsx with controlled inputs for title, text, mood, intensity, and tags.
by system
Implement src/components/EntryEditorDialog.tsx wrapping EntryForm for create/edit flows.
by system
Add lightweight validation in src/components/EntryForm.tsx (required title/text, intensity bounds).
by system
Wire EntryEditorDialog to useJournalStore for add/update/delete actions.
by system
Create src/components/EntryDetailDrawer.tsx to show full entry details when a star is selected.
by system
Add an Edit button in src/components/EntryDetailDrawer.tsx to open the editor for that entry.
by system
Add a Delete confirmation and delete handler in src/components/EntryDetailDrawer.tsx.
by system
Create src/components/FilterBar.tsx with mood multi-select, tags input, and date range controls.
by system
Filter stars in src/components/SkyCanvas.tsx using predicates from useFiltersStore.
by system
Filter items in src/components/EntryList.tsx using predicates from useFiltersStore.
by system
Create src/components/ExportButton.tsx to download a JSON backup of all entries.
by system
Create src/components/ImportButton.tsx to upload/parse JSON and replace/merge entries with validation.
by system
Add empty sky and parsing error UI in relevant components (SkyCanvas, EntryList, ImportButton).
by system
Tighten Tailwind + shadcn/ui styling across layout, dialogs, drawer, and filter bar for a cohesive night theme.
by system