Constellation Planner
A playful task and habit planner where each task becomes a “star” you place on a nightly sky canvas, connecting stars into custom constellations that represent projects or routines. Users can create tasks, assign due dates/tags, drag stars to arrange clusters, and mark completion to make stars glow or fade; progress is visualized via a simple sky “brightness” meter and streak counts. Everything runs client-side with localStorage, and the UI is split into clear components: Task Form + List, Sky Canvas (drag/drop), Constellation Builder (connect/label), and Stats/Filters panel.
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 content paths and add Tailwind directives to src/index.css.
by system
Generate core shadcn/ui components (button, input, textarea, select, badge, card, tabs, dialog, sheet) in src/components/ui.
by system
Implement a responsive 2-column layout shell in src/App.tsx with left panels and right canvas.
by system
Create src/types.ts defining Task, Tag, Constellation, and StarPosition types.
by system
Create src/lib/storage.ts with typed load/save helpers and versioned key names.
by system
Create src/hooks/useTasks.ts managing tasks CRUD with localStorage persistence.
by system
Create src/hooks/useConstellations.ts managing constellations CRUD and connections with localStorage.
by system
Create src/hooks/useSkyPositions.ts to persist per-task star x/y coordinates in localStorage.
by system
Create src/hooks/useFilters.ts to manage selected tag, status, and search query.
by system
Build src/components/TaskForm.tsx for creating tasks with title, due date, and tags.
by system
Add src/components/TagPicker.tsx for adding/removing tags within the task form.
by system
Build src/components/TaskList.tsx rendering filtered tasks with basic metadata.
by system
Add src/components/TaskListItem.tsx with complete toggle, due date display, and tag badges.
by system
Implement src/components/TaskEditDialog.tsx for editing title/due date/tags using shadcn Dialog.
by system
Add a delete confirmation flow in src/components/TaskDeleteButton.tsx for removing a task.
by system
Create src/components/SkyCanvas.tsx with a fixed-size/scrollable sky area and background gradient.
by system
Implement src/components/Star.tsx to render a draggable star with glow/fade based on completion.
by system
Add pointer-based drag logic in src/components/SkyCanvas.tsx updating positions via useSkyPositions.
by system
Create src/hooks/useSelection.ts to track selected star/task ids for building connections.
by system
Build src/components/ConstellationBuilder.tsx to create/select a constellation and show its connections.
by system
Implement click-to-select and connect behavior in src/components/SkyCanvas.tsx using useSelection and useConstellations.
by system
Add src/components/ConnectionsOverlay.tsx to draw SVG lines between connected star positions.
by system
Render constellation name badges near grouped stars in src/components/ConstellationLabels.tsx.
by system
Create src/components/StatsPanel.tsx showing totals, completed count, and current streak.
by system
Add src/components/BrightnessMeter.tsx computing a 0-100 sky brightness based on completion ratio.
by system
Implement src/lib/streaks.ts to compute daily completion streak from task completion timestamps.
by system
Build src/components/FiltersPanel.tsx for tag/status/search filters wired to useFilters.
by system
Implement src/lib/filtering.ts to filter/sort tasks by query, tag, status, and due date.
by system
Connect all panels and hooks in src/App.tsx so creating/completing tasks updates list, sky, constellations, and stats.
by system