Constellation Journal
A mood-and-moment journal where each entry becomes a “star” on a nightly sky canvas, positioned by time of day and colored by mood. Users can add/edit entries with tags, then filter the sky by tag, mood, or date range and click stars to read the full note in a shadcn/ui drawer. Everything is client-side with localStorage, plus an optional “streak telescope” view showing streaks and simple stats (most common mood, busiest days) to keep the scope small and modular.
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
Configure Tailwind in tailwind.config.ts and add the @tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/journal.ts defining Mood, Tag, JournalEntry, and filter types.
by system
Create src/lib/moods.ts mapping moods to labels and star colors.
by system
Create src/lib/storage.ts to load/save entries and app settings with versioning.
by system
Create src/hooks/useEntries.ts to manage entries state and persist to localStorage.
by system
Create src/hooks/useFilters.ts to manage mood/tag/date filters and derived predicates.
by system
Create src/components/AppShell.tsx with header, main container, and responsive layout.
by system
Create src/components/TopBar.tsx with buttons for new entry, filters, and telescope view.
by system
Install and add shadcn/ui components used across the app (button, input, textarea, badge, select, popover, calendar, drawer, dialog).
by system
Create src/components/EntryForm.tsx with fields for mood, title, note, datetime, and tags.
by system
Create src/components/TagInput.tsx to add/remove tags with a compact chip UI.
by system
Create src/components/NewEntryDialog.tsx wrapping EntryForm in a shadcn Dialog.
by system
Create src/components/EditEntryDialog.tsx to edit an existing entry and save changes.
by system
Create src/components/DeleteEntryDialog.tsx to confirm and perform entry deletion.
by system
Create src/components/SkyCanvas.tsx that draws stars on a canvas based on entry time and mood color.
by system
Create src/lib/skyMath.ts to map datetime to x/y coordinates and handle responsive scaling.
by system
Add src/lib/hitTest.ts to find the nearest star on click/tap using canvas coordinates.
by system
Create src/components/EntryDrawer.tsx showing full entry details in a shadcn Drawer.
by system
Create src/pages/SkyPage.tsx wiring entries, filters, SkyCanvas, and EntryDrawer selection state.
by system
Create src/components/FilterPanel.tsx with mood multi-select, tag picker, and date range controls.
by system
Create src/components/TagFilter.tsx to choose included tags from existing entry tags.
by system
Create src/components/DateRangePicker.tsx using shadcn Calendar/Popover to set from/to dates.
by system
Create src/components/ActiveFilters.tsx showing removable chips for current filters.
by system
Create src/lib/tags.ts to extract, normalize, and sort unique tags from entries.
by system
Create src/lib/stats.ts to compute streaks, busiest days, and most common mood.
by system
Create src/pages/TelescopePage.tsx displaying streak and stats cards from computed metrics.
by system
Create src/components/StatsCards.tsx with small shadcn Card-based widgets for metrics.
by system
Update src/App.tsx to switch between SkyPage and TelescopePage with simple client-side state navigation.
by system