ADHD Life Dashboard
Neurodivergent-friendly life management tool with adaptive theming and energy-aware task planning
The Problem
Traditional productivity tools overwhelm neurodivergent users with rigid structures, harsh interfaces, and calendar-centric approaches that ignore fluctuating energy levels.
Specific Pain Points
- Cognitive overload: Notification-heavy, cluttered interfaces create mental exhaustion
- Energy blindness: No tools account for ADHD time blindness or daily capacity fluctuations
- Thought capture friction: Switching apps breaks hyperfocus flow state
- Decision paralysis: Inflexible prioritization systems don't match ADHD needs
- Visual fatigue: Static, bright interfaces don't adapt to time of day
The Solution
An ADHD-friendly dashboard with organic, nature-inspired design that adapts throughout the day. Features time-based themes, frictionless brain dump, and energy-capacity visualization.
Key Features
⏰ Time-Based Adaptive Theming
Four themes (Day, Afternoon, Dusk, Evening) shift automatically, reducing eye strain with soft gradients and nature-inspired colors
🧠 Brain Space with Priority Flow
Capture thoughts instantly. Items flow from unsorted brain dump into drag-and-drop priority sections
⚡ Energy Capacity Visualizer
Glowing organic circle shows daily capacity based on task durations, preventing overcommitment through visual feedback
📱 Progressive Web App
Install on any device with offline support, Firebase cloud sync, and local-first architecture
Screenshots & Walkthrough
Dashboard with time-based adaptive theming, brain dump, and energy capacity visualizer
Additional dashboard view showing interface details
More Screenshots
Coming as project reaches productionAdditional detailed views coming soon
Technical Implementation
Architecture Decisions
Vanilla JavaScript with Vite for instant performance. Firebase for optional cloud sync. Local-first ensures offline functionality—critical for ADHD users who need tools that work immediately, without authentication gates.
Stack
- Firebase Firestore + Authentication for optional cloud sync
- localStorage as primary data store for offline-first architecture
- CSS custom properties for dynamic theming transitions
- Playwright test coverage for quality assurance
- ES6+ modular components for maintainability
- Vite build system for instant hot module replacement
Interesting Challenges
Challenge: Mobile layout flashing on load
JavaScript-based responsive detection caused visible layout shifts when the page loaded, creating a jarring experience on mobile devices.
Solution: Replaced JavaScript-based responsive detection with pure CSS @media queries, ensuring instant mobile layout regardless of JS execution timing. This eliminated all layout flash and improved perceived performance.
Challenge: Jarring theme transitions
Theme changes felt abrupt and disruptive, breaking the calm, organic aesthetic that's critical for neurodivergent-friendly design.
Solution: Implemented CSS custom properties with time-based controller that checks every minute. Added transition: all 0.3s ease for seamless gradient shifts. Themes now fade naturally between states.
Development Process
What I Built First
Started with capacity visualizer and brain dump—the two features that solve core ADHD challenges: visual energy awareness and frictionless thought capture. These MVPs validated the concept before adding complexity.
Key Iterations
- Round 1: Initial bright themes caused eye strain → softened with glassmorphism and nature-inspired gradients
- Round 2: Users forgot about unsorted brain dump items → added visual prompting with subtle animations
- Round 3: JavaScript layout detection caused flash → migrated to CSS-only responsive breakpoints
Additional Features I'd Like to Add
I'd add smart scheduling features that adapt to energy patterns and integrate with calendar apps. I'd also implement habit tracking with gentle reminders and add data export functionality so users can analyze their productivity patterns over time.
Results & Impact
Key Takeaways
CSS > JavaScript for Responsive Design
Pure @media queries eliminate layout flashing and execution timing issues. JavaScript-based responsive detection creates race conditions and visual artifacts that CSS handles instantly.
Design for Cognitive Load
The capacity visualizer externalizes mental math about daily bandwidth—reducing invisible cognitive load that causes ADHD overwhelm. Visual feedback prevents the common ADHD pattern of overcommitting.
Local-First + Cloud Sync
No authentication gates. Users start instantly, sync optionally—critical for neurodivergent users who resist rigid systems. LocalStorage as primary data store with Firebase as backup creates zero-friction onboarding.