Express FastAPI Protobuf

Reference architecture for Vue.js, Express, and FastAPI using Protocol Buffers for efficient binary serialization

Vue + Express BFF + FastAPI, with protobuf between the BFF and Python service

This repo is a reference “quote recommender”: Vue 3 talks JSON to an Express backend-for-frontend, which validates input and calls FastAPI with binary Protocol Buffers for the heavy read path. The dataset is a bundled quotes JSON (thousands of rows) with tag filters and pagination; Buf and Make automate proto generation and dev startup as described in the README.

When it is useful

You are learning or demoing how a BFF hides binary APIs from the browser, you want a working Buf + Node + Python codegen loop, or you need a concrete microservice shape to adapt. You bring Node, Python, uv, Buf, and local tooling from the project docs.

What you can do

  • Run make setup and make start to bring up frontend, BFF, and API with hot reload where configured.
  • Inspect shared .proto definitions and generated stubs for JavaScript and Python.
  • Compare payload size using the documented JSON vs protobuf example in the repository (figures are illustrative for that sample, not a universal guarantee).

Limits

  • Security, auth, and tenancy are not production-complete; treat as a reference, not a hardened edge deployment.
  • Operational ports and URLs belong in config files listed in the README; adjust before any shared environment.
  • Throughput and savings depend on schema, compression, and HTTP stacks; measure your own services for real decisions.

Frequently asked questions

What architecture does Quote Recommender show?

Vue 3 talks JSON/HTTP to an Express BFF, which validates input and calls FastAPI with binary Protocol Buffers. The dataset is a bundled quotes JSON (thousands of rows) with tag filters and pagination.

How do I start the stack?

Install Node 18+, Python 3.10+, uv, Buf, and Make, then run make setup and make start. Defaults are FastAPI on 8000, Express on 3000, and Vue/Vite on 5173.

How is protobuf codegen handled?

Shared .proto definitions live under backend/common/proto. Buf and Make automate generation of JavaScript and Python stubs (make proto, make proto-lint, make proto-breaking).

Do the payload-size figures apply to every API?

No. The README’s JSON vs protobuf example is illustrative for that sample (about 30-60% smaller in the docs’ examples). Throughput and savings depend on schema, compression, and your HTTP stack; measure your own services.

Continue exploring