Architecture Overview

Before diving in, understand the architecture you'll be building. This is a decoupled full-stack setup where Next.js handles the frontend and FastAPI handles the backend as separate services.

┌─────────────────────────────────────────────────────────────────┐
│                         YOUR BROWSER                            │
│                    (http://localhost:3000)                      │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                      NEXT.JS FRONTEND                           │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐  │
│  │   Pages     │  │ Components  │  │  Client-side State      │  │
│  │  (Routes)   │  │    (UI)     │  │  (useState, useEffect)  │  │
│  └─────────────┘  └─────────────┘  └─────────────────────────┘  │
│                         Port 3000                               │
└─────────────────────────────────────────────────────────────────┘
                                │
                      HTTP API Calls (fetch)
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                      FASTAPI BACKEND                            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐  │
│  │  Endpoints  │  │   Models    │  │     Business Logic      │  │
│  │  (Routes)   │  │  (Pydantic) │  │   (Your Python Code)    │  │
│  └─────────────┘  └─────────────┘  └─────────────────────────┘  │
│                         Port 8000                               │
└─────────────────────────────────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                        DATABASE                                 │
│                 (SQLite / PostgreSQL / etc.)                    │
└─────────────────────────────────────────────────────────────────┘

Interview Must-Knows

Why separate frontend and backend?

Scalability — Each service can scale independently. Team separation — Frontend and backend teams work in parallel. Independent deployment — Update one without touching the other. Multiple clients — Web, mobile, CLI can all share the same API.

What is CORS?

Cross-Origin Resource Sharing. Browsers block requests from one origin (localhost:3000) to another (localhost:8000) unless the server explicitly allows it. FastAPI needs CORS middleware to permit your frontend to call it. This is the #1 reason full-stack apps fail to connect.

Why FastAPI over Flask?

  • Automatic OpenAPI docs at /docs
  • Async support for better performance
  • Type validation via Pydantic models
  • Modern Python with type hints

The Request Cycle

Here's what happens when a user clicks "Save Task":

  1. 1User clicks button → onClick handler fires
  2. 2React calls fetch('http://localhost:8000/api/tasks', { method: 'POST', body: JSON.stringify(task) })
  3. 3Browser sends HTTP request to FastAPI server
  4. 4FastAPI validates the request body with Pydantic
  5. 5Your Python code runs (save to database)
  6. 6FastAPI returns JSON response
  7. 7React receives response, updates state
  8. 8Component re-renders with new data

Key Files You'll Create

Frontend (Next.js)

app/
  page.tsx          # Home page
  layout.tsx        # Shared layout
  components/
    TaskList.tsx    # Reusable components
    TaskForm.tsx

Backend (FastAPI)

backend/
  main.py           # FastAPI app & routes
  database.py       # SQLAlchemy setup
  models.py         # Pydantic schemas
  tasks.db          # SQLite database