Week 4/40 — First Full-Stack App (React + TS + FastAPI)

Tech stack (this week)

• Frontend: React + TypeScript (Vite)

• Backend: Python + FastAPI (Swagger docs)

• Dev environment: GitHub Codespaces

• Data: in-memory for now (next week adds persistence)

New topic: frontend ↔ backend integration + environment variables + ports.

Why this week?

This was the “real step”: separate frontend + backend, talk over HTTP, and learn how modern dev environments actually run.

What I shipped

A “Learning Log”:

• Create entries

• List entries

• Toggle a favorite flag

• Frontend fetches data from the backend API

Swagger (copy/paste):

https://orange-disco-pj4g9w4w46prh96pw-8000.app.github.dev/docs

Frontend (copy/paste):

https://orange-disco-pj4g9w4w46prh96pw-5173.app.github.dev/

The One Feature Rule

One feature: full-stack “create + list + favorite” with a clean API boundary.
Not doing: auth, database, UI polish.

What broke / surprised me

The hardest part wasn’t code — it was mental models (what runs where, what needs a restart, why localhost isn’t what you think in Codespaces).

Follow along (code it yourself): This week’s task

Task: Build a tiny full-stack app with one real API boundary.

1. Backend: create a FastAPI app with:

   • GET /entries → returns a list

   • POST /entries → creates a new entry

2. Frontend: create a React+TS app that:

   • fetches and displays entries

   • posts a new entry from a form

3. Verify everything works by checking:

   • Swagger docs open

   • frontend page loads

   • creating an entry updates the list

Success criteria: You can create an entry in the UI and immediately see it in the list.

Extra help & hints

• Biggest mental model: frontend and backend are two separate servers.

• If frontend can’t reach backend, your first check is: is VITE_API_BASE correct and did you restart the frontend?

• Ports reminder (common): backend 8000, frontend 5173.