Inspect Building Case Study

Inspect Building — a gentle case study

Before Inspect Building, city inspectors carried 900+ pages of Title 24 energy code,
paper and pencil in hand,
trying to trace which rooms mattered most,
which questions to ask,
and how to do all of this inside the narrow window of a walk-through.

It was noble, dedicated work —
just heavy, manual, time-hungry.
I wanted to help lighten the load.

From 2019–2021, I slowly shaped a digital companion
that could guide the process with clarity,
softness,
and a little breathing room.

My Role

I served as the lone frontend developer and UI designer,
collaborating closely with a backend lead and a few steady stakeholders.
Information architecture, component logic, map layers,
PDF generation —
all threads I wove together.

Highlights

Map-Based UI

A modular single-page app, with Leaflet at its center.
Inspectors could wander a building like a small unfolding world —
zoom into floorplans,
tap a room,
let the next question reveal itself.

Impact-Ranked Question Flow

The giant 900-page code was distilled into ranked pathways —
highest-impact questions rising first,
so inspectors could focus their limited time
where it mattered most.

A quiet reordering of complexity
into something workable, humane.

Offline-Resilient Workflow

Basements, elevators, concrete silences —
the app kept breathing even there.
Local caching, provisional saves,
sessions that waited patiently until the world came back online.

Modal-Guided Focus

Prompts opened like small lanterns.
Each inspection phase unfolding step by gentle step.
Bootstrap underneath,
rendering fast even on the most stubborn devices.

Secure & Configurable

JWT for auth,
JSON-driven logic,
S3 for floorplans.
A system that could shift and grow
without tantrums.

PDF Reports

After the walk-through, everything gathered itself into a structured report —
a clear story of the building,
floor by floor,
question by question.

Stack

• Frontend: Vanilla JS modules, Leaflet, Bootstrap, jQuery, Axios, SweetAlert2
• Backend: Node.js, Express, EJS, SJCL, dotenv
• Data: JSON configs, localStorage, S3 image assets
• Design: Responsive, mobile-first, DNS prefetching, modal logic
• Docs: Markdown guides for future hands and hearts

Why It Mattered

Inspectors move through unpredictable spaces with real human impact.
They don’t need more noise —
they need clarity,
a steady rhythm,
a tool that feels like a companion rather than a burden.

Not flashy.
Just solid.
Helpful.
Quietly elegant.

That’s the work I love:
transmuting complexity into visual harmony.

— juan carlos ❤️