Constellation Journal
A mood-and-moment journal that turns each entry into a “star” on an interactive night-sky canvas, where color reflects mood and size reflects intensity. Users can add quick entries (mood, tags, short note), filter the sky by date range or tag, and click stars to read/edit details, with all data saved to localStorage. Includes a lightweight “stargazer” mode that animates subtle twinkling and draws temporary lines to form constellations from selected tags for playful reflection without expanding scope.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react clsx tailwind-merge && npx shadcn@latest init -d
by system
Configure tailwind.config.ts content paths and add global Tailwind directives in src/index.css.
by system
Create src/lib/utils.ts with cn() helper using clsx + tailwind-merge.
by system
Create src/types/journal.ts defining Mood, JournalEntry, and filter types.
by system
Create src/lib/storage.ts to load/save entries with versioned key and JSON guards.
by system
Create src/lib/seed.ts to generate a few deterministic starter entries if storage is empty.
by system
Create src/hooks/useEntries.ts to manage CRUD entries and persist to localStorage.
by system
Create src/hooks/useEntryFilter.ts to store date range, tag query, and selected tags.
by system
Create src/lib/filtering.ts to filter/sort entries by date range and tags.
by system
Create src/lib/mood.ts mapping mood values to Tailwind colors/hex for canvas rendering.
by system
Create src/lib/intensity.ts to map intensity (1-5) to star radius and glow.
by system
Create src/lib/layout.ts to map entries to stable x/y positions from entry id/date.
by system
Create src/components/SkyCanvas.tsx rendering stars on a <canvas> from entries.
by system
Add click hit-testing in SkyCanvas.tsx to detect which star was clicked and emit entry id.
by system
Add requestAnimationFrame-based subtle twinkling option to SkyCanvas.tsx.
by system
Add optional temporary line drawing between stars sharing selected tag(s) in SkyCanvas.tsx.
by system
Create src/components/StargazerToggle.tsx to toggle twinkle/constellation overlay state.
by system
Create src/components/AppShell.tsx with header, sidebar panel, and main sky area.
by system
Create src/components/HeaderBar.tsx with app title and stargazer toggle slot.
by system
Create src/components/AddEntryForm.tsx for mood, intensity, tags, note, and submit.
by system
Create src/components/TagInput.tsx to add/remove tags with chips and comma/enter support.
by system
Create src/components/MoodPicker.tsx as a compact select/grid using shadcn/ui components.
by system
Create src/components/IntensitySlider.tsx using shadcn/ui Slider with 1-5 labels.
by system
Create src/components/FilterPanel.tsx with date range inputs and tag query/select.
by system
Create src/components/TagSuggestions.tsx listing existing tags and allowing quick selection.
by system
Create src/components/EntryDialog.tsx (shadcn Dialog) to display entry details when a star is clicked.
by system
Create src/components/EditEntryForm.tsx to edit mood/intensity/tags/note and save changes.
by system
Add a delete button with confirmation inside EntryDialog.tsx to remove the entry.
by system
Update src/App.tsx to connect hooks, filtering, and UI components into the working SPA.
by system
Add simple empty/loading/invalid-filter states in AppShell.tsx and FilterPanel.tsx.
by system