Originally published at turtledev.io

In my previous post , I talked about why I moved from SvelteKit SSR to a Svelte SPA + FastAPI architecture. Today, I want to show you my setup with a simple project.

We'll build a simple todo list app to demonstrate how the frontend and backend communicate, and how to write less and type-safe code by using Orval to auto-generate TypeScript API clients from FastAPI's OpenAPI specs.

Building a production app? Check out FastSvelte - a production-ready FastAPI + SvelteKit starter with authentication, payments, and more built-in.

Project Structure

todo-app/ ├── backend/ # FastAPI Python backend │ ├── main.py # FastAPI app │ ├── models.py # Pydantic models │ └── requirements.txt │ └── frontend/ # SvelteKit SPA ├── src/ │ ├── routes/ # Pages │ └── lib/ # API client & components └── package.json

Enter fullscreen mode

Exit fullscreen mode

Backend: FastAPI Setup

Create a backend directory and set up a virtual environment:

cd backend python3 -m venv .venv source…