ysskrishna logoysskrishna

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

ProductExpress FastAPI Performance Test

Express FastAPI Performance Test

FastAPI vs Express: Performance Benchmark with Artillery
Backend & APIs
Experimental Projects
Artillery
FastAPI
ProductFastapi Sync Async Starter Template

Fastapi Sync Async Starter Template

Free FastAPI Poetry template with SQLAlchemy 2.0 sync (psycopg2) and async (asyncpg) Postgres, Redis rate limits, pytest coverage, and Docker Compose.
Backend & APIs
Starter Kits & Boilerplates
FastAPI
PostgreSQL
BlogCover image for How Microservices Verify JWTs Without Calling the Auth Service

How Microservices Verify JWTs Without Calling the Auth Service

Auth & Security
Backend & APIs
+1
8 min read
ProductFastAPI UV vs Requirements File

FastAPI UV vs Requirements File

FastAPI Docker: UV vs Requirements for speed
DevOps & Infrastructure
Backend & APIs
Starter Kits & Boilerplates
FastAPI
ProductFastAPI Nextjs Clerk Starter

FastAPI Nextjs Clerk Starter

FastAPI + Nextjs app with Clerk authentication.
Auth & Security
Backend & APIs
Starter Kits & Boilerplates
FastAPI
ProductFastAPI RabbitMQ Celery Flower Starter

FastAPI RabbitMQ Celery Flower Starter

FastAPI + Celery + RabbitMQ sample that queues SMS (Twilio) and email (Brevo) with Flower monitoring.
Backend & APIs
Starter Kits & Boilerplates
FastAPI
RabbitMQ