Constellation Journal
A mood-and-moment journal that turns each entry into a “star” plotted on a nightly sky canvas, where position and color are based on mood sliders and tags. Users can create, edit, and filter entries, then connect related stars into custom constellations (themes like “work wins” or “self-care”) with auto-generated titles and a simple shareable screenshot export. Everything runs client-side with localStorage, featuring a timeline list view, a sky-map visualizer, and a lightweight insights panel (streaks, common tags, mood averages).
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
Create src/index.css with Tailwind directives and basic CSS variables for shadcn/ui.
by system
Add src/lib/utils.ts with the shadcn/ui cn() helper.
by system
Implement src/App.tsx with a header, main content area, and responsive two-pane layout.
by system
Create src/components/TopNav.tsx with tabs for Timeline, Sky, and Insights.
by system
Add src/types/journal.ts defining Entry, Mood, Tag, and Constellation types.
by system
Create src/lib/storage.ts with load/save helpers and schema versioning.
by system
Create src/state/useEntriesStore.ts exposing CRUD and persistence for entries.
by system
Create src/state/useConstellationsStore.ts exposing CRUD and persistence for constellations.
by system
Add src/lib/seed.ts to generate a small set of sample entries and constellations.
by system
Create src/state/useSettingsStore.ts for view preferences (filters, selected date range, etc.).
by system
Create src/components/MoodSliders.tsx with three sliders (valence, energy, calm).
by system
Create src/components/TagInput.tsx for adding/removing tags with chips.
by system
Create src/components/EntryDialog.tsx for create/edit entry with mood, tags, and notes.
by system
Add src/lib/entryValidation.ts for minimal client-side validation and normalization.
by system
Create src/pages/TimelinePage.tsx rendering filters + entry list + add button.
by system
Create src/components/EntryListItem.tsx showing date, mood summary, tags, and actions.
by system
Create src/components/EntryList.tsx to render entries sorted by date with empty state.
by system
Create src/components/FilterBar.tsx with tag filter, mood range, and text search.
by system
Add src/lib/filtering.ts with pure functions to filter/sort entries for views.
by system
Create src/pages/SkyPage.tsx with a canvas container and side panel controls.
by system
Add src/lib/starMapping.ts to convert entry moods/tags into x/y position, radius, and color.
by system
Create src/components/SkyCanvas.tsx drawing stars and constellations on a <canvas>.
by system
Add src/lib/skyInteractions.ts for hit-testing stars and basic pan/zoom math.
by system
Create src/components/StarDetailsPanel.tsx showing the selected entry and edit action.
by system
Create src/components/ConstellationBuilder.tsx to select stars and create/update a constellation.
by system
Add src/lib/autoTitle.ts to suggest constellation titles based on common tags/words.
by system
Create src/lib/exportCanvas.ts to export the sky canvas (and overlay) to a PNG download.
by system
Create src/pages/InsightsPage.tsx with cards for streaks, common tags, and mood averages.
by system
Add src/lib/insights.ts with pure functions to compute streaks, tag counts, and averages.
by system