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

Building a web app can feel overwhelming, especially for indie hackers and solo founders who are short on time and resources. But what if I told you that you could whip up a basic web app in just 2 hours using Cursor? If you’re looking for a practical, no-nonsense approach to leveraging AI coding tools, you’re in the right place.

Cursor is a tool that helps automate coding tasks with AI assistance, which can significantly speed up your development process. In this guide, I’ll walk you through building a simple web app using Cursor, sharing my experiences, and giving you honest insights along the way.

Prerequisites

Before we dive in, here are a few things you need to have ready:

1. Cursor Account: Sign up for a free account at Cursor.
2. Basic HTML/CSS/JavaScript knowledge: You don’t need to be a pro, but a grasp of the basics will help.
3. Node.js Installed: Make sure you have Node.js installed on your machine.
4. Text Editor: Use any code editor you prefer (VSCode is popular).

Step 1: Setting Up Your Project

1. Create a New Directory: Start by creating a new folder for your web app project.

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

2. Initialize Node.js: Run this command to set up your project.

   npm init -y
   

3. Install Express: This will help us create a server quickly.

   npm install express
   

Step 2: Build Your Web App Logic with Cursor

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

2. Create Your Server: Use Cursor to generate a basic Express server. You can type:

   Create an Express server that serves a simple HTML page.
   

   Cursor will generate the necessary code for you.

3. Add HTML File: Create an index.html file in the root directory. Type:

   Generate a simple HTML page with a title and a button that says "Click Me".
   

   Cursor will provide the HTML structure.

Step 3: Connect Frontend and Backend

1. Modify Your Server Code: Update your server code generated by Cursor to serve the index.html file:

   const express = require('express');
   const app = express();
   const PORT = process.env.PORT || 3000;
   
   app.use(express.static('public'));
   
   app.get('/', (req, res) => {
       res.sendFile(__dirname + '/public/index.html');
   });
   
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });
   

2. Test Your App: Run your server with:

   node index.js
   

   Open your browser and go to http://localhost:3000 to see your web app in action.

Step 4: Troubleshooting Common Issues

What Could Go Wrong?

• Server Not Starting: Ensure you have Node.js installed and that you’re in the correct directory.
• HTML Not Loading: Check your file paths and ensure your server is correctly serving static files.

Solutions

• If you encounter errors, read the error messages carefully. They usually give you a good clue about what went wrong. You can also use Cursor to debug by asking:

  What does this error mean?
  

Step 5: What's Next?

Once your simple web app is up and running, consider adding features like:

• User Authentication: Use libraries like Passport.js.
• Database Integration: Try MongoDB for storing user data.
• Styling: Consider using CSS frameworks like TailwindCSS for a better design.

Conclusion

You can build a simple web app using Cursor in just 2 hours. The tool accelerates your coding process without sacrificing quality. If you’re an indie hacker or side project builder, I recommend starting with Cursor to streamline your development workflow.

What We Actually Use

For our projects, we rely on Cursor for quick prototyping, but we also incorporate traditional coding practices for more complex tasks.