Constellation Habit Map
Build a playful habit tracker where each habit is a “star” and completing it draws bright connecting “constellation” lines across a weekly sky grid. Users can create habits with icons/colors, mark daily completions, and watch streaks animate as new stars appear; all data is stored in localStorage. Include a simple stats panel (streaks, completion rate, best day) and a customizable sky theme (background gradient, star density) to keep the scope small but visually satisfying.
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 -d
by system
Configure Tailwind in src/index.css and ensure main.tsx imports it.
by system
Create src/App.tsx with a responsive shell (header/main/sidebar slots) using Tailwind + shadcn/ui.
by system
Add src/types.ts defining Habit, CompletionMap, ThemeSettings, and derived stat types.
by system
Add src/lib/storage.ts to load/save typed app state with versioning and safe defaults.
by system
Add src/lib/dates.ts for week start, day keys (YYYY-MM-DD), and week arrays.
by system
Create src/hooks/useHabitStore.ts managing habits/completions/theme and persisting via storage helpers.
by system
Add src/lib/theme.ts to map ThemeSettings to CSS variables on document root.
by system
Create src/components/SkyBackground.tsx rendering gradient backdrop and procedural stars based on density.
by system
Create src/components/WeeklySkyGrid.tsx that lays out a 7-day grid and exposes cell coordinates.
by system
Create src/components/StarNode.tsx rendering a habit “star” with icon/color and completion glow.
by system
Create src/components/ConstellationLines.tsx that draws SVG lines between completed days for a habit.
by system
Add src/lib/completions.ts for toggling and querying completion per habit per day.
by system
Wire WeeklySkyGrid to toggle completion on cell click and reflect state changes visually.
by system
Add src/lib/stats.ts to compute current/best streaks, completion rate, and best day of week.
by system
Create src/components/StatsPanel.tsx displaying computed stats for all habits and the selected week.
by system
Create src/components/HabitList.tsx showing habits, quick select, and per-habit streak summary.
by system
Create src/components/AddHabitDialog.tsx using shadcn/ui Dialog + form fields for name, icon, color.
by system
Create src/components/IconPicker.tsx offering a small set of lucide-react icons selectable in the dialog.
by system
Create src/components/ColorPicker.tsx providing a few preset colors and a custom hex input.
by system
Create src/components/EditHabitDialog.tsx to update name/icon/color and save to the store.
by system
Add a delete button + confirm in EditHabitDialog and remove related completions in store.
by system
Create src/components/WeekNavigator.tsx to move between weeks and jump back to current week.
by system
Add selectedHabitId state in App and filter/highlight stars/lines accordingly.
by system
Add CSS animations for newly completed cells (star pop + shimmer) in StarNode styles.
by system
Animate constellation lines with SVG stroke-dasharray transitions in ConstellationLines.
by system
Create src/components/ThemePanel.tsx with controls for gradient colors and star density.
by system
Connect ThemePanel to store and applyTheme so changes update live and persist to localStorage.
by system
Add an empty-state view in App when no habits exist with a call-to-action to add a habit.
by system
Add keyboard/focus states and aria-labels for grid cells, dialogs, and buttons across components.
by system