How a Frontend Talks to Python: JSON, APIs, and FastAPI

This is a short explainer, not a full API tutorial. The basic pattern is simple: the frontend sends JSON, Python receives it, and Python returns JSON.

This is the same basic shape we would use if a web interface needed to send a word to a Python service for analysis, such as a finite-state transducer or other language tool.

The Basic Flow

Frontend
  ↓ sends JSON
FastAPI
  ↓ runs Python logic
Returns JSON
  ↓
Frontend updates the page

1. The Frontend Sends JSON

The frontend might send a word like this:

{
  "word": "anishinaabe"
}

In JavaScript, that request could look like this:

fetch("/analyze", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    word: "anishinaabe"
  })
});

2. FastAPI Receives It

On the Python side, FastAPI defines an endpoint that listens for that request.

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class AnalyzeRequest(BaseModel):
    word: str

@app.post("/analyze")
def analyze(request: AnalyzeRequest):
    return {
        "word": request.word,
        "analysis": "anishinaab + e",
        "valid": True
    }

FastAPI reads the incoming JSON and turns it into a Python object. In this example, request.word contains the word sent by the frontend.

3. Python Returns JSON

The Python function returns a dictionary:

{
  "word": "anishinaabe",
  "analysis": "anishinaab + e",
  "valid": true
}

FastAPI automatically converts that Python dictionary into JSON and sends it back to the frontend.

The Mental Model

The frontend and backend do not share variables directly. They communicate by passing messages over HTTP. JSON is the message format.

So the simplest mental model is:

Frontend asks a question in JSON. Python answers in JSON.

The Real Design Question

Once the basic API pattern is understood, the practical question becomes: what information needs to travel between the frontend and the Python backend?

The frontend should only send the data Python needs to do its job. For example, if the backend is analyzing a word, the frontend might send the word itself, the requested operation, and possibly a dialect or language setting.

{
  "input": "anishinaabe",
  "mode": "analyze",
  "dialect": "rama"
}

The Python backend should return the information the frontend needs in order to display a useful result.

{
  "input": "anishinaabe",
  "valid": true,
  "analysis": "anishinaab + e",
  "gloss": "person / Ojibwe person",
  "notes": []
}