← Back to portfolio

ADHD Routine Timer — Timed Routines with Presets & Focus

Role: UX & Front-End · Growing Back-End • Stack: HTML, CSS, JavaScript, Supabase (Auth + Postgres)

Context

Traditional to-do apps often overwhelm attention with endless lists and complex features. My idea came from body doubling—the productivity technique of working alongside someone else for motivation. I designed this app as a simple routine timer where users can create or choose timed task sets and run them distraction-free, with an optional focus video in future versions.

Goals

• ⏱ Run a routine of tasks, each with its own timer and auto-advance.
• 📚 Presets for quick start (e.g., Pomodoro 25/5, Cleaning 15).
• 🎲 Randomize tasks from a personal library to build new routines.
• 🔒 Personal data: private routines per user (Supabase Auth + RLS).
• 📊 Session summary: show completed tasks and total focus time.

Users & UX Decisions

• Large timer display: high-contrast countdown for each task.
• Presets: quick start without setup, useful for motivation dips.
• Color cues: optional priority colors, but kept UI clean.
• Full-screen run mode: fewer distractions while a routine is active.
• Keyboard shortcuts: space = pause/resume, → = skip task.

Architecture (MVP)

The app runs as a static site on Netlify. It uses Supabase for authentication, data storage, and policies to isolate user data. Routines, tasks, and session history are stored in Postgres tables.

Layer	Tech	Notes
Front-end	HTML/CSS/JS	Routine timer, filters, and run mode
Auth	Supabase Auth	Email/password (MVP)
DB	Supabase Postgres	Tasks, routines, sessions tables
Hosting	Netlify	Free tier, auto-deploy from GitHub

Database Schema (simplified)

Table	Main fields
tasks	id, user_id, title, default_minutes, category
routines	id, user_id, name, is_preset
routine_items	routine_id, title, minutes, position
sessions	id, user_id, routine_id, started_at, ended_at, video_url (future)

Key Features

• Create custom routines with ordered tasks and durations.
• Start a timer that runs through tasks automatically.
• Pause, resume, or skip tasks; sound alert on task switch.
• Pick from built-in presets like “Focus 25” or “Clean 15”.
• Randomize routines from a personal task library.

Challenges & Fixes

• Managing timers: kept logic simple with one interval and state management for pause/resume.
• Data privacy: used Supabase Row Level Security so only owners can view/edit their routines.
• Over-scoping risk: body-doubling video was part of the vision, but postponed to future improvements.

Result

The MVP provides a distraction-free way to run timed routines, either through presets or custom task sets. It demonstrates full-stack skills: authentication, CRUD routines, and a real-time timer with session tracking.

Screens

Future Improvements

• Body-doubling video: allow users to run a routine alongside a video (e.g., “focus with me” or their own upload). I scoped this out of the MVP to stay realistic, but it remains a major future goal.
• More presets, including study, cleaning, and morning routines.
• Offline support and PWA install (so it works like a mobile app).
• Daily streaks, achievements, and personal analytics.

Links

Live Demo GitHub Repo Download CV

Built by Antonella Akromah · a@gmail.com