Constellation Journal
A playful mood-and-moment journal where each entry becomes a “star” on a zoomable night-sky canvas, positioned by time of day and tagged emotion. Users can add quick notes, pick a mood color, attach a few tags, and watch related entries auto-connect into constellations (by shared tags or mood). Includes filters (date range, mood, tags), a daily prompt generator, and localStorage persistence so the sky rebuilds exactly on reload.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i shadcn@latest && npx shadcn@latest init
by system
Configure Tailwind + @tailwindcss/vite and add base Tailwind directives in src/index.css.
by system
Install a minimal set of shadcn/ui components (Button, Input, Textarea, Select, Popover, Calendar, Dialog, Badge, Slider) via CLI.
by system
Create src/types/journal.ts with Entry, Mood, Tag, and Filter types.
by system
Create src/data/moods.ts exporting mood options with ids, labels, and Tailwind color tokens.
by system
Create src/data/prompts.ts exporting a list of daily prompt strings.
by system
Create src/lib/storage.ts with load/save utilities and versioned key constants.
by system
Create src/lib/entries.ts to normalize dates, generate ids, and map entries to/from JSON.
by system
Create src/lib/filters.ts to apply date range, mood, and tag filters to entries.
by system
Create src/lib/constellations.ts to compute edges between entries based on shared tags and/or mood.
by system
Create src/lib/skyLayout.ts to map an entry’s time-of-day and mood to x/y coordinates.
by system
Create src/App.tsx with a two-pane layout: left controls panel and right sky canvas area.
by system
Create src/hooks/useJournalStore.ts managing entries, filters, and persistence with localStorage.
by system
Create src/hooks/useDailyPrompt.ts to select a deterministic prompt per day and allow “reroll”.
by system
Create src/components/SkyCanvas.tsx rendering the zoomable/pannable sky viewport container.
by system
Add pointer + wheel pan/zoom logic to SkyCanvas.tsx with bounds and reset support.
by system
Create src/components/StarField.tsx to render stars for filtered entries as positioned elements.
by system
Create src/components/Star.tsx showing a colored star dot with hover/focus styles.
by system
Create src/components/StarTooltip.tsx displaying entry time, mood, tags, and note preview.
by system
Create src/components/ConstellationLines.tsx to render edges between related stars using SVG overlay.
by system
Add selection handling (click star to select/deselect) to the journal store hook.
by system
Create src/components/EntryDetailsPanel.tsx to show the selected entry and quick actions.
by system
Create src/components/NewEntryDialog.tsx with shadcn Dialog for creating a journal entry.
by system
Create src/components/MoodPicker.tsx for selecting mood and color from the palette.
by system
Create src/components/TagInput.tsx for adding/removing tags as pills with autocomplete from existing tags.
by system
Create src/components/TimePicker.tsx for selecting entry timestamp (default now).
by system
Create src/components/FiltersPanel.tsx with controls for date range, mood, and tags.
by system
Create src/components/ActiveFiltersBar.tsx showing active filters as removable chips.
by system
Wire useJournalStore.ts to save entries/filters on change and rebuild state from localStorage on load.
by system
Add basic empty-sky and storage-parse error UI states in App.tsx.
by system