Constellation Planner
A playful task-and-habit planner where each task becomes a “star” you place on a night-sky canvas and connect into constellations that represent projects or routines. Users can drag stars, draw/erase connections, and mark stars complete to make them glow, with weekly views and simple stats (streaks, completion rate) stored in localStorage. The app is split cleanly into components: sky canvas (stars + connections), sidebar editor (create/edit tasks, tags, due dates), and analytics panel (filters, progress charts) with shadcn/ui dialogs and Tailwind styling.
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 src/index.css with Tailwind directives and basic global styles.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types.ts defining StarTask, Connection, Tag, and AppState types.
by system
Implement src/hooks/useLocalStorageState.ts for persisted state with versioning.
by system
Add src/data/seed.ts exporting a small default AppState for first run.
by system
Build src/App.tsx layout with sidebar, canvas, and analytics regions using Tailwind.
by system
Add a simple view mode state in src/App.tsx for Weekly vs Freeform canvas.
by system
Create src/components/TopBar.tsx with app title and view toggle controls.
by system
Create src/components/sky/Star.tsx to draw a star with glow/completed styles.
by system
Create src/components/sky/ConnectionLine.tsx to render a line between two stars.
by system
Create src/components/sky/SkyCanvas.tsx that composes stars and connections in an SVG/absolute layer.
by system
Add pointer-based dragging logic to SkyCanvas updating star positions in state.
by system
Implement selectedStarId state + click handlers in SkyCanvas for selecting a star.
by system
Add a draw-connection interaction in SkyCanvas to connect two selected stars.
by system
Add an erase interaction that removes a connection when clicking a line.
by system
Create src/components/sky/CanvasToolbar.tsx with select/draw/erase mode buttons.
by system
Create src/components/sky/WeeklyOverlay.tsx to show a subtle 7-day grid layer.
by system
Add UI interaction to toggle completed state for the selected star and update glow.
by system
Create src/components/sidebar/Sidebar.tsx as a structured editor panel container.
by system
Create src/components/sidebar/TaskList.tsx listing tasks with basic sorting/filtering.
by system
Create src/components/sidebar/TaskEditorForm.tsx for title, notes, due date, tags, and project.
by system
Create src/components/sidebar/NewTaskDialog.tsx using shadcn/ui Dialog to add a star-task.
by system
Create src/components/sidebar/EditTaskDialog.tsx to edit the currently selected task.
by system
Create src/components/sidebar/TagPicker.tsx for adding/removing tags on a task.
by system
Create src/components/sidebar/DueDatePicker.tsx using shadcn/ui components for date selection.
by system
Create src/components/analytics/AnalyticsPanel.tsx as a right-side stats container.
by system
Create src/components/analytics/CompletionRateChart.tsx rendering a simple SVG bar chart.
by system
Add src/lib/stats.ts with streak and weekly completion computations from AppState.
by system
Create src/components/analytics/AnalyticsFilters.tsx to filter stats by tag/project and week.
by system