Work
Professional Project • Custom Web App • Municipal GIS

City of Lake Forest
CBD Parking App

A custom React + ArcGIS web application that helps residents and visitors understand Central Business District parking at a glance — with on-demand walk-time routing from any origin, detailed lot profiles, and a mobile-first interface built for use at the curb. Delivered exactly what the client asked for, with functionality off-the-shelf ArcGIS Experience Builder couldn't provide. It was MGP's first custom-coded GIS application, and the JSON-driven template it established is now reused on follow-on projects.

React TypeScript Vite ArcGIS Maps SDK Network / Walk-Time Routing Responsive / Mobile-First
1st
Custom-coded app at MGP
1-tap
Walk-time from any origin
JSON
Config-driven & portable
Reused
Now a multi-city template
01

The Problem

Parking is confusing downtown

Lake Forest needed residents and visitors to understand downtown parking at a glance — the lots, the restrictions, and the question everyone asks: "how far is this lot from where I'm going?"

Off-the-shelf fell short

ArcGIS Experience Builder, the standard no-code tool, couldn't deliver it — specifically interactive walk-time from a user-set origin, and an interface that works on a phone at the curb as well as a desktop.

No precedent to lean on

And MGP had never shipped a custom-coded web app — so this had to be built and deployed from scratch, in a way the firm could reuse.

02

The Solution

A purpose-built React + ArcGIS app

A custom React + ArcGIS app maps every CBD lot with color-coded restrictions and tappable profiles — enforcement schedules, EV charging, permits. Mobile-first, built for someone deciding where to park from the sidewalk.

Walk-time at the center

The headline feature: on-demand walk-time routing. Set an origin and the app draws the walking distance and time to each lot — the exact capability Experience Builder couldn't provide.

Built to be reused

A single JSON config drives the whole app, making it portable to any community with no code changes. I validated the lot data with stakeholders, deployed it, and left a template MGP now reuses on follow-on projects.

03

Result & Impact

A clearer downtown

Residents and visitors now have a public-facing tool that gives instant clarity on parking options and walking distances — reducing confusion and improving the downtown experience, on whatever device they happen to have in hand.

A first-of-its-kind for the firm

This was MGP's first custom-coded GIS web application — a demonstration that a tailored, developer-built solution can deliver what off-the-shelf tools can't, end to end: requirements, data, build, and deployment.

A template, not a one-off

Because the app is JSON-configurable, it became a reusable standard for the firm. A second municipal parking map (La Grange) was built directly from this foundation — the clearest proof that the investment paid forward into future work.

Technologies used

React + TypeScript + Vite

A modern, component-driven front end with a fast Vite build — the foundation for a tailored interface that off-the-shelf no-code tools couldn't match.

ArcGIS Maps SDK

Interactive mapping of every CBD lot with color-coded restrictions and rich, tappable lot profiles for enforcement, EV charging, and permits.

Walk-Time Network Routing

On-demand walking distance and time from any user-set origin to each lot — the headline capability and the reason a custom build was required.

JSON-Driven Configuration

The whole app reads from a single config file, making it portable to any community with no code changes — the basis of a reusable firm template.

Mobile-First, Responsive

Designed for use at the curb — the walk-time tool sits one tap away and the layout works equally on phone and desktop.

Stakeholder Data + Deployment

Worked directly with client stakeholders to validate lot data, then built and deployed the production app at apps.mgpinc.com.

More work like this