Constellation Planner
A playful weekly planner where each task becomes a “star” you place on a night-sky canvas, forming constellations for projects (e.g., Work, Health, Creative). Users can create/edit tasks with due day, priority, and tags, then drag stars into clusters; completed tasks glow and link-lines appear automatically between related stars. Everything runs client-side with localStorage, featuring a list view + sky view toggle, simple filters, and a small “streak meteor” animation when you finish all tasks for a day.
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 && npx shadcn@latest add button input textarea select dialog dropdown-menu badge tabs tooltip separator sheet
by system
Configure src/index.css with Tailwind directives and a minimal app background theme.
by system
Implement src/App.tsx with a header, main container, and view toggle area.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Create src/types.ts defining Task, Tag, Priority, ViewMode, and constants for weekdays.
by system
Create src/lib/storage.ts to load/save planner state with versioned keys.
by system
Create src/hooks/usePlannerState.ts managing tasks, tags, and persistence via localStorage.
by system
Create src/hooks/useFilters.ts to store selected day, tag, completion, and search query.
by system
Add src/lib/seed.ts to generate optional sample tasks and constellations on first load.
by system
Create src/components/Header.tsx with app title, view toggle, and reset/demo actions.
by system
Create src/components/ViewToggle.tsx using shadcn Tabs for List vs Sky view.
by system
Create src/components/TaskDialog.tsx using shadcn Dialog with empty form layout and actions.
by system
Implement src/components/TaskForm.tsx with title, notes, due day, priority, project, and tag inputs.
by system
Add basic client-side validation logic inside src/components/TaskForm.tsx (required title, enums).
by system
Wire create-task submission into src/components/TaskDialog.tsx using usePlannerState.
by system
Support opening TaskDialog with an existing task and updating it in state.
by system
Add a toggleComplete(taskId) action in src/hooks/usePlannerState.ts.
by system
Add deleteTask(taskId) action in src/hooks/usePlannerState.ts with confirmation handled by caller.
by system
Create src/views/ListView.tsx rendering filtered tasks grouped by due day with an Add Task button.
by system
Create src/components/TaskListItem.tsx showing title, badges, due day, and complete/edit controls.
by system
Create src/components/FiltersBar.tsx with day selector, tag selector, search input, and status filter.
by system
Implement src/lib/filterTasks.ts to apply filters consistently for both List and Sky views.
by system
Create src/views/SkyView.tsx with a full-canvas starfield area and overlay controls.
by system
Create src/components/Star.tsx rendering a draggable star with glow state when completed.
by system
Extend Task type to include optional x/y coordinates and update persistence accordingly.
by system
Implement pointer-based dragging in src/views/SkyView.tsx to update task x/y positions.
by system
Create src/components/ConstellationLines.tsx to draw SVG lines between stars sharing the same project.
by system
Add subtle project “orbit”/label overlays in src/views/SkyView.tsx to encourage clustering by project.
by system
Create src/components/MeteorStreak.tsx and trigger it when all tasks for selected day become complete.
by system
Wire App.tsx to render ListView or SkyView, passing planner state + filters and shared actions.
by system