DEV Community

Cover image for Stop Writing Boilerplate. Ship a Full-Stack App in Minutes with FastAPI + React + Expo
Sreeraj Sreenivasan
Sreeraj Sreenivasan

Posted on

Stop Writing Boilerplate. Ship a Full-Stack App in Minutes with FastAPI + React + Expo

description: Three production-ready templates — FastAPI backend, React 19 web frontend, and Expo mobile app — pre-wired to talk to each other. Auth, Docker, type-safe API clients, RBAC, and CI/CD included. Just clone and ship.
tags: webdev, python, react, reactnative

We've all been there. You have a great app idea. You sit down, open a blank terminal, and immediately lose two days configuring auth, wiring up CORS, generating API clients, setting up Docker, choosing a linting strategy, and arguing with yourself about folder structure. The idea hasn't even started yet.

That setup tax is real, and it compounds across every project.

This post introduces a three-repository boilerplate ecosystem built for the way modern teams actually ship: a FastAPI backend, a React 19 web frontend, and an Expo mobile app — all pre-configured, pre-connected, and ready to clone. Whether you're building a SaaS, a hackathon project, or a production internal tool, this stack gets you to your first meaningful feature commit in under an hour.

Let's break it down.

The Architecture at a Glance 

┌────────────────────────────────────────────────────────────┐
│                    FastAPI Backend                         │
│  PostgreSQL 18 · Alembic · JWT/RBAC · Prometheus · Traefik│
│  https://github.com/mobitrendz/fastapi-backend-template    │
└───────────────────────┬────────────────────────────────────┘
                        │  REST API  (/api/v1)
          ┌─────────────┴──────────────┐
          ▼                            ▼
┌─────────────────────┐    ┌──────────────────────────┐
│  React 19 Frontend  │    │  Expo Mobile App          │
│  Vite · TanStack    │    │  React Native · SDK 54    │
│  shadcn/ui · Zod    │    │  AsyncStorage · TypeScript│
│  mobitrendz/react-  │    │  mobitrendz/expo-mobile-  │
│  frontend-template  │    │  template                 │
└─────────────────────┘    └──────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

All three repos share one source of truth: the OpenAPI schema exported by FastAPI. Both frontends generate their type-safe API clients from that schema with a single command. Change a backend endpoint? Regenerate. TypeScript errors surface immediately. No hand-rolled fetch calls, no runtime surprises.

Why FastAPI + React + Expo?

This trio isn't random. It's opinionated by design:

  • FastAPI is async-native, generates OpenAPI docs automatically, and ships Pydantic validation out of the box. It's the fastest way to build a self-documenting, type-safe REST API in Python.
  • React 19 with TanStack Query makes server state a first-class citizen — no Redux boilerplate, automatic cache invalidation, and optimistic updates with minimal ceremony.
  • Expo lets you target iOS and Android from one TypeScript codebase, using the same API client generation pattern as the web frontend.

The result: one backend schema drives three platforms, and refactoring is a compiler problem, not a grep-and-pray exercise.

Deep Dive: The Three Templates

1. FastAPI Backend Template

Repo: mobitrendz/fastapi-backend-template

This isn't a toy "hello world" FastAPI app. It implements a full Layered Modular Architecture:

Layer What lives here
app/api Versioned route controllers, OpenAPI docs
app/services Business logic, multi-step orchestration
app/crud Atomic, reusable database operations
app/models SQLModel definitions — DB tables and Pydantic DTOs in one
app/core Security, config, observability

Out of the box you get:

  • RBAC with three roles — SUPER, ADMIN, and USER — enforced via FastAPI dependency injection. Protect any route in one line: 
from app.api.deps import AllowAdmin

@router.get("/admin-only")
async def secure_route(current_user: AllowAdmin):
    return {"message": "Hello, Admin!"}
Enter fullscreen mode Exit fullscreen mode
  • Enterprise observability — structured JSON logging via Structlog, real-time metrics via Prometheus, and Sentry integration for error tracking.
  • Rate limiting via SlowAPI and Argon2 password hashing via pwdlib.
  • PostgreSQL 18 with Alembic migrations, psycopg3 binary driver, and full Docker Compose orchestration including pgAdmin and MailCatcher for local development.
  • uv for dependency management — reproducible, lightning-fast installs.
  • Security scanning via Bandit, type-checking via Mypy, formatting via Ruff.
  • Testcontainers + Hypothesis for property-based testing and isolated infra in CI.

The full local stack spins up with one command:

docker compose up --build
Enter fullscreen mode Exit fullscreen mode

Or run the database in Docker while iterating on the API natively:

docker compose up -d db pgadmin mailcatcher
uv run fastapi dev --host 0.0.0.0
Enter fullscreen mode Exit fullscreen mode

Local endpoints after boot:

Service URL
API docs (Swagger) http://localhost:8000/docs
Prometheus metrics http://localhost:8000/metrics
pgAdmin http://localhost:5050
MailCatcher http://localhost:1080
Health check http://localhost:8000/health

2. React 19 Frontend Template

Repo: mobitrendz/react-frontend-template

92.66% test coverage. That's not a vanity metric — the CI pipeline enforces it via GitHub Actions, and a failing coverage gate blocks the merge.

Tech stack highlights:

Concern Tool
Framework React 19 + TypeScript
Build Vite 8
Server state TanStack Query
Routing React Router 7
UI components shadcn/ui + Lucide icons
Styling Tailwind CSS 4
Validation Zod
Testing Vitest + React Testing Library

The frontend ships with a Zod-validated environment schema — the app simply won't start if a required env variable is missing or mistyped. This eliminates an entire class of "works on my machine" bugs:

cp .env.example .env
# VITE_API_URL, VITE_ENV, VITE_ENABLE_ANALYTICS — all validated at startup
Enter fullscreen mode Exit fullscreen mode

API integration uses @hey-api/openapi-ts to generate a fully type-safe SDK from the FastAPI OpenAPI spec. Pair it with TanStack Query and you get declarative data fetching with zero boilerplate:

import { useQuery } from "@tanstack/react-query";
import { readTodosApiV1TodosGet } from "./client/sdk.gen";

const { data, isLoading, error } = useQuery({
  queryKey: ["todos"],
  queryFn: () => readTodosApiV1TodosGet(),
});
Enter fullscreen mode Exit fullscreen mode

What's included out of the box:

  • JWT auth with login/signup, token persistence, and role-based route protection
  • Admin dashboard: user management, status toggling, admin account creation, search and role filtering
  • Task management: inline editing, priority filtering, real-time search
  • Account lifecycle: profile editing, password change, account deletion with password verification
  • Premium dark-mode design system with glassmorphism and Tailwind 4
  • Pre-commit hooks for ESLint, Prettier, and TypeScript type checks before every commit
  • GitHub Actions API sync guardrail: if the backend schema changes without a regenerated SDK, CI fails

3. Expo Mobile Template

Repo: mobitrendz/expo-mobile-template

Built on Expo SDK 54 with React Native 0.81, React 19, and full TypeScript. Targets regular user accounts only — admin and super roles are rejected at sign-in, keeping the mobile surface clean and focused.

Features:

  • Sign in / sign up with JWT stored in AsyncStorage and automatic session restore on launch
  • Full todo/task manager: create, edit, delete, pull-to-refresh, tap to cycle status
  • Task fields: title, description, priority (Low/Medium/High), status (Pending/In Progress/Completed), due date & time
  • Profile screen: edit name/email, change password, delete account, sign out
  • Modal-based create/edit forms throughout

Like the web frontend, API calls are generated from the same openapi.json via @hey-api/openapi-ts:

npm run generate-api
Enter fullscreen mode Exit fullscreen mode

API URL configuration is flexible — app.json, env variable, or automatic fallback:

Environment URL
iOS Simulator http://localhost:8000
Android Emulator http://10.0.2.2:8000
Physical device http://<your-lan-ip>:8000
Production https://your-api.example.com/

Native android/ and ios/ folders are gitignored; generate them on demand:

npx expo prebuild
Enter fullscreen mode Exit fullscreen mode

How They Work Together: The Connection Story

The three repos share one integration contract: openapi.json.

Here's the flow:

  1. Backend starts and exposes http://localhost:8000/openapi.json
  2. Both frontends download this schema and run their code generator:
    • Web: npm run generate-client
    • Mobile: npm run generate-api
  3. Fully typed SDK files appear in src/client/ in both repos
  4. Every API call is now type-checked — wrong argument types or missing fields are compile errors, not runtime crashes

When you change a backend model or add an endpoint, the frontends surface the mismatch immediately. Your TypeScript compiler becomes your integration test.

Quick Start: Get the Whole Stack Running Locally

Prerequisites: Docker, Node.js 22+, uv (Python package manager)

Step 1 — Backend 

git clone https://github.com/mobitrendz/fastapi-backend-template
cd fastapi-backend-template
cp .env.example .env
# Edit .env: set SECRET_KEY, POSTGRES_PASSWORD, SUPER_USER_PASSWORD
docker compose up --build
Enter fullscreen mode Exit fullscreen mode

The API is live at http://localhost:8000. Swagger docs at http://localhost:8000/docs.

Step 2 — Web Frontend 

git clone https://github.com/mobitrendz/react-frontend-template
cd react-frontend-template
npm install
pre-commit install
npm run generate-client   # pulls from localhost:8000/openapi.json
npm run dev               # http://localhost:5173
Enter fullscreen mode Exit fullscreen mode

Step 3 — Mobile App 

git clone https://github.com/mobitrendz/expo-mobile-template
cd expo-mobile-template
npm install
# Set your local IP in app.json → expo.extra.apiUrl
# or: export EXPO_PUBLIC_API_URL=http://<your-lan-ip>:8000
npm run generate-api
npm start
# Press 'a' for Android, 'i' for iOS, or scan QR for Expo Go
Enter fullscreen mode Exit fullscreen mode

That's it. Three terminals, one full-stack cross-platform app with auth, RBAC, observability, and type safety.

What This Stack Is Great For

  • SaaS MVPs — ship web + mobile simultaneously from day one
  • Hackathons — spend your weekend on the actual idea, not the plumbing
  • Internal tools — RBAC and admin dashboard included, no plugins required
  • Learning projects — the architecture is documented, layered, and readable; great reference for production patterns

What's Next on the Roadmap

The backend README is clear: this is active development (beta). Features landing soon include expanded observability integrations, additional auth strategies, and further AI-assisted developer tooling. The architecture is already production-grade — it just keeps getting better.

Conclusion

Full-stack boilerplates are only useful if they don't become a liability. These three templates are designed to stay out of your way: generate, extend, ship.

  • No lock-in — standard FastAPI, standard React, standard Expo
  • No magic — every integration is explicit and readable
  • No cutting corners — Argon2 passwords, RBAC deps, type-safe API clients, 92%+ test coverage

If you're starting your next project this week, don't write the auth layer again.

⭐ Star the repos and fork them for your next build:

Found a bug? Have a feature idea? PRs and issues are open. The contributing guide is in each repo.

Built with FastAPI, React 19, Expo SDK 54, and a deep hatred of repetitive project setup.

Top comments (0)