This content originally appeared on DEV Community and was authored by Asutosh Padhi
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.
This content originally appeared on DEV Community and was authored by Asutosh Padhi
Asutosh Padhi | Sciencx (2025-09-30T12:39:48+00:00) Spinning Up a Minimal To-do List API in .NET. Retrieved from https://www.scien.cx/2025/09/30/spinning-up-a-minimal-to-do-list-api-in-net-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.