How to Build a Simple Todo App Using Cursor in Under 2 Hours
How to Build a Simple Todo App Using Cursor in Under 2 Hours
If you're a beginner looking to dip your toes into coding, you might feel overwhelmed by the myriad of tools and frameworks out there. But what if I told you that you could build a functional Todo app in under two hours using Cursor, an AI-powered coding tool? In 2026, Cursor has made significant strides in simplifying the coding process, making it a great choice for indie hackers and side project builders.
Prerequisites
Before we dive into building the app, here’s what you’ll need:
- Cursor: Sign up for a free account to get started (basic features available).
- Basic understanding of JavaScript: This will help you grasp the concepts quicker.
- Node.js: Make sure you have Node.js installed on your machine to run the app locally.
Step 1: Set Up Your Environment
First, create a new directory for your project:
mkdir todo-app
cd todo-app
Then, initialize a new Node.js project:
npm init -y
Next, install the necessary dependencies:
npm install express body-parser cors
Expected Output: You should see a package.json file and a node_modules directory created.
Step 2: Create Your Server
In your project directory, create a new file called server.js. This will be the backbone of your Todo app. Here’s a simple server setup using Express:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
let todos = []; // This will act as our database
app.get('/todos', (req, res) => {
res.json(todos);
});
app.post('/todos', (req, res) => {
const todo = { id: todos.length + 1, text: req.body.text };
todos.push(todo);
res.json(todo);
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Expected Output: When you run node server.js, you should see a message indicating the server is running.
Step 3: Build the Frontend
Now, create an index.html file in your project directory. Here’s a simple HTML structure with a bit of JavaScript to fetch and display your todos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todo-input" placeholder="Add a new todo">
<button onclick="addTodo()">Add Todo</button>
<ul id="todo-list"></ul>
<script>
async function fetchTodos() {
const response = await fetch('http://localhost:3000/todos');
const todos = await response.json();
const todoList = document.getElementById('todo-list');
todoList.innerHTML = '';
todos.forEach(todo => {
const li = document.createElement('li');
li.textContent = todo.text;
todoList.appendChild(li);
});
}
async function addTodo() {
const input = document.getElementById('todo-input');
const response = await fetch('http://localhost:3000/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: input.value }),
});
input.value = '';
fetchTodos();
}
fetchTodos();
</script>
</body>
</html>
Expected Output: Open index.html in your browser, and you should see your Todo app where you can add and view todos.
Troubleshooting
- CORS Issues: If you run into CORS errors, ensure CORS is enabled in your server setup.
- Server Not Running: Double-check that your server is running and listening on the correct port.
What’s Next?
Once you have your Todo app up and running, consider expanding its functionality. Here are a few ideas:
- Add a Delete Functionality: Allow users to remove todos.
- Persist Data: Use a database like MongoDB to save todos instead of keeping them in memory.
- User Authentication: Make it a personal todo list by adding user accounts.
Conclusion
Building a simple Todo app with Cursor doesn’t have to be daunting. With just two hours, you can create a functional app that lays the groundwork for more advanced projects. Start with this basic setup, and as you get comfortable, enhance it with more features.
If you're looking for a straightforward way to start coding and building, Cursor is a solid choice to consider.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.