Constellation To-Do
A playful task planner where each task becomes a “star” you place on a night-sky canvas, then connect into constellations representing projects (e.g., Work, Health, Home). Users can add/edit tasks, drag stars to reposition them, mark completion to make stars glow, and filter by constellation or due date; everything persists in localStorage. The app is a single React SPA with clear components: task/constellation CRUD panels, an interactive canvas renderer, and a stats sidebar showing streaks, completion rate, and a “sky recap” timeline of finished stars.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react clsx tailwind-merge && npx shadcn@latest init && npx shadcn@latest add button input textarea label card tabs badge checkbox select separator sheet dialog dropdown-menu scroll-area tooltip
by system
Configure Tailwind + shadcn styles by updating tailwind.config.ts and src/index.css.
by system
Implement the top-level layout (header, left panels, center canvas, right stats) in src/App.tsx.
by system
Add Task/Constellation/Timeline types in src/lib/types.ts.
by system
Create src/lib/storage.ts helpers to load/save app state to localStorage.
by system
Create src/lib/state.ts with a reducer + actions for tasks/constellations/ui selections.
by system
Add src/lib/store.tsx providing React context hooks for state and dispatch.
by system
Add src/lib/seed.ts to generate initial tasks/constellations when storage is empty.
by system
Create src/components/ConstellationList.tsx to list, select, and color-preview constellations.
by system
Create src/components/ConstellationCreateDialog.tsx for adding a constellation (name + color).
by system
Create src/components/ConstellationEditDialog.tsx for renaming/recoloring/deleting a constellation.
by system
Create src/components/TaskList.tsx showing tasks for the current filters with quick actions.
by system
Create src/components/TaskCreateDialog.tsx with fields (title, notes, due date, constellation).
by system
Create src/components/TaskEditDialog.tsx for updating task fields and deleting tasks.
by system
Add completion toggle behavior (sets completedAt) via a small control in TaskList rows.
by system
Create src/components/FilterBar.tsx for constellation filter + due-date filter + search text.
by system
Create src/lib/selectors.ts to compute visible tasks, completed timeline, and summary stats.
by system
Create src/components/SkyCanvas.tsx rendering an SVG/Canvas night-sky with pan-safe container.
by system
Create src/components/StarNode.tsx to render a task as a draggable star with glow on completion.
by system
Implement pointer-drag logic in StarNode.tsx to update task x/y in state.
by system
Create src/lib/coords.ts for translating pointer positions into canvas coordinates.
by system
Create src/components/ConstellationLines.tsx to draw lines between stars in the same constellation.
by system
Add a tooltip on star hover showing title, due date, and completion status.
by system
Implement click-to-select a star and open TaskEditDialog from the canvas.
by system
Create src/components/StatsSidebar.tsx as a container with sections for streak, rate, recap.
by system
Add streak computation (consecutive days with completions) in selectors.ts and display it.
by system
Compute completion rate (completed/total) and render a progress-style UI in StatsSidebar.
by system
Create src/components/SkyRecapTimeline.tsx listing recently completed stars grouped by date.
by system
Add a tiny last-14-days completion sparkline component in src/components/RecapSparkline.tsx.
by system
Add simple shortcuts (N new task, / focus search, Esc close dialogs) in src/App.tsx.
by system