Asutosh Padhi

Posted on Sep 30

Spinning Up a Minimal To-do List API in .NET

#webdev #dotnet #api #react

As a JavaScript developer, I’ve always worked with React + NodeJS, but I recently decided to dive into .NET to understand how to build a strong backend. In this post, I’ll walk through creating a minimal To-do List API using ASP.NET Core, and how to connect it to a React frontend.
This tutorial is beginner-friendly and assumes you know React but are new to C# and .NET.

Step 1: Setting Up the Project

First, make sure you have the .NET SDK installed. You can check:

dotnet --version

Then, create a new project:

dotnet new web -o TodoListBackend
cd TodoListBackend

web → minimal API template.
TodoListBackend → project folder.

Step 2: Understanding the Project Structure

Program.cs → the main entry point for your backend. All routes and configuration live here in a minimal API.
launchSettings.json → defines which ports the server runs on.

By default, .NET listens on:

HTTP → http://localhost:5000
HTTPS → https://localhost:5001

But you can check or change your PORT numbers by navigating to TodoListBackend → Properties → launchSettings.json

For local development, it’s easiest to stick to HTTP to avoid SSL headaches.

Step 3: Adding a Minimal Todo Endpoint

Open Program.cs and replace the content with the following:

var builder = WebApplication.CreateBuilder(args);

// Enable CORS so React can talk to this API
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.WithOrigins("http://localhost:3000") // React dev server
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

var app = builder.Build();

// Apply CORS middleware
app.UseCors();

// Simple "ping" endpoint to confirm server is running
app.MapGet("/", () => "Server is running!");

// Minimal Todo List endpoint
app.MapGet("/api/tasks", () => new[] { "Clean", "Cook", "Study", "Get a job" });

// Start the server
app.Run();

Key Points:

MapGet → defines a GET endpoint.
CORS must be applied before routes so the browser can make requests.
Returning an array in C# automatically gets converted to JSON.

Step 4: Running the Backend

dotnet run

You should see something like:

Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

Test it in your browser:

http://localhost:5000/
http://localhost:5000/api/tasks

You should see:

["Clean","Cook","Study","Get a job"]

Step 5: Connect React to Your API

In your React app:

import { useEffect, useState } from "react";

function App() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch("http://localhost:5000/api/tasks")
      .then(res => res.json())
      .then(data => setTasks(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      <h1>My Todo List</h1>
      <ul>
        {tasks.map((task, i) => <li key={i}>{task}</li>)}
      </ul>
    </div>
  );
}

export default App;

Make sure the fetch URL matches your backend port.
React doesn’t care whether the backend is Node or .NET — it just fetches JSON.

Step 6: Optional Enhancements

1. Hot Reload for Backend

dotnet watch run

Detects changes in C# files and reloads automatically (like nodemon in Node).

2. Logging server start

var logger = app.Services.GetRequiredService<ILogger<Program>>();
logger.LogInformation("🚀 Server is up at http://localhost:5000");

3. Returning structured JSON

app.MapGet("/api/tasks", () => new { tasks = new[] { "Clean", "Cook" } });

Makes the API more standard and easier to consume.

Step 7: Tips for Writing Your First .NET API

Strong typing matters: C# enforces variable types — fewer runtime errors.
Middleware order matters: CORS → Logging → Routes.
Test your API in Postman or browser first before connecting React.

✅ Conclusion

Congratulations! You now have a minimal Todo List API in .NET running locally and feeding a React frontend.

Next steps:

Connect a MySQL or SQL Server database.
Implement POST, PUT, DELETE endpoints for full CRUD.
Add authentication or more complex business logic.

DEV Community