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

Source: Dev.to

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

Frontend

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

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:

• Terminal basics: navigating folders, activating virtual environments, running servers
• GitHub Codespaces basics: 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

Overall, 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 entries 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

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.