Skip to content
About

Teaching the Frontend to Speak the Backend's Language

Added automatic type generation so the frontend and backend stay in sync — if the API changes, TypeScript catches it at build time instead of silently breaking.

2 min readEvergreen
On this page

Imagine the backend is a waiter who knows the whole menu. Until now, the frontend was a customer who had to guess what was on the menu and hope for the best.

What happened

The honest-cam compliance portal has a backend (the Python server that stores and serves all the data) and a frontend (the web pages that display it). They talk to each other by sending data back and forth in a specific format.

The problem: the frontend had no way to know if that format changed. If I updated the backend and forgot to update the frontend, it would just silently break — or worse, show wrong data.

I set up an automated system that reads the backend's full list of routes and data shapes, then generates a TypeScript file for the frontend that describes exactly what to expect. Now if the backend changes and the frontend is out of date, the build fails with a clear error instead of breaking silently.

There's also a guard built in: when you save changes to the project, it checks if the types are still current. If not, it stops you.

Why

The portal has grown from a handful of routes to 39 operations, and managing the connection between frontend and backend by hand isn't sustainable. This sets up a system where both sides stay in sync automatically. Groundwork for everything that comes next.


PR: https://github.com/StevieIsmagic/honest-cam/pull/27

Enjoyed this? Join the newsletter.

New essays and notes straight to your inbox.

Newsletter coming soon — stay tuned.