How to Build a Simple App Using Cursor in Under 2 Hours

In the fast-paced world of indie hacking, finding ways to build and launch quickly is crucial. If you’re like me and have a million ideas but limited time, Cursor is a tool you might want to consider. It allows you to create simple apps without getting bogged down in complex coding. In this guide, I’ll walk you through building a basic app using Cursor in under 2 hours.

What You Need to Get Started

Prerequisites:

• Cursor Account: Create a free account at Cursor.
• Basic Idea: Have a simple app idea in mind (e.g., a to-do list, a weather checker).
• Time: Set aside about 2 hours for this project.

Step-by-Step Guide to Building Your App

1. Define Your App's Purpose (10 minutes)

Before diving into Cursor, clarify what your app will do. For example, let’s say you want to build a simple to-do list app that allows users to add and remove tasks.

2. Set Up Your Cursor Environment (20 minutes)

• Log into your Cursor account.
• Create a new project and choose the "Web App" template.
• Familiarize yourself with the interface. Cursor provides an easy-to-use drag-and-drop interface, which is ideal for beginners.

3. Build the User Interface (30 minutes)

Using the drag-and-drop features, you can add:

• A text input for new tasks.
• A button to add tasks to the list.
• A list element to display tasks.
• A button to remove tasks.

Expected Output: You should have a basic UI that looks something like this:

[ New Task Input ] [ Add Task Button ]

Tasks:
- Task 1 [ Remove Button ]
- Task 2 [ Remove Button ]

4. Implement Functionality with AI Assistance (30 minutes)

Cursor uses AI to help you write the code for functionality. Here’s how:

• Click on the "Code" section.
• Use Cursor’s AI to generate code snippets for adding tasks to the list and removing them.
• Test each functionality as you build to ensure it works correctly.

Expected Output: You should be able to add tasks to your list and remove them with a button click.

5. Test Your App (20 minutes)

Run your app in the Cursor preview mode. Make sure to test:

• Adding tasks
• Removing tasks
• Edge cases (e.g., what happens if you try to add an empty task).

6. Deploy Your App (10 minutes)

Once everything is working smoothly, deploy your app directly from Cursor. You’ll get a live link to share with others.

Troubleshooting Common Issues

• Issue: Tasks not appearing after adding.
  • Solution: Double-check your code for typos or logic errors.
• Issue: Removal button not functioning.
  • Solution: Ensure the event listeners are correctly set up.

What's Next?

Once you’ve built your first app, consider expanding its features or trying out other tools. Here are some suggestions:

• Integrate a database for user persistence (try Firebase).
• Explore more complex UI elements with other frameworks.

What We Actually Use

In our experience, Cursor is a fantastic starting point for building simple apps quickly. However, for more complex applications, we often switch to frameworks like React or Vue for greater flexibility.

Conclusion

Building a simple app with Cursor can be done in under 2 hours, making it a great option for indie hackers looking to validate ideas quickly. Start with a basic app, and as you get comfortable, explore more features.

For building in public and sharing your journey, check out our weekly podcast where we discuss tools we’re testing and products we’re shipping.