How to Use Cursor to Code a Simple Web App in Under 2 Hours

Building a web app quickly can feel like a daunting task, especially if you’re juggling multiple responsibilities as an indie hacker or solo founder. But what if I told you that you could leverage AI to streamline your coding process? Enter Cursor, an AI-powered coding tool that promises to make development faster and more efficient. In this guide, I’ll walk you through how to use Cursor to build a simple web app in under two hours.

Time Estimate: 2 Hours

You can finish this project in about 2 hours, assuming you have a basic understanding of web development concepts.

Prerequisites

Before we dive in, make sure you have the following:

• A Cursor account (free tier available)
• Basic knowledge of HTML, CSS, and JavaScript
• A code editor like VSCode
• A local server setup (e.g., using Live Server extension in VSCode)
• Internet connection to access Cursor's features

Step-by-Step Guide

Step 1: Set Up Your Project

1. Create a New Folder: Name it something like MyWebApp.

2. Open VSCode: Launch your code editor and open the newly created folder.

3. Initialize Your HTML File: Create an index.html file with the basic HTML structure.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Web App</title>
   </head>
   <body>
       <h1>Welcome to My Web App</h1>
       <div id="app"></div>
   </body>
   </html>
   

Step 2: Use Cursor to Generate Basic Components

1. Open Cursor: In your code editor, open the Cursor extension.

2. Generate Code: Ask Cursor to create a simple JavaScript function. For instance, you can type, “Generate a function that displays a welcome message in the app div.”

   Cursor will provide you with the code:

   function displayMessage() {
       document.getElementById('app').innerHTML = '<p>Hello, World!</p>';
   }
   

3. Add the Script: Place the generated script inside a <script> tag at the bottom of your index.html.

Step 3: Style Your App

1. Create a CSS File: In your project folder, create a styles.css file.

2. Generate CSS with Cursor: Prompt Cursor to generate basic styles. For example, “Create styles for a centered header and a simple button.”

   Cursor might output:

   body {
       text-align: center;
       font-family: Arial, sans-serif;
   }
   
   button {
       padding: 10px 20px;
       font-size: 16px;
       cursor: pointer;
   }
   

3. Link Your CSS: Don’t forget to link the CSS file in your index.html head section:

   <link rel="stylesheet" href="styles.css">
   

Step 4: Implement Interactivity

1. Create a Button: Add a button to your HTML:

   <button onclick="displayMessage()">Click Me!</button>
   

2. Test Your App: Run your local server and open the HTML file in your browser. Click the button to see the welcome message.

Step 5: Troubleshooting Common Issues

• Cursor Not Generating Code: Ensure you’re connected to the internet and that the Cursor extension is properly installed.
• HTML Not Rendering: Check your browser console for any errors and ensure your local server is running.

What's Next?

Now that you have a basic web app up and running, consider expanding its functionality. You can add features like user input, API calls, or even a backend to store data.

Pricing Breakdown

Here’s a quick overview of Cursor's pricing:

| Plan | Price | Features | |-----------------|-------------------|-----------------------------------| | Free Tier | $0 | Basic code generation | | Pro Tier | $20/mo | Advanced features, priority support |

Limitations

While Cursor is a powerful tool, it does have limitations. It might not always generate the most optimized code, and you may need to tweak the results. It’s also not a replacement for learning; understanding the generated code is crucial.

Conclusion: Start Here

If you're looking to build a simple web app quickly, Cursor is an excellent tool to consider. It significantly reduces the time spent on coding by generating boilerplate code and providing suggestions. Just follow the steps outlined above, and you’ll have a functional web app in no time.

What We Actually Use: We rely on Cursor for rapid prototyping and code generation, but we always review and optimize the generated code to fit our needs.