| Stack | Role | Year | Status |
|---|---|---|---|
| React 19, PWA, Chart.js, Tailwind CSS | Frontend Developer | 2023 | Live |
Habit Tracker & Streak Counter
A Progressive Web App for tracking daily habits and building momentum
Habit Tracker & Streak Counter — A Progressive Web App for tracking daily habits and building momentum is a technical case study on ancel.co.ke documenting architecture, trade-offs, and outcomes. To make habit tracking work even when the network is unreliable, I built a PWA that runs and persists data offline so users never lose streak or progress. Ancel Ajanga wrote this case study from hands-on delivery experience in Kenya.
A creative Progressive Web App experiment exploring offline-first design patterns and modern UI interactions. This project demonstrates PWA capabilities, service workers, and engaging visual feedback for habit tracking.
The Problem
People struggle to build and maintain positive daily habits. This project explores how modern PWA technologies can create engaging, offline-capable habit tracking experiences with visual motivation and streak mechanics.
To make habit tracking work even when the network is unreliable, I built a PWA that runs and persists data offline so users never lose streak or progress.
The Solution
I built a React PWA with habit tracking, streak counting, and visual analytics, using a service worker for offline support, LocalStorage for persistence, and modern UI patterns for engaging feedback.
Key Technical Terms
- Service worker:In this habit tracker, the service worker caches assets and enables offline use so the app loads and works without network; that supports the goal of reliability for daily check-ins.
- Offline-first persistence:Habits and streaks are stored locally and synced when online so users never lose data on spotty connections; for this project that makes the app resilient to network failure.
- Streak calculation:Streaks are computed from stored check-in history so progress is consistent and motivating; that supports the goal of visual momentum and accountability.
The Impact
This creative experiment showcases PWA development practices, demonstrating offline-first design, service worker implementation, and modern UI patterns for building engaging productivity applications.
100/100
100%
Outcomes
- Fully functional PWA
- Engaging habit tracking experience
- Visual progress feedback
- Offline-first design
Failure Modes & Resilience
LocalStorage full: we surface a clear message and avoid silent data loss. Service worker update failure: the app still works with cached assets; next load can pick up the new worker. Corrupt or missing data: we validate on load and fall back to empty state so the app does not crash.
Outcome & Future Potential
This creative experiment showcases PWA development practices, demonstrating offline-first design, service worker implementation, and modern UI patterns for building engaging productivity applications.
100/100
Lighthouse PWA score
100%
Full offline functionality
Project Gallery