Constellation Planner
A playful task-and-goal planner where each task becomes a “star” you place on a nightly sky canvas, forming constellations that represent projects or habits. Users can create constellations, drag stars to connect them with lines, set due dates and priority, and mark stars complete to make them glow or fade. Everything runs client-side with localStorage persistence, plus a simple “stargazing” view that filters by today/this week and shows progress as the constellation fills in.
Run: npm create vite@latest . -- --template react-ts && 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 src/index.css with Tailwind directives and basic body/background styles.
by system
Create src/App.tsx with a shell layout (header + main) and placeholder routes area.
by system
Install and wire react-router in src/main.tsx with routes for Sky and Stargazing.
by system
Implement src/components/HeaderNav.tsx with shadcn/ui buttons/links for navigation.
by system
Add src/types/constellation.ts defining Star, Constellation, and AppState interfaces.
by system
Create src/lib/storage.ts with loadState/saveState and versioned key handling.
by system
Implement src/state/useAppState.ts to manage AppState with persistence to localStorage.
by system
Add src/lib/utils.ts for id generation and due-date comparisons (today/this week).
by system
Create src/state/seed.ts providing a small demo constellation when storage is empty.
by system
Create src/pages/SkyPage.tsx rendering sidebar + sky canvas region using app state.
by system
Create src/pages/StargazingPage.tsx with filter controls and a results list placeholder.
by system
Build src/components/ConstellationList.tsx to list/select/create constellations.
by system
Add src/components/ConstellationRenameDialog.tsx to edit constellation name/color.
by system
Implement src/components/ConstellationDeleteButton.tsx with confirm dialog and removal.
by system
Create src/components/SkyCanvas.tsx providing a positioned container for stars and lines.
by system
Implement src/components/StarNode.tsx to render a star with glow/fade by completion.
by system
Add pointer-drag logic in src/components/useDragPosition.ts for updating star x/y.
by system
Implement src/components/ConnectModeToggle.tsx to enable/disable line-connecting behavior.
by system
Create src/components/StarConnections.tsx drawing SVG lines between connected stars.
by system
Implement click-to-add-star in src/components/AddStarButton.tsx for current constellation.
by system
Create src/components/StarDetailsPanel.tsx to edit title, notes, due date, priority.
by system
Add src/components/PriorityBadge.tsx mapping priority levels to Tailwind/shadcn variants.
by system
Implement src/components/StarCompleteToggle.tsx to mark complete and update visuals.
by system
Create src/components/DeleteStarButton.tsx with confirm and cleanup of connections.
by system
Add src/components/useKeyboardShortcuts.ts for delete selected and escape to deselect.
by system
Implement src/components/StargazingFilters.tsx for today/this week/all and constellation select.
by system
Create src/components/StargazingStarList.tsx to render filtered stars with quick actions.
by system
Implement src/components/ConstellationProgress.tsx showing completed/total and percentage.
by system
Add friendly empty/loading UI in SkyPage and StargazingPage when no constellations/stars exist.
by system