Courses Curriculum Cities Blog Enroll Now
Project Architecture and Tech Stack · Day 1 of 5 ~35 minutes

Day 1: Project Architecture and Tech Stack

Before writing a line of code, understand the full-stack architecture. Learn what each layer does, how they communicate, and why this specific stack works well for AI applications.

1
Day 1
2
Day 2
3
Day 3
4
Day 4
5
Day 5
What You'll Build

A complete architecture diagram in your head (and on paper): React frontend, FastAPI backend, PostgreSQL database, and Claude AI — and a working project scaffold with all dependencies installed.

1
Section 1 · 10 min

The Full-Stack AI Architecture

A full-stack AI app has four layers. Each has a job. Understanding the boundaries between them prevents the most common architectural mistakes.

textApp Architecture
Frontend (React)
  → What users see and interact with
  → Sends API requests, displays responses
  → Never talks to the database or AI directly

Backend API (FastAPI)
  → Receives requests from frontend
  → Validates input, applies business logic
  → Talks to database and AI
  → Returns structured JSON responses

Database (PostgreSQL)
  → Stores persistent data: users, history, results
  → Only the backend talks to it directly
  → The source of truth

AI (Claude API)
  → Processes requests from the backend
  → Returns text or structured output
  → Never called from the frontend (API key exposure)

Never call AI APIs from the frontend. Your API key would be visible in browser developer tools. Always route AI calls through your backend.

2
Section 2 · 10 min

Project Setup

Create the project structure:

bash
$ mkdir ai-app && cd ai-app

# Backend
$ mkdir backend && cd backend
$ python -m venv venv && source venv/bin/activate
$ pip install fastapi uvicorn anthropic sqlalchemy psycopg2-binary python-dotenv pydantic
$ pip freeze > requirements.txt

# Frontend (in new terminal)
$ cd ..
$ npx create-react-app frontend
$ cd frontend && npm install axios
3
Section 3 · 15 min

Project: AI Document Analyzer

We'll build one app across all five days: an AI Document Analyzer. Users paste or upload text, the app analyzes it with Claude, stores the results, and displays them with history.

Day 1: Architecture + setup (today)
Day 2: FastAPI backend with AI endpoint
Day 3: React frontend with API calls
Day 4: Database integration (user history)
Day 5: Polish and deploy

Create the backend skeleton:

pythonbackend/main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(title="AI Document Analyzer")

# Allow React frontend to call this API
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"]
)

@app.get("/")
def health():
    return {"status": "ok"}

What You Learned Today

  • The four layers of a full-stack AI app and why they're separated
  • Why AI APIs must never be called from the frontend
  • The CORS middleware and why React apps need it to call a backend
  • The project you'll build: AI Document Analyzer across 5 days
Your Challenge

Go Further on Your Own

  • Draw the architecture diagram on paper: boxes for frontend, backend, database, AI — and arrows showing what calls what
  • Research: what alternatives exist to each piece of this stack? (Vue instead of React, Django instead of FastAPI, MySQL instead of PostgreSQL)
  • Set up the full project structure and verify both the backend and frontend start without errors
Day 1 Complete

Nice work. Keep going.

Day 2 is ready when you are.

Continue to Day 2
Course Overview Day 2 →
Course Progress
20%

Want live instruction and hands-on projects? Join the AI bootcamp — 3 days, 5 cities.

Finished this lesson?