, ,

/

October 29, 2025

Develop a To-Do App in Python with FastAPI and CRUD

Develop a To-Do App in Python

FastAPI is one of the fastest and easiest Python frameworks for building APIs. If you’re new to it, learning basic CRUD (Create, Read, Update, Delete) operations is a great place to start.

In this blog, we’ll show you how to build a simple To-Do App using FastAPI, step by step and connect it to a basic frontend.

Let’s dive in!

What is FastAPI?

FastAPI is a lightweight and high-performance web framework built on Python 3.7+ with support for async/await.

Key Features:

  • Super fast performance (built on Starlette and Pydantic)
  • Automatic API documentation with Swagger UI and ReDoc
  • Easy validation with Pydantic models
  • Beginner-friendly and widely used in production

What is CRUD in FastAPI?

CRUD stands for:

  • Create → Add new records
  • Read → Retrieve records
  • Update → Modify existing records
  • Delete → Remove records

For our To-Do App, we will implement these four operations.

Step 1: Install FastAPI and Uvicorn

pip install fastapi uvicorn

Step 2: Create FastAPI App (main.py)

from fastapi import FastAPI, HTTPExceptionfrom pydantic import BaseModel
app = FastAPI()
# Data modelclass Task(BaseModel):    title: str    description: str
# Temporary storagetasks = []task_id_counter = 1
# Create@app.post(“/tasks/”)def create_task(task: Task):    global task_id_counter    new_task = {“id”: task_id_counter, “title”: task.title, “description”: task.description}    tasks.append(new_task)    task_id_counter += 1    return new_task
# Read all@app.get(“/tasks/”)def get_tasks():    return tasks
# Update@app.put(“/tasks/{task_id}”)def update_task(task_id: int, updated_task: Task):    for task in tasks:        if task[“id”] == task_id:            task[“title”] = updated_task.title            task[“description”] = updated_task.description            return task    raise HTTPException(status_code=404, detail=”Task not found”)
# Delete@app.delete(“/tasks/{task_id}”)def delete_task(task_id: int):    for task in tasks:        if task[“id”] == task_id:            tasks.remove(task)            return {“message”: “Task deleted successfully”}    raise HTTPException(status_code=404, detail=”Task not found”)

Run the server with:

uvicorn main:app –reload

Now, open your browser at:

Step 3: Connect with a Simple Frontend (index.html):

<!DOCTYPE html><html><head>    <title>FastAPI To-Do App</title></head><body>    <h1>To-Do List</h1>    <input type=”text” id=”title” placeholder=”Task title”>    <input type=”text” id=”description” placeholder=”Task description”>    <button onclick=”addTask()”>Add Task</button>
    <h2>Tasks</h2>    <ul id=”taskList”></ul>
    <script>        async function fetchTasks() {            const res = await fetch(“http://127.0.0.1:8000/tasks/”);            const data = await res.json();            const list = document.getElementById(“taskList”);            list.innerHTML = “”;            data.forEach(task => {                const li = document.createElement(“li”);                li.innerText = `${task.id}: ${task.title} – ${task.description}`;                list.appendChild(li);            });        }
        async function addTask() {            const title = document.getElementById(“title”).value;            const description = document.getElementById(“description”).value;
            await fetch(“http://127.0.0.1:8000/tasks/”, {                method: “POST”,                headers: {“Content-Type”: “application/json”},                body: JSON.stringify({title, description})            });
            fetchTasks();        }
        fetchTasks();    </script></body></html>

Serve index.html over HTTP (don’t open file:// directly):

python -m http.server 5500

Open http://127.0.0.1:5500

FastAPI makes building APIs with full CRUD functionality quick and easy. In this tutorial, we created a simple To-Do List app using FastAPI and basic CRUD operations. By adding a simple frontend, you can turn it into a complete, functional app, fast and efficiently.

From the same category