Constellation Journal
A playful mood-and-moment journal where each entry becomes a “star” with a color, intensity, and tag; entries automatically arrange into a nightly constellation view you can pan/zoom and hover to read. Includes a simple entry form, tag filters, and a timeline list view, with everything saved to localStorage and exportable/importable as JSON. Built as a single React SPA with clear components: entry creation modal, constellation canvas/SVG renderer, filters panel, and entries sidebar.
Create src/components/EntryListItem.tsx to show star color, intensity, timestamp, and snippet.
by system
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 shadcn CSS variables.
by system
Implement App.tsx shell with header, main split view (canvas + sidebar), and responsive stacking.
by system
Create a src/types/journal.ts file defining JournalEntry, Tag, and import/export payload types.
by system
Add src/lib/storage.ts helpers to load/save entries with versioned keys and basic validation.
by system
Add src/lib/seed.ts to generate a small default set of entries when storage is empty.
by system
Create src/hooks/useEntries.ts to manage entries state, CRUD actions, and persistence.
by system
Add src/lib/tags.ts to compute available tags and counts from the entries list.
by system
Create src/hooks/useEntryFilters.ts to manage selected tags, search text, and date range.
by system
Add src/lib/filterEntries.ts to apply filters/sorting to entries in a pure function.
by system
Create src/components/HeaderBar.tsx with buttons for New Entry, Import, Export, and View toggle.
by system
Create src/components/EntryModal.tsx using shadcn Dialog with form fields and submit/cancel.
by system
Implement src/components/EntryFormFields.tsx for mood color, intensity slider, tags, date, and note.
by system
Add minimal client-side validation/coercion in the modal submit handler (required fields, ranges).
by system
Extend EntryModal.tsx to support editing an existing entry and pre-filling form values.
by system
Add a delete button with confirmation for a selected entry in the sidebar detail view.
by system
Create src/components/FiltersPanel.tsx with tag chips, search input, and clear-filters control.
by system
Create src/components/TagChip.tsx as a small selectable pill using shadcn Button/Badge styles.
by system
Create src/components/TimelineList.tsx to render entries grouped/sorted by date with compact rows.
by system
Create src/components/EntriesSidebar.tsx to host filters, list view, and selected entry preview.
by system
Create src/components/EntryPreview.tsx to show full note, tags, and metadata for the active entry.
by system
Add src/lib/constellationLayout.ts to map entries to x/y positions deterministically (nightly clustering).
by system
Create src/components/ConstellationView.tsx that renders stars as SVG circles with color/intensity.
by system
Create src/components/StarTooltip.tsx to show entry summary when hovering a star.
by system
Add pointer/wheel pan-zoom interactions in ConstellationView.tsx with a simple transform matrix.
by system
Wire star click to set selected entry and sync selection with the sidebar list.
by system
Create src/components/ImportDialog.tsx to paste/upload JSON and merge/replace entries safely.
by system
Implement src/lib/exportJson.ts to download current entries as a JSON file with version metadata.
by system
Add empty/loading states and small UI polish (no entries, no matches, helper text) across views.
by system