Constellation Journal
A playful mood-and-notes journal where each entry becomes a star on a nightly sky; mood sets the star color and intensity, while tags create visible “constellation” lines connecting related entries. Users can add/edit entries, filter by mood/tag/date, and switch between a Sky View (interactive canvas with hover tooltips) and a List View for quick searching and editing. Everything runs client-side with localStorage, using shadcn/ui dialogs/forms and Tailwind styling for a cozy, celestial UI.
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
Set up Tailwind directives and base styles in src/index.css.
by system
Add src/lib/utils.ts with cn() helper for class merging.
by system
Create src/types/journal.ts defining JournalEntry, Mood, and Tag types.
by system
Create src/lib/storage.ts to load/save entries with versioned key and JSON safety.
by system
Add src/lib/seed.ts exporting a small set of demo JournalEntry items.
by system
Create src/hooks/useEntries.ts that manages entries CRUD and persists to localStorage.
by system
Create src/hooks/useFilters.ts to store mood/tag/date/search filters in component state.
by system
Create src/lib/filtering.ts with a pure function to filter/sort entries from criteria.
by system
Implement src/App.tsx with header, main content area, and responsive container styling.
by system
Create src/components/TopNav.tsx with app title and view toggle buttons.
by system
Add src/hooks/useViewMode.ts to toggle between Sky View and List View (persisted).
by system
Create src/lib/moods.ts mapping moods to labels, colors, and intensity defaults.
by system
Create src/lib/tags.ts that assigns deterministic colors for tags.
by system
Create src/components/AddEntryButton.tsx that opens the entry dialog.
by system
Create src/lib/entryForm.ts with default values and validation helpers for entry fields.
by system
Create src/components/EntryDialog.tsx using shadcn/ui Dialog to host the entry form.
by system
Create src/components/EntryForm.tsx with controlled inputs for mood, title, notes, tags, and date.
by system
Update EntryDialog to support edit mode with initial values and onSubmit update.
by system
Create src/components/DeleteEntryAlert.tsx using shadcn/ui AlertDialog for delete confirmation.
by system
Create src/components/FilterBar.tsx with mood select, tag input, date range, and search box.
by system
Create src/components/FilterChips.tsx to display and clear active filters.
by system
Create src/views/ListView.tsx that renders filtered entries in a scrollable list.
by system
Create src/components/EntryListItem.tsx showing mood dot, title/date, tags, and edit/delete actions.
by system
Create src/components/EmptyState.tsx for no entries / no matches messaging.
by system
Create src/views/SkyView.tsx that hosts the canvas and a small legend panel.
by system
Create src/components/SkyCanvas.tsx that draws stars for entries with mood-based color/intensity.
by system
Update SkyCanvas to compute tag groups and draw connecting lines between related entry stars.
by system
Create src/components/StarTooltip.tsx that shows entry details on hover via absolute-positioned overlay.
by system
Add src/lib/hitTest.ts to map pointer coordinates to nearest star for hover/selection.
by system