Status Alganize

A full-stack application built on the Vue and FastAPI combination I keep returning to. It is the cleanest instance of a pattern the other projects here are variations on, which is why it works as the reference.

The stack

• Frontend: Vue 3 with Vite, Pinia for state, Vuetify for components, and a generated API client.
• Backend: FastAPI with SQLModel, Pydantic, and Alembic for migrations.
• Data and access: PostgreSQL with JWT authentication.
• Deployment: Docker Compose behind Traefik.

The one decision that carries the rest

The frontend API client is generated from the backend’s OpenAPI schema rather than written by hand. FastAPI derives that schema from the Pydantic models the endpoints already use, so the types the backend validates against and the types the frontend consumes come from the same source by construction.

The payoff is in what stops happening. Renaming a field or making one optional produces a frontend type error at build time instead of a runtime failure in a component nobody exercised. The class of bug where frontend and backend disagree about a contract — the most common failure mode in split applications, and the most tedious to debug — largely disappears, because there is no second copy of the contract to drift.

Client generation covers the mechanics.

What I would keep

• Generated clients over hand-written ones, without hesitation. The setup cost is an afternoon and it pays back within the first schema change.
• Alembic migrations from the start rather than retrofitted. Retrofitting migrations onto a database that has been hand-modified is genuinely unpleasant.
• One proxy boundary for frontend and API traffic. It keeps CORS configuration trivial and means TLS is handled in exactly one place.

What is worth being honest about

Generation couples the frontend build to the backend schema. A stale generated client is worse than no generated client, because it is confidently wrong, so the generation step has to be part of the build rather than something run manually. Getting that wrong once is how you learn it.

The stack is also heavy for a small application. A simpler frontend project and a content site cover the cases where this much machinery is not warranted.

See also: FastAPI, Vue 3, Study Duel for the realtime extension of this pattern, and the web architecture map.