How to Build a Simple Web App with Cursor in 2 Hours
How to Build a Simple Web App with Cursor in 2 Hours
Ever thought about building a web app but felt overwhelmed by the complexity? If you're an indie hacker or a side project builder, you might find yourself stuck in analysis paralysis, especially when it comes to coding. Well, I'm here to tell you that it doesn't have to be that way. In just 2 hours, you can create a simple web app using Cursor, which leverages AI to simplify coding tasks. Let’s dive into how you can do this.
Prerequisites: What You Need Before You Start
Before you get started, make sure you have the following:
- Cursor installed: Download it from Cursor's website. It’s free to start with.
- Basic understanding of HTML, CSS, and JavaScript: This is helpful, but not mandatory.
- A code editor: I recommend using Visual Studio Code or any editor you prefer.
- A local server: You can use Live Server extension in VS Code to serve your app locally.
Step 1: Setting Up Your Project Structure
First, create a new folder for your project. Inside this folder, create three files:
index.htmlstyles.cssscript.js
Your folder structure should look like this:
/my-web-app
├── index.html
├── styles.css
└── script.js
Step 2: Using Cursor to Generate Code
Open Cursor and start a new project. Here’s where the magic happens:
-
HTML: Ask Cursor to generate a basic HTML template. You can type something like, "Create a simple HTML structure for a web app." Cursor will provide you with a boilerplate.
-
CSS: Next, request styles for your app. Use a prompt like, "Add styles for a responsive layout." Cursor will generate CSS for you.
-
JavaScript: Finally, ask Cursor to create interactivity. For example, "Write a function to handle button clicks." Cursor will help you with that too.
Expected Outputs
After following the steps above, your files should look something like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>My Simple Web App</title>
</head>
<body>
<h1>Welcome to My Web App</h1>
<button id="myButton">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
}
script.js
document.getElementById('myButton').addEventListener('click', function() {
alert('Button was clicked!');
});
Troubleshooting: What Could Go Wrong
-
Cursor doesn’t generate code: Ensure you’re clear and specific with your prompts. If it still fails, check your internet connection.
-
Local server not starting: Make sure you’ve installed the Live Server extension and are using it correctly.
-
Styling issues: If your styles aren’t applying, double-check the link to your CSS file in the HTML.
What’s Next?
Once your web app is live on your local server, consider these next steps:
- Deploy your app: Use platforms like Vercel or Netlify (both free for basic use) to host your app online.
- Add more features: Think about integrating an API or adding a database.
- Iterate based on user feedback: Share it with friends or fellow builders and gather feedback.
Conclusion: Start Here
Building a simple web app in just 2 hours is not only possible but can also be a fun and rewarding experience. With Cursor’s AI-powered coding assistance, you can get through the tedious parts quickly and focus on what really matters—your ideas.
So, grab your laptop, set up your project, and start creating!
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.