Open-source · Live PWA

Designing past the streak counter

I designed and coded Unloops, a CBT-inspired Progressive Web App (PWA). Built to move past guilt-driven streak counters, Unloops provides an in-the-moment pause mechanism to help people interrupt automatic impulses before a setback occurs.

Executive Summary

Problem: Traditional habit trackers count days until you slip, measuring guilt after the fact rather than offering practical intervention when an urge hits.
Role: Solo Product Designer & Front-End Developer (0-to-1 concept, UI design, and production code).
Behavioral scope: Cognitive Behavioral Therapy (CBT) urge surfing, pre-commitment action plans, and non-punitive setback reflection.
Application stack: React, TypeScript, Tailwind CSS, TanStack Start, and Vite. IndexedDB on-device, with PostgreSQL on Neon via Drizzle ORM.
Current status: Live PWA used daily by early testers. Public GitHub release scheduled alongside the passkey authentication update (backend complete, finishing UI).
Timeline: 4 weeks from CBT research and rapid AI prototyping to working production release.

1Behavioral problem

The flaw with streak counters

A streak records the time between setbacks. It does little on its own when an urge arrives. If restarting at zero becomes the main measure of progress, a difficult moment can overshadow everything someone has already learned.

I kept the streak as one signal and designed the missing steps around it: a prepared action, an immediate pause, and a useful record of what happened.

01 // THE STREAK-ONLY MODEL

Binary streak tracking

Counts elapsed days during calm moments.
Offers no active intervention when an urge hits.
Makes the lost streak the most visible record of a setback.
Can make progress feel completely erased after a single slip.

02 // THE UNLOOPS MODEL

Active intervention

Prepares triggers and replacement actions in advance.
Offers a 10-minute pause with optional breathing guidance.
Preserves reflection notes and trigger history through resets.
Keeps the focus on the next action and what can be learned.

2Behavioral architecture

Plan, pause, and reflect

I organized the experience around three moments: preparing while calm, pausing during an urge, and reflecting after a setback. Cravings can peak and fade over time. The ten-minute timer turns that psychological pause into a concrete interaction: step back, review a prepared action, and make a conscious choice.

Clinical reference: CBT impulse management (VA Health) ↗

01 // PLAN AHEAD
Decide while calm
Choose personal triggers, supportive reminders, and a replacement action before the difficult moment arrives.
Step #1: Pre-commitment plan before the urge
02 // THE PAUSE
Make room to choose
Start a 10-minute timer, revisit the plan, or use an optional breathing exercise. Add five minutes when more time would help.
Step #2: 10-minute pause with clear next steps
03 // REFLECT
Keep the learning
Record what triggered a setback without judgment. Restarting the counter keeps earlier notes and patterns available.
Step #3: Reflection without losing context Scroll inside the phone

3Development workflow

From clinical concept to production in four weeks of evenings

Built after hours as a passion project. AI helped me move faster on initial research and starting templates, but the design choices, UI details, and production code are all mine.

01 // RESEARCH

Finding the right mechanism

I used AI Studio to summarize articles on CBT and habit loops, then turned those findings into three simple steps: plan ahead, pause during an urge, and reflect afterwards.

02 // PROTOTYPING

From quick layout to clean code

I used Lovable to generate an initial visual prototype, then pulled it into VS Code to clean up the code and rebuild it into reusable components.

03 // DEVELOPMENT

Building the actual app

I built the app in React and TypeScript. I used Claude to help write friendlier, non-judgmental text for when people slip, but I wrote and tested all the actual code myself.

4Architecture & privacy

Local-first storage, optional recovery

Habit notes can be deeply personal. Asking someone to create an account or upload that history would add friction at the point they are deciding whether to trust the app.

01 // LOCAL-FIRST BY DESIGN

IndexedDB for on-device habit data

The storage architecture uses IndexedDB for durable habit data and transactional updates, with a migration path from legacy browser storage. Core habit flows remain local-first, so using the app does not require a cloud account.

02 // BACKUP & RECOVERY

PostgreSQL on Neon for recovery services

Local-only history needs a recovery path if browser data is cleared. A separate PostgreSQL backend on Neon, accessed through Drizzle ORM, supports optional encrypted backups and passkey-based recovery. Snapshots are encrypted on the client before upload. These features remain gated while they are validated.

5Outcome & Learnings

What’s shipped and what comes next

01 // SHIPPED FOUNDATION

A live PWA in four languages

A live, installable PWA with offline use. Public GitHub repository scheduled to release with the passkey authentication update.
Pre-commitment planning, a 10-minute pause, and reflection notes that survive counter resets.
English, Polish, Portuguese, and Turkish interfaces.

Explore Unloops

02 // REAL-WORLD VALIDATION

Make the pause flexible

Daily use and informal feedback from early testers showed that the timer needed clear next steps. Quick +5 minute extensions give someone more breathing room, while reflection remains available when they want to record a setback.

The next step is publishing to Google Play using Google Bubblewrap to package the PWA for Android without maintaining a separate native codebase. In parallel, I'm finishing the UI for passkey-based recovery and gathering feedback on how people use the 10-minute pause in daily life.