Work / Prototype · 2026
GutterGauge
GutterGauge is a front-end prototype built for ValueFilter. Homeowners search for their address, trace each gutter run on a satellite map, choose a gutter size and guard material, and get the total footage, a kit count and a materials checklist. It is a React and TypeScript single-page app on the Google Maps JavaScript API.
- client work
- prototype
- prototype
- Type
- Prototype · Home improvement: map-based measurement tool
- Also uses
- TypeScript, React, React Router, Vite, Google Maps JavaScript API, oxlint, Vercel
- Last active
- 2026
What it does
- Landing page and a 4-step tutorial.
- Satellite-map tracing with draggable points, multiple sections and editing.
- Geodesic length calculation in feet.
- Address search with Places autocomplete.
- Gutter size and guard material selection.
- Results with footage, kit count (with trim allowance) and a materials checklist.
- In-app help when the Maps API key fails.
How it is built
- A front-end-only single-page app: step pages share measurement state through a React context, a provider loads Google Maps with an env API key, and geometry helpers compute lengths. There is no server or persistence; a Vercel rewrite config is present.
My part
- Appears to have directed the AI coding agent that wrote the app, reviewing and merging its pull requests, for ValueFilter.
- Reviewed and merged the two pull requests that brought in the code.
Decisions
- Compute lengths with spherical geometry on the map rather than pixel distances.
- Keep the tool client-only, with state in a React context.
Challenges
- Handling Maps authentication failures and migrating address search to the newer Places autocomplete element.
- Removing ghost polylines left behind when draft or edited sections were deleted.
Skills
- AI-assisted development (directing a coding agent, reviewing its PRs)
- Map-based UX with the Google Maps JavaScript API