How to Use Cursor to Code a Simple App in Under 2 Hours
How to Use Cursor to Code a Simple App in Under 2 Hours
As a solo founder or indie hacker, finding efficient ways to build apps is crucial. The thought of coding can be intimidating, especially if you're not a seasoned developer. But what if I told you that you could build a simple app in under 2 hours using the AI coding tool, Cursor? In 2026, Cursor has become a popular choice for beginners looking to simplify the coding process.
What is Cursor?
Cursor is an AI-powered coding assistant that helps you write code faster and with fewer errors. It provides real-time suggestions, explanations, and even debugging help, which is perfect for beginners who may struggle with syntax or logic.
Pricing Breakdown
Cursor offers multiple pricing tiers:
| Plan | Monthly Cost | Best For | Limitations | |-----------------|---------------------|---------------------------------|-------------------------------------| | Free | $0 | Casual users, beginners | Limited features, no project history | | Pro | $19/mo | Serious learners, small projects | Some advanced features locked | | Team | $49/mo/user | Teams collaborating on projects | More expensive, requires multiple users |
In our experience, the Pro plan is a solid investment for serious coding practice without breaking the bank.
Prerequisites
Before diving in, make sure you have the following:
- A computer with internet access
- A free or paid account on Cursor
- Basic understanding of programming concepts (variables, functions, etc.)
Step-by-Step: Building a Simple To-Do App
1. Set Up Your Environment
- Time Estimate: 10 minutes
- Expected Output: A working coding environment ready for your app.
Once you sign up for Cursor, create a new project. You can choose a simple HTML/CSS/JavaScript template to get started.
2. Define Your App's Structure
- Time Estimate: 20 minutes
- Expected Output: Basic HTML structure of your To-Do app.
Start by defining the main components of your app in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addButton">Add Task</button>
<ul id="taskList"></ul>
<script src="app.js"></script>
</body>
</html>
Cursor can assist you in writing this code efficiently.
3. Add Functionality with JavaScript
- Time Estimate: 30 minutes
- Expected Output: Basic functionality to add and display tasks.
Here’s a simple JavaScript code snippet to make your app functional:
document.getElementById('addButton').addEventListener('click', function() {
const taskInput = document.getElementById('taskInput');
const newTask = taskInput.value;
if (newTask) {
const taskList = document.getElementById('taskList');
const listItem = document.createElement('li');
listItem.textContent = newTask;
taskList.appendChild(listItem);
taskInput.value = '';
}
});
Cursor will help you debug any errors in real-time.
4. Style Your App with CSS
- Time Estimate: 20 minutes
- Expected Output: A visually appealing To-Do app.
Add some basic styling in styles.css:
body {
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
#taskList {
list-style-type: none;
}
You can ask Cursor for design tips or specific CSS properties.
5. Testing and Debugging
- Time Estimate: 30 minutes
- Expected Output: A fully functional To-Do app.
Run your app in a web browser and test the functionality. If you encounter issues, use Cursor’s debugging features to identify and fix problems.
6. Deploying Your App
- Time Estimate: 10 minutes
- Expected Output: Your app is live!
You can deploy your app using GitHub Pages or Netlify for free. Cursor can guide you through the deployment process.
What Could Go Wrong
- Common Issues: Forgetting to link your JavaScript or CSS files.
- Solutions: Double-check your file paths and ensure all files are correctly named.
What’s Next?
Once you have a basic To-Do app, consider adding more features like:
- Task deletion
- Task completion toggling
- Persistent storage using localStorage
Conclusion
Using Cursor, you can build a simple app like a To-Do list in under 2 hours. The key is to leverage its AI capabilities to speed up the coding process. Start with the free version, and as you get more comfortable, consider upgrading to the Pro plan for additional features.
For our indie hacker friends, this is a practical way to dip your toes into app development without getting overwhelmed.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.