Constellation Journal
A playful mood-and-moment journal where each entry becomes a “star” on an interactive night-sky map. Users log a short note, mood (color), energy level (star size), and optional tags; the app clusters entries into simple “constellations” by tag and lets users connect stars manually to create their own patterns. Includes timeline and filter views, a search panel, and localStorage persistence with export/import JSON for backups—all in a single React + Vite SPA using Tailwind and shadcn/ui components.
Create src/types/journal.ts for Entry, Mood, Tag, Connection, and AppState types.
by system
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i clsx tailwind-merge lucide-react && npx shadcn@latest init.
by system
Configure Tailwind in src/index.css and tailwind.config.js for shadcn/ui and app styles.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/lib/storage.ts for load/save AppState with versioning and safe parsing.
by system
Create src/lib/seed.ts to generate initial demo entries when storage is empty.
by system
Create src/state/AppStateContext.tsx to provide AppState and actions via React context.
by system
Create src/state/reducer.ts implementing add/update/delete entry and connection actions.
by system
Create src/components/AppShell.tsx with header, sidebar area, and main content slot.
by system
Set up src/router.tsx with routes for Sky, Timeline, and Settings pages.
by system
Create src/components/NavSidebar.tsx using shadcn/ui buttons/links for route navigation.
by system
Create src/pages/SkyPage.tsx with map container, controls row, and selected-entry panel slot.
by system
Create src/pages/TimelinePage.tsx with list container and filter/search toolbar slot.
by system
Create src/pages/SettingsPage.tsx for export/import JSON and reset actions.
by system
Create src/components/EntryFormDialog.tsx for create/edit entry using shadcn/ui Dialog + inputs.
by system
Create src/components/MoodPicker.tsx to select mood color with accessible swatches.
by system
Create src/components/EnergySlider.tsx using shadcn/ui Slider to set star size/energy.
by system
Create src/components/TagsInput.tsx for adding/removing tag pills with keyboard support.
by system
Create src/components/EntryListItem.tsx to render entry summary with mood dot, tags, and actions.
by system
Create src/components/TimelineList.tsx to render entries sorted by date using EntryListItem.
by system
Create src/components/SearchPanel.tsx with query input and matching results list.
by system
Create src/components/FilterBar.tsx for mood/tag/energy filters using shadcn/ui controls.
by system
Create src/lib/selectors.ts with functions to filter, search, and sort entries from state.
by system
Create src/components/SkyCanvas.tsx to render stars and connections via SVG in a responsive container.
by system
Create src/lib/layout.ts to deterministically place stars by entry id and cluster by tag.
by system
Create src/lib/cluster.ts to group entries into constellations by shared tags for labeling.
by system
Add selection/hover handling to SkyCanvas.tsx to select stars and show tooltips.
by system
Create src/components/ConnectModeToggle.tsx to toggle connect mode and guide user actions.
by system
Create src/lib/connections.ts to manage adding/removing star-to-star connections without duplicates.
by system
Implement SettingsPage.tsx controls to download state JSON and import via file picker with validation.
by system