Inspiration
Most productivity tools today treat users like output machines — dashboards that shame you for missed tasks, streak systems that punish slumps, and rigid workflows designed around neurotypical focus patterns. That approach never felt right to me.
I started wondering: What if a workspace could actually understand you?
Not just track your tasks, but adapt to your energy, your overwhelm, and your momentum. I wanted to create something that felt less like a demanding productivity manager and more like a quiet, supportive companion.
The idea for Adapt came from observing how people with ADHD and other neurodivergent traits interact with traditional productivity apps. They don’t necessarily need more structure — they need adaptive structure. A system that notices when you’re struggling and gently reduces pressure, or when you’re in a flow state and simply stays out of your way.
I wanted Adapt to feel like a companion that understands you, not a system that constantly monitors or judges you.
The visual design was inspired by botanical calm and warm minimalism. The dark forest greens and soft pink tones were intentionally chosen to create a sense of growth, patience, and emotional safety — a contrast to the sterile blues and aggressive reds commonly seen in productivity software.
What it does
Adapt is an adaptive productivity companion that observes how you work, detects your cognitive state, and quietly reshapes the workspace around you — without judgment, guilt, or productivity shaming.
Instead of relying on static to-do lists or rigid Pomodoro timers, Adapt runs on a continuous feedback loop designed around the user’s behavior and focus patterns.
How it works
You add a task.
AI breaks it down into smaller, manageable steps with estimated durations, difficulty scores, and a visual flowchart so the entire process feels easier to approach.You start a focus session.
The timer automatically transitions through each step, tracks skipped tasks, and dynamically adjusts durations if the user is struggling.- Skip once → timer reduces to half
- Skip twice → timer reduces to one-third
- Skip once → timer reduces to half
A small sprout companion lives in the corner of the app.
It gently checks in during sessions with prompts like “How is the work going?” and suggests smaller actions when resistance is detected. The interactions are intentionally supportive, never demanding or distracting.Adapt continuously reads behavioral patterns.
If users begin skipping tasks, abandoning sessions, or building up unfinished work, the platform automatically shifts into one of four cognitive modes:- Ready — Balanced state with full functionality
- Gentle — Softer prompts, shorter timers, and reduced cognitive load
- In the Zone — Minimal interface with only the active task visible to preserve momentum
- Rest Mode — No streak punishment, no pressure, recovery encouraged
- Ready — Balanced state with full functionality
Users always remain in control.
Mode chips at the bottom of the interface are fully interactive, allowing manual switching between modes whenever needed.
Additional features
- Voice-based task creation using Whisper Speech-to-Text
- Ambient sound player with rain, forest, and ocean sounds
- Drag-and-drop task reordering
- Task scheduling with calendar picker
- Priority-based task filtering
How we built it
Architecture Overview
Adapt is a single-page React application with a Supabase backend. The frontend handles all UI, state, and real-time interactions. The backend provides authentication, a Postgres database, serverless edge functions for AI and analytics, and file storage for voice recordings.
Development Approach
The project was built iteratively, one feature at a time, while always keeping the emotional tone of the app in mind.
The development flow was deliberate:
- Foundation — Authentication, database schema, and basic task CRUD
- Core Loop — Task creation, completion, and history tracking
- Intelligence — AI task breakdowns using Gemini 2.5 Flash and adaptive mode detection
- Focus System — Multi-step timer with skip tracking and automatic transitions between subtasks
- Accessibility — Voice input using Whisper STT, ambient sound player, and drag-and-drop reordering
- Companion System — The sprout mascot with periodic check-ins, emotional support messaging, and reaction animations
- Polish — Reframing copy to remove productivity-guilt language, adding manual mode switching, and refining visuals
Key Design Decisions
No external state library — The app uses React hooks only. The state surface area was small enough that
useState,useCallback,useEffect, anduseRefkept everything predictable and easier to maintain.Supabase Edge Functions for all AI functionality — The client never directly touches AI API keys. All AI-related features route through secure edge functions such as
analyze-behavior,breakdown-task, andspeech-to-text.Optimistic UI updates — Manual mode switches update instantly before database confirmation so the interface feels responsive and fluid.
CSS animations over heavy JS libraries — All mascot animations and transitions were built using pure CSS keyframes instead of animation libraries like Framer Motion or GSAP, keeping the experience lightweight and smooth.
Component co-location — Each dashboard feature lives inside its own file under
src/components/dashboard/, avoiding deep nesting and oversized utility files.
Data Model
The core database tables include:
tasks— User tasks with status, priority, scheduling, and skip countsbehavior_metrics— Live productivity scoring and current adaptive mode trackingmode_history— Timestamped records of automatic and manual mode switchestask_breakdowns + subtasks— AI-generated step-by-step task plansfocus_sessions— Session duration, interruptions, and completion analyticsprofiles— User profile data and terms acceptance tracking
The Mascot
The companion sprout mascot was fully hand-coded as an inline SVG with no external image assets.
It includes two CSS-driven animation states:
- A gentle idle bob animation with subtle rotation
- A reactive bounce animation when messages appear
The speech bubble is positioned below the mascot with a custom SVG tail, while CSS backdrop filters create a soft frosted-glass effect that keeps the UI visually calm without distracting from the focus timer.
Challenges we ran into
React instance duplication — At one point, the app crashed at runtime with
Cannot read properties of null (reading 'useState')inside the Auth context. The root cause was a second React instance being created, likely because of a dependency conflict. Fixing it required carefully auditing imports, unifyingreact-router-domusage, and verifying the Vite build configuration. It reinforced the importance of keeping dependency trees shallow and clean.Mode switching felt too abrupt — Early versions of the adaptive mode system felt jarring because the entire UI palette and layout changed without warning. The fix was twofold: keeping the bottom mode chips always visible so users could understand what was happening, and replacing clinical system notifications with softer messages like “Shifting to Gentle — your companion adjusted.”
Companion chattiness — The first version of
useCompanionsent too many messages during focus sessions, which made the experience feel intrusive instead of supportive. The interaction timing was tuned carefully: the first check-in appears after 8 minutes, additional messages are spaced 10–15 minutes apart, sessions are capped at 4 messages, and notifications are suppressed entirely if the user recently skipped a step.Speech-to-text latency — The Whisper API running through edge functions introduced a noticeable delay between stopping a recording and seeing the transcript appear. To improve responsiveness, local loading states with animated waveform bars and optimistic transcript rendering were added so users receive immediate visual feedback while processing completes in the background.
Writing copy that doesn’t guilt users — Creating ADHD-friendly copy turned out to be more difficult than expected. Early phrases like “Get back on track” or “You missed 3 tasks” unintentionally felt judgmental. Almost every label had to be rewritten to sound calmer and more supportive. For example:
PENDING→ON THE LISTSESSION COMPLETE→That's it. Well done.END SESSION→end early
The shift in tone ended up being just as impactful as the technical features themselves.
Accomplishments that we're proud of
Built a productivity app specifically designed for people with ADHD and neurodivergent focus patterns.
Created an experience that feels supportive and human instead of stressful or guilt-driven.
Rewrote every label and notification to remove productivity shame and make the UX emotionally safe.
Built a fully hand-coded SVG companion mascot with lightweight CSS-based emotional animations.
Integrated real-time AI task breakdowns using Gemini 2.5 Flash with progressive streaming via SSE.
Developed a behavioral analytics system that adapts the workspace based on burnout, overwhelm, and focus patterns.
Managed the entire application state using pure React hooks without relying on Redux or other heavy state-management libraries. What's next for Adapt Productivity OS
Emotion-aware adaptation The next evolution is reading not just what you do, but how you feel. We'd integrate a lightweight mood check-in (one tap: overwhelmed, calm, energized, stuck) and use that as an input signal alongside behavioral data. The mascot could adjust its tone — softer during anxious days, more encouraging during low-energy periods.
Calendar intelligence Connect to Google/Outlook calendars to understand your actual day structure. If Adapt sees you have back-to-back meetings, it auto-switches to Gentle mode and suggests a 5-minute micro-task. If your afternoon is wide open, it nudges you into In the zone mode.
Voice as a first-class interface Right now voice is task creation only. We'd expand it to full voice control — "Start my focus session," "Break this down," "I'm done" — so the app is usable without touching the screen during deep work.
ADHD coaching module A lightweight, AI-driven coaching layer that notices your patterns and suggests evidence-based strategies. Not generic advice — personalized, contextual tips based on your actual behavior data. "You tend to skip writing tasks after 4pm. Want to schedule them for mornings?"
Multi-device sync + mobile app The current version is web-only. A companion mobile app would let you capture tasks on the go, get gentle nudges when you're away from your desk, and maintain continuity across devices.
Customizable mascot Users could name their sprout, choose different botanical characters (a fern, a mushroom, a little moon), or even upload their own. The companion should feel theirs.
Community mode An optional peer support layer — anonymized pattern sharing so users can see "People like you often do well with 10-minute sessions" — reducing the isolation that often accompanies productivity struggles. make it shorte one or two lines
What's next for Adapt Productivity OS
Emotion-aware adaptation — Integrate lightweight mood check-ins so the app can adapt its tone and behavior based on how the user feels, not just how they work.
Calendar intelligence — Connect with Google and Outlook calendars to automatically adjust productivity modes around the user’s real schedule.
Voice-first interaction — Expand voice support beyond task creation to full app control during focus sessions.
AI-powered ADHD coaching — Provide personalized productivity suggestions and behavioral insights based on user patterns.
Multi-device sync & mobile app — Build a companion mobile app for seamless productivity support across devices.
Customizable mascot system — Allow users to personalize their companion with different characters, names, and themes.
Community mode — Introduce optional peer-support insights to help ADHD users feel less isolated in their productivity struggles. What did you learn? Behavioral design over feature density. I learned that adding features doesn't automatically make a product better. The original scope was much larger — calendar integration, habit tracking, advanced analytics. I cut almost all of it because I realized the core value is the adaptation loop: observe behavior → detect pattern → adjust environment. Everything else is noise.
ADHD-first UX is universal UX. Designing for cognitive accessibility — low-pressure language, encouraging empty states, momentum-building micro-interactions, emotional safety — made the app better for everyone. When you design for the edge case (someone paralyzed by overwhelm), the center case thrives too.
State management simplicity. I deliberately avoided Redux or Zustand. With careful use of useState, useCallback, useEffect, and useRef, the entire app stays predictable. The cognitive overhead of a state library wasn't worth it for this scale. Keeping it simple also made the companion architecture easier to reason about.
Animation is communication. The mascot's gentle bob, the speech bubble's soft entrance, the timer's breathing transitions — these aren't decorative flourishes. They communicate emotional tone. The app feels alive because of these small, intentional movements.
AI integration through edge functions is the right abstraction. Keeping API keys server-side in Supabase Edge Functions, routing all AI calls through that layer, and streaming responses back via SSE gave me both security and a great user experience (progressive reveal of AI task breakdowns).
humanize it ,
What we learned
Behavioral design matters more than feature count — We learned that adding more features doesn’t automatically make a product better. The original scope included calendar integrations, habit tracking, and advanced analytics, but we realized the real value came from the adaptation loop itself: observing behavior, detecting patterns, and adjusting the environment accordingly.
ADHD-first UX benefits everyone — Designing for cognitive accessibility through low-pressure language, emotionally safe UX, and momentum-building interactions made the experience calmer and more intuitive for all users, not just neurodivergent users.
Keeping state management simple was the right choice — Instead of introducing Redux or Zustand, we relied entirely on React hooks like
useState,useCallback,useEffect, anduseRef. This kept the architecture predictable, lightweight, and easier to maintain.Animation is part of communication — Small details like the mascot’s gentle movement, soft speech-bubble transitions, and breathing timer animations helped communicate emotional tone and made the app feel more supportive and alive.
Edge Functions worked extremely well for AI integration — Keeping AI API keys server-side through Supabase Edge Functions improved both security and architecture cleanliness, while SSE streaming made AI task breakdowns feel smooth and responsive.
What we learned
Behavioral design matters more than feature density — One of the biggest lessons from this project was realizing that adding more features doesn’t automatically make a product better. The original scope included calendar integrations, habit tracking, and advanced analytics, but most of it was removed after recognizing that the real value of the product came from the adaptation loop itself: observing behavior, detecting patterns, and adjusting the environment accordingly.
ADHD-first UX improves the experience for everyone — Designing for cognitive accessibility through low-pressure language, encouraging empty states, momentum-building micro-interactions, and emotionally safe UX ended up making the platform better for all users, not just neurodivergent users. Designing for the edge case created a calmer and more intuitive experience overall.
Keeping state management simple was the right decision — Instead of introducing Redux or Zustand, the app relied entirely on React hooks like
useState,useCallback,useEffect, anduseRef. For the scale of this project, avoiding additional abstraction layers kept the architecture more predictable, easier to maintain, and simpler to reason about.Animation is a form of communication — Small interface details such as the mascot’s gentle movement, the soft speech bubble transitions, and the timer’s breathing animations were not just visual polish. They helped communicate emotional tone and made the app feel calmer, more alive, and more supportive.
Edge functions worked extremely well for AI integration — Keeping API keys server-side through Supabase Edge Functions and routing all AI functionality through that layer provided both security and a smoother user experience. Streaming responses back using SSE also made AI task breakdowns feel more natural and responsive.
What's next for Adapt Productivity OS
Emotion-aware adaptation — Integrate lightweight mood check-ins so the app can adapt its tone and behavior based on how the user feels, not just how they work.
Calendar intelligence — Connect with Google and Outlook calendars to automatically adjust productivity modes around the user’s real schedule.
Voice-first interaction — Expand voice support beyond task creation to full app control during focus sessions.
AI-powered ADHD coaching — Provide personalized productivity suggestions and behavioral insights based on user patterns.
Multi-device sync & mobile app — Build a companion mobile app for seamless productivity support across devices.
Customizable mascot system — Allow users to personalize their companion with different characters, names, and themes.
Community mode — Introduce optional peer-support insights to help ADHD users feel less isolated in their productivity struggles.
Log in or sign up for Devpost to join the conversation.