Yes, while Full Stack City is in early access.

Do I need to know Python?

No. If you know JavaScript, the Academy briefing covers the Python you need in about six minutes. Complete beginners can start there too.

Is it real FastAPI or a simulation?

Real. Your snippet runs inside actual FastAPI and Pydantic, compiled to WebAssembly (Pyodide) in your browser. Checkpoints are re-graded on our server with hidden tests.

What's playable today?

Four districts plus the Academy: the Signal Tower (HTTP), the Router Station (routing), the Gatehouse (validation) and the Data Vaults (SQL), each with a briefing, practice games and a scored checkpoint. The Academy teaches the Python you need. The other five districts are under construction.

Does it work on mobile?

Lessons and the map do. The coding games are best on a laptop or desktop.

Where is my progress saved?

On our server, tied to your account, so it follows you to any device you sign in on.

Is this the same as Backend City?

Yes. Full Stack City was called Backend City until September 2026. The Backend District is the same course, and the frontend and full stack sides are being built.

FULL STACK CITY

Powering up the grid

GET /city.bundle.js…
BUILD towers + streetsqueued
COMPILE shadersqueued
RENDER first framequeued

Your code runs the city.

Full Stack City: the glass on top is the frontend, the steel inside is the backend. Start underneath: write a few lines inside a real FastAPI server and watch live traffic pass, bounce, or crash it.

Start your first shift Fly through the city

req: request in flight
2xx: 0served
4xx: 0bounced at the gate
5xx: 0server crashed

The surface · Frontend District

Coming soon

Everything users see.

This whole skyline is the frontend: every window is an interface someone taps, reads or scrolls. The Frontend District teaches you to build it. It opens soon; take the tour.

Frontend District · HTML

Coming soon

Every building starts as structure.

Blocks, floors and doors before any paint. HTML is that structure: headings, sections, forms and buttons, nested like buildings on a street.

<header>
<main>
<form>
<button>

Frontend District · CSS

Coming soon

Then paint, glass and light.

Watch the windows come on. CSS decides color, spacing, layout and motion: why one street feels calm and the next one glows.

flexbox & grid
color & type
responsive

Frontend District · JavaScript

Coming soon

JavaScript makes it move.

Traffic, signals and lights that react when you click. JavaScript listens to people and changes the page, and it is what calls fetch() to talk to the buildings' insides.

events
the DOM
fetch()

Frontend District · components & state

Coming soon

Build once, reuse everywhere.

From up here the city repeats itself: the same towers, the same windows, lit or dark. Components are those reusable pieces; state is which lights are on right now.

components
props
state

Under the glass · Backend District

Playable now

Now look inside a building.

Every page is held up by things nobody sees. Peel the glass away and there it is: the structure that serves every window. This is the backend, and it is open today.

servers
requests
rules
data

The steel frame · FastAPI

Playable now

A frame that carries the load.

Columns and beams take every request's weight so your code doesn't have to. That frame is the framework: FastAPI, the one you write inside in every game.

routes
requests in
responses out

The brick core · The Academy

Playable now

Brick by brick: Python.

Up close, the core is made of small, plain bricks. Coming from JavaScript? The Academy translates what you know (variables, objects, functions, classes, async) into Python.

dicts are objects
indentation is braces
async def = async function

Ground floor · The Gatehouse

Playable now

Nobody passes the door unchecked.

Every request walks in through the lobby. You write the rules at the checkpoint: good requests go up, bad ones bounce with 422. Edit two lines and watch.

signup.py · try it

class SignupRequest(BaseModel):

age: int = Field(ge=, le=120)

age 5422
age 12422
age 13201
age 25201
age 120201
age 121422

Floor 1 · The Router Station

Playable now

The junction room.

Upstairs, a switchboard sends each request to the function that answers it. Paths, typed parameters, query strings, and why the order of your routes matters.

/trains/{id}
?line=red&limit=5
fixed paths first

Floor 2 · The Signal Tower

Playable now

Where the wiring runs.

Racks, trays and a riser to the roof antenna: every cable carries HTTP. Methods, headers, bodies and status codes, the language fetch() has been speaking all along.

GET · POST · PATCH · DELETE
2xx · 4xx · 5xx
every request stands alone

Floor 3 · The Data Vaults

Playable now

Ask the vault the right question.

Shelves of records behind a vault door. Write the SQL your handlers run: filter, sort, join, and never let a quote mark open the vault. SQLAlchemy and the N+1 problem come next, then the Citadel (auth) above.

SELECT · WHERE
JOIN
? parameters
SQL injection

The roof

Under construction

The building is still going up.

Caching, queues, production and architecture are the floors under the crane. Each one opens with a briefing, practice games and a checkpoint.

Speedway
Factory
Control Room
Skyline

Back outside · Full stack

Coming soon

Both sides, wired together.

The glass closes over the frame, but now you can see the lines: every window is wired to the structure inside. Full stack is both ends at once, the screen someone taps and the server that answers it.

fetch() → route
form → validation
state ↔ database

Full Stack City

Choose your side of the city.

The surface, the structure, or both wired together. The Backend District is open now; the others are being built.

Coming soon
Frontend District
The surface everyone sees
Glass, light and signs: build the pages, components and interactions people touch.
- HTML & CSS
- JavaScript
- components
- state
Notify me
Open now
Backend District
The steel inside the buildings
Requests, routing, validation, data and auth. Write real FastAPI code and watch live traffic hit it.
- HTTP
- routing
- validation
- databases
Start in the Backend District
Coming soon
Full Stack Path
Both sides, wired together
Take one feature from the button a user clicks all the way down to the database and back.
- fetch ↔ API
- auth end to end
- deploys
Notify me

You know this end. Now learn the other one.

Every lesson in the Backend District starts from something you already write in the browser, and follows the request to the server that answers it.

Send a signup with

Your frontendsignup.ts

1const res = await fetch("/api/signup", {
2  method: "POST",
3  body: JSON.stringify({ username: "neo", age: 5 }),
4});
5res.status; // …

Your server (you'll write this)signup.py

1class SignupRequest(BaseModel):
2    username: str = Field(min_length=3)
3    age: int = Field(ge=13, le=120)
4 
5@app.post("/signup", status_code=201)
6async def signup(body: SignupRequest):
7    return {"welcome": body.username}

Real FastAPI
Actual Python and Pydantic running in your browser through WebAssembly. No install.
Learn, practice, prove
A short briefing, unlimited practice, then a checkpoint with hidden requests.
A tutor, not an answer key
Byte gives tiered hints. It never hands you the solution during a checkpoint.

GET /faq

Questions before your first shift

Ask the city. Every answer here is true today, not a roadmap promise.

city.log

GET /faq/is-it-free200 OK

200 OKapplication/answer
Yes, while Full Stack City is in early access.

The city is dark.

Your shift starts now.

Free while in early access. Everything runs in your browser, so the first briefing loads before your coffee does.

Start your first shift

districts open: 4
quick checks in briefings: 26
checkpoints with hidden requests: 5
installs needed: 0

Your code runs the city.

Everything users see.

Every building starts as structure.

Then paint, glass and light.

JavaScript makes it move.

Build once, reuse everywhere.

Now look inside a building.

A frame that carries the load.

Brick by brick: Python.

Nobody passes the door unchecked.

The junction room.

Where the wiring runs.

Ask the vault the right question.

The building is still going up.

Both sides, wired together.

Choose your side of the city.

Frontend District

Backend District

Full Stack Path

You know this end. Now learn the other one.

Questions before your first shift

The city is dark.

Your shift starts now.