Constellation Journal
A mood-and-moment journal that turns each entry into a “star” plotted on a nightly sky canvas, where mood controls star color and intensity, and tags form connecting “constellations.” Users can add/edit entries, browse by date or tag, and toggle views between a list and the interactive sky map with hover tooltips and simple filters. Everything runs client-side with localStorage persistence, using shadcn/ui for forms, dialogs, tabs, and filter controls, and Tailwind for layout and theming.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @radix-ui/react-dialog @radix-ui/react-tabs @radix-ui/react-popover @radix-ui/react-tooltip @radix-ui/react-label @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d
by system
Configure Tailwind content paths and add base directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper for tailwind-merge.
by system
Install shadcn/ui components Button, Input, Textarea, Dialog, Tabs, Badge, Popover, Tooltip, Select, Separator into src/components/ui.
by system
Create src/types/journal.ts defining JournalEntry, Mood, Tag, and filter types.
by system
Create src/lib/storage.ts with loadEntries/saveEntries and safe JSON parsing.
by system
Create src/lib/seed.ts to generate a few demo entries when storage is empty.
by system
Create src/hooks/useEntries.ts managing CRUD entries with localStorage sync.
by system
Create src/hooks/useFilters.ts for date range, tag, mood, and search filters.
by system
Implement src/App.tsx with header, main container, and view tabs (List/Sky).
by system
Create src/components/Header.tsx with app title and “New Entry” button.
by system
Create src/components/EntryDialog.tsx using shadcn Dialog to add/edit an entry.
by system
Create src/components/MoodSelect.tsx using shadcn Select for mood choice.
by system
Create src/components/TagInput.tsx to add/remove tags as Badges with an input.
by system
Create src/components/EntryForm.tsx for title, moment text, mood, date, and tags.
by system
Create src/lib/validate.ts for simple client-side validation and normalization.
by system
Create src/pages/ListView.tsx rendering filtered entries in a vertical list.
by system
Create src/components/EntryListItem.tsx showing mood indicator, title, date, tags, and actions.
by system
Wire edit action from EntryListItem to open EntryDialog with existing data.
by system
Add delete action with confirmation dialog logic in EntryListItem.
by system
Create src/components/FilterBar.tsx with search, mood, tag, and date filter controls.
by system
Create src/components/TagFilterPopover.tsx listing tags with counts and selection.
by system
Create src/components/DateFilter.tsx for quick date presets and a simple range.
by system
Create src/lib/derive.ts to compute unique tags, counts, and filtered subsets.
by system
Create src/pages/SkyView.tsx hosting the canvas and filter summary.
by system
Create src/components/SkyCanvas.tsx drawing stars by entry date/time and mood color/intensity.
by system
Create src/lib/layout.ts to map entries to stable x/y positions and sizes.
by system
Add hover hit-testing in SkyCanvas and show a shadcn Tooltip with entry preview.
by system
Draw connecting lines between stars sharing tags (toggleable) in SkyCanvas.
by system
Add Tailwind-based dark sky theme styles and ensure consistent shadcn theming in src/index.css and App layout.
by system