← Back to project catalogue
GP-CS-1MS4H7CComputer ScienceReady

React offline inspection console

An offline-capable React inspection console with durable local drafts, safe retry, revision checks, automatic non-overlap merging, and visible field conflicts.

React offline inspection console project visual
GP-CS-1MS4H7C · Computer Science
  • React 19
  • TypeScript
  • Vite PWA
  • Dexie
  • IndexedDB
  • Node.js
  • SQLite
  • Vitest
  • Playwright

Project definition

Problem statement

Inspection teams need to complete long, structured records even when connectivity is unstable.

The frontend must preserve user work, make synchronisation state clear, prevent accidental data loss, and remain responsive with large records.

Project objectives

  • Model structured engineering inspections with typed fields.
  • Store drafts and queued writes durably on the device.
  • Prevent lost updates with strong revision checks.
  • Merge independent changes and present same-field conflicts for review.
  • Measure correctness, performance, accessibility, and recovery behaviour.

Project structure

Project components

01

Inspection workspace

Organises assigned inspections, sections, evidence, validation state, and completion progress.

02

Inspection form

Records asset details, site conditions, checklist results, observations, and a final summary.

03

Offline store

Persists inspections, newest queued writes, conflicts, and last-sync metadata in IndexedDB.

04

Synchronisation engine

Sends idempotent writes, checks server revisions, rebases independent edits, and retains failed work.

05

Conflict resolver

Shows local and server values for every divergent field before a replacement write is created.

06

Local API

Uses Node.js and SQLite for validated conditional updates and repeat-safe responses.

Methodology

Project workflow

  1. 01
    Load assignments

    The console reads three prepared inspections from the device database.

  2. 02
    Work offline

    The user completes sections and attaches evidence against the local record.

  3. 03
    Queue changes

    The newest local draft becomes a durable write with a revision and idempotency key.

  4. 04
    Synchronise

    The client sends queued work and compares the base revision with the SQLite record.

  5. 05
    Resolve a conflict

    Independent changes merge automatically. Divergent fields wait for the inspector to choose a value.

Demonstration scenario

An inspector opens an assignment, disconnects the network, records findings, saves the draft, reconnects, and synchronises. A prepared server edit creates one visible field conflict while compatible changes merge automatically.

Engineering

Tools and method

Application structure
React 19 components, strict TypeScript domain records, and a clear repository boundary.
Local persistence
Dexie transactions join local inspection updates with outbox replacement.
Concurrency protocol
Strong ETags, If-Match, idempotency keys, three-way merge, and explicit resolution.
Server persistence
A bounded native HTTP service and transactional SQLite store for the prepared records.
Testing
Sixty unit and integration tests, three browser tests, and sixty deterministic merge scenarios.

Testing

Evaluation

Evaluation measures

  • Sixty of sixty correct merge decisions
  • Median and P95 merge time through 2,500 fields
  • Idempotent replay and stale-write behavior
  • Offline draft survival in a real browser
  • Keyboard focus and accessible control checks

Project boundaries

  • The project uses fictional inspection records.
  • The included Node.js and SQLite API is a local demonstration service.
  • Authentication, authorisation, encryption, device management, and public deployment are outside scope.
  • Native mobile packaging and real attachments are outside scope.

Included

  1. 01Inspection console, offline data layer, revision-aware synchronisation service, conflict resolver, and test suite
  2. 02Prepared sample data and demonstration scenarios
  3. 03Automated tests and measured results
  4. 04Complete source code in a private GitHub repository
  5. 05Complete project documentation in PDF and editable Word formats with synopsis, abstract, methodology, architecture diagrams, test results, screenshots, and conclusion
  6. 06Setup and usage guide

Project record

No information is collected on this page.

Permanent project ID
GP-CS-1MS4H7C
Catalogued
21 Aug 2026
Completed
24 Aug 2026
Verified
24 Aug 2026
Demonstration
Included in repository

Handover

After purchase

  1. 01
    Payment is confirmed

    The project is marked unavailable and cannot be purchased again.

  2. 02
    Repository access is granted

    The buyer's submitted GitHub account receives access to the private repository.

  3. 03
    The purchase record is delivered

    The certification sheet is prepared from the reviewed buyer details and sent privately by email.