Constellation Journal
A playful mood-and-moment journal where each entry becomes a “star” on a nightly sky map; tags (e.g., work, friends, health) become colored constellations you can filter and connect. Users can add quick entries with mood, short text, and tags, then view them as an interactive zoomable canvas or a chronological list, with simple stats like streaks and tag frequency. Everything runs client-side with localStorage, and the UI is split into clear components: EntryForm, SkyCanvas, FiltersPanel, EntryList, and Insights.
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.config and src/index.css with Tailwind directives and content paths.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types/journal.ts defining Entry, Mood, TagId, and derived stats types.
by system
Create src/lib/storage.ts with load/save functions and versioned key constants.
by system
Create src/hooks/useEntries.ts for CRUD operations and persistence via localStorage.
by system
Create src/hooks/useFilters.ts to manage selected tags, mood filter, and search text.
by system
Create src/lib/insights.ts to compute streaks, tag frequency, and mood counts from entries.
by system
Create src/lib/seed.ts to generate optional demo entries and tags for first run.
by system
Implement src/App.tsx with header, main split layout, and component placeholders.
by system
Create src/components/ViewToggle.tsx to switch between Sky and List views in App state.
by system
Create src/components/ThemeToggle.tsx to switch light/dark using a class on documentElement.
by system
Create src/components/EntryForm.tsx with mood selector, text input, tag picker, and submit button.
by system
Add minimal client-side validation and disabled submit behavior inside EntryForm.
by system
Wire EntryForm submit to useEntries addEntry() and reset form on success.
by system
Create src/lib/tags.ts defining default tags with stable colors and labels.
by system
Create src/components/FiltersPanel.tsx with tag chips, mood filter, and search field.
by system
Connect FiltersPanel controls to useFilters state and expose a clear-filters action.
by system
Create src/lib/selectors.ts exporting a function to filter/sort entries by current filters.
by system
Create src/components/EntryList.tsx rendering filtered entries chronologically with mood, tags, and time.
by system
Add per-entry delete action UI and confirmation inside EntryList.
by system
Create src/components/SkyCanvas.tsx with a responsive canvas element and resize handling.
by system
Implement drawing of entries as stars on SkyCanvas with deterministic positions from entry ids.
by system
Draw colored connecting lines between stars sharing a selected tag on SkyCanvas.
by system
Add mouse/touch pan and wheel/pinch zoom logic to SkyCanvas with clamped scale.
by system
Implement hover hit-testing and a small tooltip showing entry preview near cursor.
by system
Add click-to-select a star and expose selectedEntryId to parent via callback prop.
by system
Create src/components/EntryDialog.tsx (shadcn Dialog) to show full entry details and tags.
by system
Create src/components/Insights.tsx showing streak, total entries, top tags, and mood distribution.
by system
Add empty/loading-first-run states for SkyCanvas, EntryList, and Insights when there are no entries.
by system