Environment Setup

Get your development environment ready. You'll need two terminals running throughout this guide — one for FastAPI, one for Next.js.

Prerequisites

Python 3.10+python3 --version
Node.js 18+node --version
npm or yarnnpm --version

1. Create Project Structure

Terminal

1mkdir fullstack-interview && cd fullstack-interview
2mkdir backend frontend

2. Set Up FastAPI Backend

Terminal 1 — Backend

1cd backend
2python3 -m venv venv
3source venv/bin/activate  # On Windows: venv\Scripts\activate
4pip install fastapi uvicorn sqlalchemy

Create a minimal FastAPI app to verify it works:

backend/main.py

1from fastapi import FastAPI
2from fastapi.middleware.cors import CORSMiddleware
3
4app = FastAPI()
5
6# CRITICAL: Without this, your frontend cannot call your backend
7app.add_middleware(
8    CORSMiddleware,
9    allow_origins=["http://localhost:3000"],
10    allow_credentials=True,
11    allow_methods=["*"],
12    allow_headers=["*"],
13)
14
15@app.get("/")
16def read_root():
17    return {"status": "Backend is running!"}

Terminal 1

1uvicorn main:app --reload --port 8000

Checkpoint

Visit http://localhost:8000 — you should see {"status": "Backend is running!"}
Visit http://localhost:8000/docs — you should see the auto-generated API docs.

3. Set Up Next.js Frontend

Open a new terminal (keep the backend running):

Terminal 2 — Frontend

1cd fullstack-interview/frontend
2npx create-next-app@latest . --typescript --tailwind --app --no-eslint
3npm run dev

Checkpoint

Visit http://localhost:3000 — you should see the Next.js welcome page.

4. Verify the Connection

Let's make sure frontend can talk to backend. Replace the contents of your Next.js home page:

frontend/app/page.tsx

1"use client"
2
3import { useEffect, useState } from "react"
4
5export default function Home() {
6  const [status, setStatus] = useState<string>("Loading...")
7
8  useEffect(() => {
9    fetch("http://localhost:8000/")
10      .then(res => res.json())
11      .then(data => setStatus(data.status))
12      .catch(err => setStatus("Error: " + err.message))
13  }, [])
14
15  return (
16    <main className="min-h-screen flex items-center justify-center">
17      <div className="text-center">
18        <h1 className="text-3xl font-bold mb-4">Full-Stack Test</h1>
19        <p className="text-xl">{status}</p>
20      </div>
21    </main>
22  )
23}

Final Checkpoint

Refresh http://localhost:3000. If you see "Backend is running!", your full-stack setup is complete.

Troubleshooting

CORS error in console? — Make sure CORS middleware is added to FastAPI
Connection refused? — Check that uvicorn is running on port 8000
"use client" error? — Make sure the directive is at the very top of the file

Ready to start building?

Your environment is set up. Let's build your first full-stack feature.

Start Project 1