DEV Community

Florian
Florian

Posted on

Week 4 of 40 – First Full-Stack App with React, TypeScript, and Python

#fullstack #python #showdev #react

Objective of the week

The goal of this week was to take the next real step toward full-stack development.

Until now, everything lived either in a static page or entirely in the frontend. This week I wanted to:

  • Build my first backend API using Python
  • Connect a React + TypeScript frontend to that API
  • Get frontend and backend to talk to each other
  • Learn the basics of working with GitHub Codespaces and the terminal

What I built

I built a small Learning Log application with a clear separation between frontend and backend.

Backend

  • Python + FastAPI
  • Endpoints to:
    • create entries
    • list entries
    • toggle a “favorite” flag
  • Automatic API documentation via Swagger

Swagger UI:

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

Frontend

  • React + TypeScript
  • Fetches data from the backend API
  • Displays entries
  • Allows creating new entries and marking them as favorites

Frontend UI:

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

This is the first project in this challenge where:

  • the frontend depends on a backend,
  • data flows over HTTP,
  • and things break if URLs, ports, or environments are wrong.

What I learned

This week was packed with fundamentals that I had either forgotten or never really learned properly:

  • How to work with the terminal again:
    • navigating folders
    • activating virtual environments
    • running servers
  • The basics of GitHub Codespaces:
    • it’s a real Linux machine in the cloud
    • processes stop when you close it
    • ports must be explicitly exposed
  • How FastAPI works:
    • defining request and response models
    • automatic Swagger documentation
  • How a frontend talks to a backend using:
    • fetch
    • JSON
    • environment variables
  • Why frontend apps need a configurable API base URL

This week made it very clear that modern development is less about syntax and more about understanding the system as a whole.

What was hard / surprising / confusing

Quite a few things 😅 — and that’s exactly why this week mattered.

  • I initially treated things in requirements.txt like terminal commands
  • I repeatedly forgot to activate the Python virtual environment
  • uvicorn: command not found taught me a lot about how environments really work
  • Understanding where my code was running vs where my browser was running took time
  • The concept of forwarded ports in Codespaces was new and unintuitive at first
  • Knowing which URL the frontend should call (and why localhost doesn’t work here) was confusing
  • Forgetting to restart the frontend after changing .env caused a lot of head-scratching

Overall, the hardest part wasn’t coding — it was mental models:

  • what runs where,
  • what talks to what,
  • and what needs to be restarted when something changes.

What I’ll do next week

For Week 5, I want to build on this exact architecture:

  • Keep React + TypeScript on the frontend
  • Keep Python on the backend
  • Add the first “smart” behavior
    • something that processes text
    • analyzes, summarizes, or enriches entries

This will be my first step toward AI-adjacent functionality, built on top of the foundations laid this week.

Week 4 was slower, more frustrating, and more educational than the previous ones — which is probably a good sign.

Top comments (0)