Constellation Planner
A tiny goal-and-habit tracker where your habits become “stars” and completing them draws glowing constellations on a nightly sky canvas. Users can create habits with schedules, mark daily completions, and watch their constellation progress animate, with streaks and missed days visually indicated. Everything is client-side with localStorage, featuring separate views for Habit List/Editor, Today Check-in, and a Sky Map dashboard built from reusable shadcn/ui cards, dialogs, and tabs.
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 a simple app background style.
by system
Add src/lib/utils.ts with cn() helper for class merging.
by system
Create src/types.ts defining Habit, Schedule, Completion, and derived view models.
by system
Create src/lib/storage.ts to load/save the full app state with versioning and defaults.
by system
Create src/lib/dates.ts for YYYY-MM-DD keys, today(), addDays(), and streak helpers.
by system
Create src/state/AppStateProvider.tsx with React context for state + actions and persistence.
by system
Create src/components/AppShell.tsx with header, content container, and responsive spacing.
by system
Create src/components/MainTabs.tsx using shadcn Tabs for Habits, Today, and Sky views.
by system
Update src/App.tsx to compose AppStateProvider, AppShell, and MainTabs.
by system
Add shadcn/ui components used across the app (button, card, tabs, dialog, input, label, checkbox, badge, textarea, separator).
by system
Create src/pages/HabitsPage.tsx rendering all habits in shadcn Cards with edit/delete actions.
by system
Create src/components/EmptyStateCard.tsx for no-habits and no-data placeholders.
by system
Create src/components/AddHabitDialog.tsx with a shadcn Dialog and minimal form fields.
by system
Create src/components/EditHabitDialog.tsx that loads an existing habit and saves updates.
by system
Create src/components/SchedulePicker.tsx for selecting days-of-week vs daily schedule settings.
by system
Create src/components/ColorPickerField.tsx to pick a star color for the habit.
by system
Create src/components/DeleteHabitDialog.tsx to confirm removal and related completions.
by system
Create src/pages/TodayPage.tsx listing scheduled habits for today with completion toggles.
by system
Create src/components/TodayHabitRow.tsx with checkbox, streak badge, and missed indicator.
by system
Create src/components/DailyNoteDialog.tsx to attach an optional note to today’s completion.
by system
Add src/lib/streaks.ts to compute current streak, longest streak, and last completed date.
by system
Create src/components/HabitMiniCalendar.tsx showing last 14 days with done/missed/skip states.
by system
Create src/pages/SkyPage.tsx with dashboard cards and a large canvas area.
by system
Create src/components/SkyCanvas.tsx that draws a static night sky background and stars.
by system
Create src/lib/constellations.ts to map habits to star positions and links deterministically.
by system
Update SkyCanvas rendering to draw glowing lines between completed habit stars for selected date.
by system
Create src/components/SkyDateControl.tsx to move between dates and preview past constellations.
by system
Create src/components/SkyStatsCards.tsx showing totals, today completion count, and best streak.
by system
Add keyboard/focus styling, aria labels for dialogs/controls, and small responsive tweaks.
by system