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

Building a web app can feel like a daunting task, especially if you’re a solo founder or indie hacker juggling multiple projects. But what if I told you that you could create a simple web app in under two hours using Cursor, an AI-powered coding tool? In this guide, I’ll walk you through the process, share what you need to get started, and highlight the limitations of using Cursor.

Time Estimate: 2 Hours

You can finish this project in about two hours if you follow the steps closely. Cursor simplifies the coding process, but you'll still need some foundational knowledge of web development concepts.

Prerequisites

Before diving in, make sure you have:

• A Cursor account (Free tier available)
• Basic understanding of HTML, CSS, and JavaScript
• Node.js installed on your machine
• A code editor (like Visual Studio Code)

Step-by-Step Guide to Build Your Web App

Step 1: Set Up Your Project

1. Create a New Directory: Open your terminal and create a new folder for your project.

   mkdir my-web-app
   cd my-web-app
   

2. Initialize a Node.js Project: Run the following command to set up your Node.js project.

   npm init -y
   

3. Install Express: To create a simple server, install Express.

   npm install express
   

Step 2: Use Cursor to Generate Code

1. Open Cursor: Launch the Cursor app and start a new coding session.

2. Generate Basic Server Code: Input a prompt like "Create a basic Express server that serves a web page." Cursor will generate the code for you.

   Example output:

   const express = require('express');
   const app = express();
   const PORT = process.env.PORT || 3000;
   
   app.get('/', (req, res) => {
       res.send('Hello, World!');
   });
   
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });
   

3. Copy the Generated Code: Paste this code into a new file named server.js in your project directory.

Step 3: Create Your Frontend

1. Create an HTML File: In your project directory, create a file named index.html and use Cursor to generate some basic HTML code.

   Example prompt: "Create a simple HTML page with a title and a button."

   Example output:

   <!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>
       <button onclick="alert('Button clicked!')">Click Me!</button>
   </body>
   </html>
   

2. Serve the HTML File: Update your server code to serve the HTML file.

   app.use(express.static('public'));
   

   Move your index.html file into a new folder named public.

Step 4: Run Your Web App

1. Start the Server: In your terminal, run:

   node server.js
   

2. Open Your Browser: Go to http://localhost:3000 to see your web app in action!

Troubleshooting

• If the server doesn't start: Check for errors in your terminal. Ensure that all packages are installed correctly.
• If the HTML page doesn't load: Make sure your index.html file is in the public folder and that you have the correct file path in your server code.

What's Next?

Once you've built this simple web app, consider expanding its functionality. You could add a database, implement user authentication, or even integrate with third-party APIs. The possibilities are endless!

Conclusion

Cursor is a powerful tool for indie hackers and solo founders looking to build web apps quickly. While it makes the coding process much easier, remember that it’s not a magic bullet. There are limitations, especially when it comes to complex logic or custom features. But for simple projects, it can be a game-changer.

What We Actually Use

In our experience, we use Cursor for rapid prototyping. However, for more complex applications, we often switch to traditional coding because Cursor can struggle with nuanced requirements.

If you're ready to dive in and build your first web app with Cursor, give it a shot! It could be the start of something great.