Constellation Planner
A playful goal-and-habit planner where each habit becomes a “star” and completing it draws connecting lines to form custom constellations on a nightly sky canvas. Users create habits with schedules, check them off daily, and watch their constellation grow, with streaks and missed days visually fading stars. The app includes a simple calendar view, a constellation gallery saved to localStorage, and a compact stats panel (streaks, completion rate) — all within a single React SPA using Tailwind and shadcn/ui.
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 in src/index.css.
by system
Set up src/lib/utils.ts and ensure the shadcn/ui base styles are wired for Tailwind + cn().
by system
Add React Router with routes for Planner, Calendar, Gallery, and Stats pages.
by system
Implement a single AppLayout with header + main container used by all pages.
by system
Create a top nav with shadcn Buttons/Links to switch between Planner, Calendar, Gallery, and Stats.
by system
Add TypeScript types for Habit, Schedule, CompletionRecord, and ConstellationSnapshot.
by system
Create a small storage module to load/save habits, completions, and gallery snapshots from localStorage.
by system
Implement a lightweight React context for habits + completions with CRUD actions.
by system
Add helper functions for date keys (YYYY-MM-DD), today, ranges, and streak calculations.
by system
Create a shadcn Dialog with a form to add a new habit (name, color, schedule).
by system
Build a small schedule picker (daily or weekdays) used by the habit creation form.
by system
Create a sidebar/panel listing habits with color dot, name, and quick actions.
by system
Add a dialog to edit an existing habit’s name/color/schedule.
by system
Implement a confirmation dialog to delete a habit and its completion history.
by system
Create a daily checklist component showing scheduled habits for the selected date with checkboxes.
by system
Implement the action to toggle a habit completion for a given date key and persist it.
by system
Compose the Planner page with habit list, daily checklist, and the sky canvas area.
by system
Create a responsive canvas component that will render stars/lines based on completion data.
by system
Implement deterministic star positions per habit (seeded by habit id) within the canvas bounds.
by system
Draw habit stars with size/opacity reflecting streaks and missed days fading.
by system
Draw connecting lines between completed habits for the selected date in a playful constellation style.
by system
Add hover/tooltip support to show habit name and streak when pointing at a star.
by system
Build a compact monthly calendar (no external libs) highlighting completion density per day.
by system
Create the Calendar page using the mini calendar and a day detail panel.
by system
Show selected day’s scheduled habits, completion toggles, and quick notes like “X/Y completed”.
by system
Implement completion rate and current/longest streak calculations across habits and date ranges.
by system
Create a compact Stats page/panel using shadcn Cards to display streaks and completion rate.
by system
Add a button to capture the current canvas as an image and save a snapshot entry to localStorage.
by system
Implement a gallery grid that lists saved constellation snapshots with view and delete actions.
by system