Constellation Journal
A mood-and-moment journal where each entry becomes a “star” placed on a nightly sky canvas, forming constellations based on tags (e.g., Work, Friends, Health). Users can add entries with mood, short note, tags, and a color; then filter the sky by date range, mood, or tag to watch patterns emerge. Everything runs client-side with localStorage, featuring a timeline list view, a sky/constellation view with hover details, and a simple insights panel (most common tags, mood trends, streaks).
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 @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-slider @radix-ui/react-tabs @radix-ui/react-tooltip && npx shadcn@latest init.
by system
Configure Tailwind in tailwind.config.ts and add directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Implement src/App.tsx with header, main container, and two-panel responsive layout.
by system
Create src/components/NavTabs.tsx using shadcn Tabs to switch between Timeline, Sky, and Insights.
by system
Create src/types/journal.ts with Entry, Mood, Tag, and Filter type definitions.
by system
Create src/lib/storage.ts to load/save entries and settings from localStorage.
by system
Create src/hooks/useEntries.ts to manage entries CRUD and persist changes.
by system
Create src/hooks/useFilters.ts to manage date range, mood, and tag filters.
by system
Add optional demo seed logic in src/lib/seed.ts for first-run sample data.
by system
Create src/components/EntryFormDialog.tsx with shadcn Dialog wrapper and submit/cancel actions.
by system
Create src/components/MoodPicker.tsx for selecting mood with labeled options/icons.
by system
Create src/components/TagInput.tsx to add/remove tags as chips and prevent duplicates.
by system
Create src/components/ColorPicker.tsx to choose a star color from a small palette.
by system
Add lightweight client-side validation in the form component (required note/mood, max lengths).
by system
Create src/pages/TimelinePage.tsx to render filters + entry list + add-entry button.
by system
Create src/components/EntryList.tsx to render entries grouped by date with empty state.
by system
Create src/components/EntryListItem.tsx showing mood, note preview, tags, color dot, and timestamp.
by system
Create src/components/EntryActionsMenu.tsx with edit/delete actions using shadcn DropdownMenu.
by system
Create src/components/DeleteEntryDialog.tsx to confirm removal of an entry.
by system
Create src/components/FilterBar.tsx with date range inputs and mood/tag selectors.
by system
Create src/components/TagFilter.tsx to select one tag (or all) from available tags.
by system
Create src/components/MoodFilter.tsx to filter by mood (or all).
by system
Create src/components/DateRangeFilter.tsx with start/end date inputs and reset.
by system
Add src/lib/selectors.ts to compute filtered/sorted entries from entries + filters.
by system
Create src/pages/SkyPage.tsx to render sky canvas container and hover details panel.
by system
Create src/components/SkyCanvas.tsx to draw stars for filtered entries on an HTML canvas.
by system
Add src/lib/layout.ts to deterministically place stars per entry (seeded by id/date) and avoid overlaps.
by system
Add hover interaction in SkyCanvas to detect nearest star and emit the active entry.
by system
Add src/lib/constellations.ts to group by tag and draw connecting lines between same-tag stars.
by system
Create src/pages/InsightsPage.tsx to show most common tags, mood trend summary, and streaks.
by system