Mobile PWAPrototype

Fieldnote

Offline-first progressive web app for structural property assessments and field contractors.

Context
Inspection & Engineering Consultancy
Role
Mobile UX Architecture, IndexedDB Sync Engine, Frontend UI
Timeline
6 weeks · 2023
Key Stack
Next.js 14, TypeScript, Workbox PWA
100%
Data retention in zero-signal areas
1.8 hrs
Saved per site survey
< 200ms
Local search and entry latency
01 The Problem

Why this needed to be built.

Fieldnote was built for property inspectors and civil engineers who conduct structural surveys in remote basements, attics, and construction sites where cellular connection is nonexistent. It allows inspectors to record observations, capture tagged photos, and compile official survey reports directly on site.

Existing inspection software required continuous internet connectivity. When engineers lost cellular reception inside concrete basements, apps would freeze, lose draft inputs, or fail to upload photos, forcing inspectors to re-enter data on clipboards and type it up back at the office.
02 The Solution

Approach and execution.

Designed and engineered an offline-first Progressive Web App using IndexedDB as the primary local data store. All records, voice dictations, and high-res photos are saved instantaneously to the device and synced seamlessly in the background when connectivity resumes.

Deliverables

  • Offline-capable PWA with local SQLite / IndexedDB cache
  • One-tap photo annotation with geo-coordinates
  • Background conflict-free synchronization engine
  • Instant branded PDF inspection report generator
03 Highlights

Key functional details.

True Offline Operation

Zero network reliance during surveys. Full CRUD operations stored in local browser storage.

Background Sync Engine

Queues uploads with automatic retry and conflict resolution when connection is detected.

One-Click Report Export

Generates client-ready PDF inspection reports with photo grids and timestamps before leaving the site.

04 Technical Retrospective

What this project proved

Offline-first apps require a fundamental shift in mental model: the server is just a backup, while the local client is the source of truth. Implementing optimistic UI updates ensured immediate tactile response.

Tech stack:Next.js 14TypeScriptWorkbox PWAIndexedDB (Dexie.js)Tailwind CSSpdfmake