Project: offline inspection draft and photo intake

Last updated: 5 Oct 20268 min read

project

Build an inspection note editor that can survive a tab close while offline. Store the draft with a stable local ID and the server version from which it began. On reconnect, submit the note through a write contract that can report a conflict. Treat the attached photo as an untrusted upload; the server must validate and convert it before the case page serves a bounded variant.

Build contract

Persist draft text and sync state in IndexedDB and distinguish local save from server commit in the status region.
Send the base record version with the write and preserve both copies when a concurrent edit creates a conflict.
Limit upload size, inspect content rather than the filename, and deliver separate card and detail image variants with dimensions.

Implementation checkpoint

function classifyDraft(serverVersion, draftBaseVersion) {
  if (serverVersion !== draftBaseVersion) return 'resolve conflict';
  return 'commit draft';
}
console.log(classifyDraft(14, 12));

Cost and boundaries

A local draft write is O(B) in draft bytes; upload transfer and image conversion dominate for a photo of M bytes and its variants. Quota and eviction make local storage a temporary safety net, so the interface must never label an unsynced draft as a confirmed server record.

Acceptance checks

Write a note, go offline, close the tab, reopen it, and recover the exact text.
Commit an online change elsewhere, reconnect, and confirm the draft remains available for comparison.
Upload mismatched and oversized files, then inspect card image bytes and reserved layout space.

Common Mistakes

The UI reports success before the local transaction finishes and loses the note on tab close.
A reconnect overwrites an online edit without showing a conflict.
A renamed non-image file is served as trusted content.

web-tech

web-development