Capstone 14 · Full-Stack

Field Notes

Community researchers, canvassers, health workers and oral historians collect data in places with no reliable connection. Most tools assume a network and become useless exactly where they are needed. Build one that does not. It must be fully usable with the connection off: create records, attach photos, edit and delete, and see everything already collected. When a connection returns, it syncs. Sync is where this becomes a serious project. Two devices edit the same record while both are offline, and when they reconnect somebody has to decide what the record now says. Last write wins is a decision, not a default, and it silently loses work. Whatever you choose, choose it deliberately, document it, and make sure a person can see that a conflict happened rather than having their work disappear quietly. The rest is real too: a service worker so it loads with no network, local storage that survives a browser restart, queued changes that survive being closed mid-sync, and photos that do not exhaust the device's storage.

Concepts used

Offline-firstService workersIndexedDBSync and conflict resolutionQueueingProgressive enhancementTestingDeployment

Your dataset

A form definition you design, plus enough seeded records to test sync at a realistic size.

Milestones

1Make the application load and function with the network disabled, via a service worker.
2Store records locally so they survive a browser restart.
3Queue changes made offline, and have the queue survive the tab being closed mid-sync.
4Sync to the server when a connection returns, with the queue processed in order.
5Create a conflict deliberately: edit one record on two devices offline, then reconnect both.
6Implement and document your conflict policy, and show the user when one occurred.
7Handle photos: compress before storing, and cap the space used.
8Test the honest way: airplane mode, a full day of collection, then reconnect and verify nothing was lost.

Your workspace

Build the full project here. Work through the milestones in order, in both languages.

SANKOFA SANDBOX
loading editor…
Your turn → Build it in Python first, then rebuild it in JavaScript. The logic transfers, only the syntax changes.
← All projectsNext: The Open Brief →