Development / DesignSep 2025Sep 2025
FirebaseIndexedDBJavaScript
TL;DR

A Progressive Web App (PWA) that implements the Pomodoro Technique with offline-first architecture using dual-layer data persistence through Firebase Firestore and IndexedDB. The application provides a 25-minute focus timer and task management system that works seamlessly whether online or offline, automatically synchronizing data when connectivity is restored, ensuring users maintain uninterrupted productivity workflow regardless of network conditions.

LoFi Focus Timer

Overview

LoFi Focus Timer is a Progressive Web App that works offline. Built with vanilla JavaScript, Firebase, and IndexedDB, this Pomodoro timer functions identically whether you're online or offline. Tasks and timer sessions sync automatically to the cloud when you reconnect.

The Problem

You're working at a coffee shop when the WiFi cuts out. Your productivity app freezes, losing your unsaved task and resetting your timer. Most web apps fail without internet, breaking workflow and causing data loss anxiety for students, remote workers, and travelers who need reliable tools regardless of connection quality.

The Solution

LoFi Focus Timer uses dual-layer storage to work perfectly online or offline.

  • Offline-First Architecture saves tasks to IndexedDB immediately, then syncs to Firebase when online. Create, edit, and delete tasks without internet. Everything queues locally and uploads automatically when you reconnect.
  • Pomodoro Timer provides 25-minute focus sessions with break tracking. Timer state persists across page refreshes and offline periods, so you never lose progress.
  • Anonymous Authentication requires no signup. Each device gets a unique ID for private cloud sync without creating accounts or sharing personal information.
  • Progressive Web App installs like a native app and works completely offline with service worker caching. Launch instantly from your home screen in airplane mode.

My Contributions

I built this application end-to-end, architecting the dual-layer storage system that syncs IndexedDB and Firebase Firestore. When online, operations write to both simultaneously. When offline, they queue locally and upload on reconnection. I implemented the synchronization manager with retry logic for failed syncs and edge case handling.

I created three IndexedDB object stores mirroring Firebase's API structure, integrated anonymous authentication, configured Firestore security rules, and built the service worker caching strategy. The codebase uses modular ES6 architecture separating storage, business logic, and presentation.