[AI Dev Tools]

Course

ai-dev-tools-zoomcamp

Question

When building the frontend-first full-stack application in Module 2, why should the frontend's API/service layer be used to define an OpenAPI contract before implementing the FastAPI backend?

Answer

The OpenAPI contract acts as the explicit agreement between the frontend and backend.

When the frontend is built first with a centralized service layer, the API requirements are already visible: endpoints, HTTP methods, request bodies, response bodies, and authentication requirements. Converting these requirements into openapi.yaml gives the backend a precise target instead of requiring the coding agent to infer the API from frontend code.

This makes the frontend and backend independently implementable while keeping their interface stable. It also reduces ambiguity and helps catch mismatches before the real backend is connected.

A typical workflow in Module 2 is:

1. Build the interactive frontend with mocked backend calls.
2. Centralize all backend calls in a frontend service layer.
3. Generate an OpenAPI contract from that service layer.
4. Implement the FastAPI backend against the contract.
5. Replace the mocked service with the real backend client.

The contract is therefore not just documentation; it is the shared interface that allows the frontend and backend to evolve independently without guessing each other's requirements.

Checklist

• I have searched existing FAQs and this question is not already answered
• The answer provides accurate, helpful information
• I have included any relevant code examples or links

Start by reviewing existing FAQ entries in the DataTalksClub/faq repository and the ai-dev-tools-zoomcamp Module 2 material. Add this question and its explanation about using an OpenAPI contract between the frontend service layer and FastAPI backend. Done means the FAQ entry is placed consistently with existing content and clearly explains the five-step workflow.