Constellation Journal
A mood-and-moment journal that turns each entry into a “star” on an interactive night-sky map, where tags and mood intensity influence color, size, and clustering. Users can add/edit entries, filter by tag/date/mood, and click stars to read details, with optional guided prompts and a weekly “sky recap” view. Everything runs client-side with localStorage, using a clear split between entry editor, sky canvas/map, filters/search, and recap components.
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 src/index.css with Tailwind directives and a simple app background theme.
by system
Add react-router routes for Sky, Entry, and Recap pages in src/main.tsx.
by system
Implement src/App.tsx with a layout container and an <Outlet/> region.
by system
Create src/components/TopNav.tsx with links to Sky, New Entry, and Recap.
by system
Add src/types/entry.ts defining JournalEntry, Mood, and Tag types.
by system
Create src/lib/storage.ts to load/save entries and app settings in localStorage.
by system
Add src/lib/id.ts to generate stable unique IDs for new entries.
by system
Create src/lib/dates.ts for week boundaries, formatting, and date filtering helpers.
by system
Add src/lib/mood.ts to map mood + intensity into HSL/hex colors and labels.
by system
Create src/hooks/useEntries.ts to CRUD entries and persist changes via storage.
by system
Create src/hooks/useFilters.ts to manage tag/date/mood filters in component state.
by system
Create src/pages/SkyPage.tsx to compose FiltersPanel + SkyMap + EntryDetailsDrawer.
by system
Create src/pages/EntryEditorPage.tsx to create/edit an entry based on route params.
by system
Create src/pages/RecapPage.tsx to render WeeklyRecap and a week selector.
by system
Implement src/components/FiltersPanel.tsx with tag chips, mood range, and date range inputs.
by system
Create src/components/TagSelector.tsx for adding/removing tags with suggestions.
by system
Create src/components/MoodSlider.tsx using shadcn Slider to set mood intensity.
by system
Create src/components/DateRangeFields.tsx with two date inputs and clear action.
by system
Create src/components/SearchBox.tsx to filter entries by title/body substring.
by system
Implement src/components/SkyMapCanvas.tsx drawing stars on a <canvas> with pan/zoom.
by system
Create src/lib/layout.ts to compute x/y positions and simple clustering by tag similarity.
by system
Add src/lib/starStyle.ts to convert entry mood/tags into star size, glow, and color.
by system
Implement src/lib/hitTest.ts to find the nearest star for click/hover interactions.
by system
Create src/components/SkyMap.tsx to connect entries+filters to SkyMapCanvas props and selection.
by system
Create src/components/EntryDetailsDrawer.tsx showing selected entry content with edit/delete actions.
by system
Implement src/components/EntryForm.tsx for title, body, mood, tags, and date fields.
by system
Create src/components/GuidedPrompts.tsx with optional prompt suggestions that append into the body.
by system
Implement src/components/WeeklyRecap.tsx summarizing week mood averages, top tags, and entry count.
by system
Create src/components/RecapSkyMini.tsx rendering a small, non-interactive sky snapshot for the selected week.
by system