Overview
Eon Aligner is a clear-aligner brand with a growing network of certified providers across the Middle East. They needed two things at once: a polished, fast way for patients to find a clinic near them, and a way for the marketing team to manage that provider network themselves — across multiple countries, without filing developer tickets every time a clinic was added or moved.
I designed and built a single-page React application with an interactive Google Maps interface, backed by a headless Airtable CMS. The marketing team operates the entire provider network through a familiar spreadsheet — and the patient-facing map updates without a deployment.
The Challenge
A doctor finder sounds simple until you account for who has to keep it accurate. Patients need a fast, intuitive map. The marketing team needs autonomy. The infrastructure needs to be lean enough to ship and maintain without a dedicated engineering team.
Patient Experience Came First
Visitors needed to find a certified provider in seconds — with map context, location-based filtering, and clear next steps. The interface had to feel native to how people already use Google Maps.
Marketing Needed Full Autonomy
Adding a new clinic, updating a doctor's hours, or removing a provider couldn't require a developer. The team needed to manage the network end-to-end through tools they already used.
A Lean, Secure Stack
No backend team, no DevOps overhead — but no shortcuts on credentials either. API keys couldn't ship to the browser, and the architecture had to stay maintainable by whoever inherited it.
The Core Insight
The most valuable thing I could build wasn't the map. It was a system the marketing team could operate themselves.
A doctor finder that requires a developer to update is a doctor finder that goes stale. The whole engagement pivots on a single decision: where the source of truth lives. Putting it in Airtable — a tool the marketing team already understood — meant the patient-facing map became a thin, fast view over data the team already owned. Every other architectural decision flowed downstream from that one.
The win wasn't the React app. It was the absence of a developer in the loop every time a new clinic opened.
The Approach
Three decisions shaped the build:
Airtable as the headless CMS. The marketing team already worked in spreadsheets. Rather than build a custom admin panel they'd have to learn, I made Airtable the source of truth. New columns, new providers, new countries — all managed through an interface they were already fluent in.
Serverless proxy for security. The Airtable API key stays on the server. A Netlify Function sits between the React app and Airtable, handling authentication, pagination, and a 5-minute cache layer. Credentials never reach the browser.
Responsive map behavior over feature count. Instead of bolting on filters and toggles, I focused on making the map feel right — zoom levels that match what the user just selected, geocoding that loads only when needed, filter dropdowns that depend on each other so the user can't get lost.
Technical Architecture
Secure API Layer
Rather than expose the Airtable API key in client-side code, the architecture routes every request through a Netlify Function. The serverless layer handles authentication, follows Airtable's pagination tokens until the full dataset is retrieved, and returns sanitized data to the frontend with a 5-minute cache window. The browser never sees a credential.
Context-Aware Map Camera
The map responds to what the user is doing through a priority-based zoom system:
- Selecting a doctor zooms to street level (15) and centers on their clinic
- Selecting a city zooms to neighborhood level (12), centered on the available providers in that city
- Selecting only a country calculates the geographic centroid by averaging all doctor coordinates in that country, then zooms to regional level (6)
The result: the user always sees relevant context, regardless of how they navigate.
Hybrid Geocoding Cache
Converting lat/lng to a human-readable address is a paid Google API call. To minimize calls and keep responses instant, the app uses a two-tier cache: an in-memory Map for session-fast lookups, persisted to localStorage so addresses survive across visits. Geocoding is also lazy — it only runs when a user opens a doctor's info window.
Cascading Filter Logic
Cities stay disabled until a country is chosen, then dynamically populate with only the cities that have providers in the selected country. All derived state — filtered doctors, available countries, available cities — is memoized to prevent recomputation on every re-render.
Tech Stack
Frontend
React 19, Vite, Tailwind CSS
Maps
@vis.gl/react-google-maps — Advanced Markers and Geocoding
Backend / CMS
Airtable as a no-code database
Serverless & Hosting
Netlify Functions and continuous deployment from Git
Key Design Decisions
Airtable Over a Custom Admin
A bespoke CMS would have been a project of its own — and another tool for marketing to learn. Choosing Airtable meant the team's existing spreadsheet fluency became their CMS skill set on day one. Adding a clinic is the same as adding a row.
A Serverless Function Instead of a Backend
A Netlify Function gave us exactly the surface we needed — API proxying, pagination, caching — without standing up a server, a deployment pipeline, or anything else for the team to maintain. The whole backend is one file.
Map Behavior Tuned to Intent
A map that always zooms the same way fails its users. By tying zoom level to what the user just selected — a doctor, a city, or a country — the camera always lands on something useful. Small detail; large effect on how the app feels to use.
Lazy Geocoding with a Two-Tier Cache
Geocoding every clinic upfront would have been wasteful and slow. Fetching addresses only when a user opens an info window — and caching them in both memory and localStorage — keeps the app responsive while the API bill stays predictable.
Outcome
A live, production tool the marketing team operates independently — and a patient-facing experience that feels native to how people already navigate the web.
Zero Developer Bottleneck
Marketing adds, edits, and removes providers in Airtable — changes show up live without a deployment, a ticket, or a developer.
Multi-Country Support
Cascading country and city filters scale with the network — adding a new market means adding rows, not refactoring code.
Project Images
Initial Map View — Clinics Across the Network
Cascading Country and City Filters
Reflection
The strongest decision in this project wasn't a technical one — it was refusing to build a custom admin panel. The marketing team didn't need a new tool to learn; they needed their existing tool to be load-bearing. Once Airtable became the source of truth, every other choice — the serverless proxy, the caching layers, the lazy geocoding — was just supporting infrastructure for a workflow the team already had.
The patient-facing map gets the visible credit. The real win is the empty space where a developer used to sit between the marketing team and their own data.