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.
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.
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.
Create the project structure:
$ 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
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:
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"}
Want live instruction and hands-on projects? Join the AI bootcamp — 3 days, 5 cities.
Before moving on, confirm understanding of these key concepts: