Menu

Loading

CL Jobsite Installer

The
Challenge

CL Jobsite is a full-stack, offline-first Progressive Web App built to coordinate construction installation projects across field teams and project managers. The system manages everything from multi-unit apartment task tracking and photo documentation to warehouse requests, punchlist management, and real-time notes — with a data model built around the realities of field work: spotty connectivity, mobile-first interaction, and strict role separation between installers and account managers.

Construction installation teams work across multiple floors and apartment units simultaneously, often in buildings with poor connectivity. Before this system, coordinating field work meant:

  • No real-time visibility into which apartments were in progress, completed, or blocked
  • Task assignments managed manually, with no enforced confirmation or sign-off workflow
  • Photo documentation scattered across personal phones with no central collection point
  • Warehouse and delivery requests handled verbally or by text message, with no tracking
  • Project managers relying on phone calls to get status updates from the field
  • Punchlists and closeout items managed in spreadsheets that were always out of date

The
Solution

A purpose-built PWA that works equally well on a phone in a building basement as it does on a laptop in the site office. Field teams get a task-focused mobile UI with offline capability; account managers get project-wide visibility with photo galleries, punchlist tracking, and note management — all syncing automatically when connectivity returns.
Multi-Role Access Control
  • Two distinct roles with different permissions: Installer and Account Manager
  • Installers see and act on their assigned tasks only; account managers see everything and can manage the full project
  • Role-based rendering enforced at the UI level via CASL, and at the API level via middleware + query filtering
  • URL-based project access via auth key — no separate login page
Hierarchical Project Structure
  • Full hierarchy: Projects → Floors → Apartments → Tasks + Items
  • Apartments carry status, task completion counts, and photo galleries
  • Tasks support confirmation workflows with photo upload required for sign-off
  • Items track ordered vs. delivered quantities per apartment
Offline-First Architecture
  • IndexedDB local cache stores the full project dataset on device (5 object stores: projects, floors, apartments, requests, users)
  • All mutations write locally first, then sync to the server
  • Online status polled every 5 seconds; pending sync indicator alerts users of uncommitted changes
  • Manual offline mode toggle for intentional disconnection
  • Auto-sync fires on reconnection
Progressive Web App
  • Vite PWA plugin generates a service worker that caches all JS, CSS, images, and fonts
  • Service worker auto-updates every 30 minutes in the background
  • Installable on iOS and Android home screens for a native-app feel
Photo Documentation
  • Photo upload on task confirmation, apartment closeout, and punchlist items
  • Client-side compression via browser-image-compression before upload
  • Backend: Multer (in-memory) → Sharp resize → BullMQ async S3 upload
  • Photos stored in AWS S3 under organized project paths, accessible via photo gallery views
Warehouse Requests
  • Field installers submit warehouse requests directly from the Units tab
  • Account managers can view, filter, and manage request history per project
  • Request log per apartment tracks all delivery history
Punchlist & Closeout Tabs
  • Closeout tab gives a floor-by-floor view of apartment completion status with photo galleries
  • Punchlist tab surfaces open tasks across all units with filtering by floor or type
  • Both tabs share consistent data from the same React Query cache
Rich Notes System
  • Notes tab supports Quill-based rich text editing with image embedding
  • Comments track read/unread status per user
  • Images in notes go through the same S3 upload pipeline as task photos

Scope &
Scale

  • 4 main tabs — Units, Closeout, Punchlist, Notes — each purpose-built for its workflow
  • 17 API endpoints covering CRUD for projects, floors, apartments, tasks, items, comments, and requests
  • 17 custom React Query hooks managing all server state and cache lifecycle
  • 5 IndexedDB object stores for full offline data persistence
  • 2 user roles with distinct permission sets enforced on both frontend and backend
  • 2 Redux slices for global app state and install-context state
  • 2 background job types (S3 upload, email notification) running via BullMQ workers
  • 15+ Sequelize models imported from the shared databasemanager package

The
Outcome

Field teams gained a reliable mobile tool that works through poor connectivity and doesn't lose data when the signal drops.

Apartment task confirmation now requires a photo, creating an automatic documentation trail for every completed unit. Account managers can check live project status, browse photo galleries, and review punchlist items from their laptop instead of calling the site. Warehouse requests go directly into the system with a history log, eliminating the back-and-forth that previously led to missed deliveries. The PWA install prompt gives field workers a home-screen app that loads instantly — even before the network responds.