Constellation Focus
A playful pomodoro + mood check-in app where each completed focus session adds a glowing “star” to a personal constellation, forming lines into named patterns based on streaks and session types. Users can start/pause timers, tag sessions (study, creative, chores), log a 1–5 mood/energy rating, and review a simple dashboard showing weekly focus minutes and constellation growth. Everything runs client-side with localStorage, using modular components for Timer, Session Tagging, Mood Slider, Constellation Canvas, and Stats/History views.
Run: npm create vite@latest . -- --template react-ts && 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 card badge slider tabs dialog tooltip separator sonner
by system
Configure Tailwind in src/index.css with @tailwind directives and set up basic app-wide styles.
by system
Ensure src/lib/utils.ts exports cn() and paths align with the Vite + TS setup.
by system
Create src/types.ts with TimerState, SessionTag, MoodRating, FocusSession, and ConstellationStar types.
by system
Create src/lib/storage.ts with load/save functions for sessions, settings, and constellation state.
by system
Create src/lib/defaults.ts defining default pomodoro durations and initial user constellation metadata.
by system
Implement src/hooks/useTimer.ts providing start/pause/reset and ticking logic with requestAnimationFrame or setInterval.
by system
Implement src/hooks/useSessions.ts to append sessions, persist to localStorage, and expose derived aggregates.
by system
Create src/lib/streaks.ts to compute streaks and pattern names from recent sessions and tags.
by system
Create src/lib/constellation.ts to map sessions to star positions and line segments deterministically.
by system
Implement src/components/AppShell.tsx with header, main container, and responsive spacing using Tailwind.
by system
Implement src/components/AppTabs.tsx using shadcn Tabs to switch Timer, Constellation, and Stats views.
by system
Create src/pages/TimerPage.tsx composing timer controls, tagging, and mood check-in.
by system
Create src/pages/ConstellationPage.tsx hosting the constellation canvas and pattern summary.
by system
Create src/pages/StatsPage.tsx showing weekly minutes and a simple session history list.
by system
Create src/components/timer/TimerDisplay.tsx to render remaining time and current phase label.
by system
Create src/components/timer/TimerControls.tsx with Start/Pause/Reset buttons wired via props.
by system
Create src/components/timer/PhaseSelector.tsx to choose Focus/Break durations from settings via props.
by system
Create src/components/session/TagPicker.tsx to select a session tag (study/creative/chores) with badges.
by system
Create src/components/session/MoodSlider.tsx using shadcn Slider for 1–5 mood/energy rating.
by system
Create src/components/session/SessionSummary.tsx showing chosen tag, mood, and planned minutes.
by system
Create src/components/session/FinishSessionDialog.tsx prompting for mood/tag confirmation before saving.
by system
Update src/pages/TimerPage.tsx to save a completed focus session into useSessions and reset timer.
by system
Create src/components/constellation/ConstellationCanvas.tsx drawing stars and lines on a <canvas> from props.
by system
Enhance src/components/constellation/ConstellationCanvas.tsx to render a soft glow effect per star.
by system
Create src/components/constellation/PatternHeader.tsx showing current streak, pattern name, and tag breakdown.
by system
Create src/components/stats/WeeklyMinutes.tsx rendering a simple 7-day bar chart with divs (no chart libs).
by system
Create src/components/stats/SessionHistory.tsx listing recent sessions with tag, mood, and duration.
by system
Create src/components/settings/ClearDataButton.tsx to wipe localStorage keys with a confirmation dialog.
by system
Wire sonner to show toasts for session saved, timer started/paused, and data cleared.
by system