How to Write a Full-Stack Application Using Cursor in Just 2 Hours

Building a full-stack application can feel like an overwhelming task, especially if you're a solo founder or indie hacker strapped for time. The good news? With tools like Cursor, you can cut down your development time significantly. In fact, I’ve built a simple full-stack app using Cursor in just about 2 hours. Here’s how you can do the same.

Prerequisites: What You Need to Get Started

Before diving in, make sure you have the following:

• Cursor Account: Sign up for a free account on Cursor.
• Node.js: Ensure you have Node.js installed (version 14 or higher).
• Basic JavaScript Knowledge: Familiarity with JavaScript and some understanding of REST APIs will help.
• A Code Editor: Use any code editor you prefer (VSCode is a solid choice).

Step-by-Step Guide to Building Your App

1. Set Up Your Project in Cursor

Start by creating a new project in Cursor. This will be your workspace for building the full-stack application.

• Expected Output: A new project dashboard where you can write and manage your code.

2. Initialize Your Backend with Express

In your Cursor project, create a new folder for your backend. Initialize a Node.js project and install Express:

mkdir backend
cd backend
npm init -y
npm install express

• Expected Output: Your backend folder should now contain a package.json file and node_modules.

3. Build Your API Endpoints

Create an index.js file in the backend folder and set up a simple Express server:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from your API!' });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• Expected Output: Running node index.js should show "Server running on port 3000".

4. Set Up Your Frontend

Create a new folder for your frontend in the Cursor project. Use a simple HTML file to fetch data from your API:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Full-Stack App</title>
</head>
<body>
    <h1>Data from API:</h1>
    <div id="data"></div>
    <script>
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                document.getElementById('data').innerText = data.message;
            });
    </script>
</body>
</html>

• Expected Output: Opening the HTML file in a browser should display "Data from API: Hello from your API!".

5. Connect Frontend and Backend

Ensure that both your frontend and backend are running simultaneously. You can use tools like concurrently to manage multiple processes if necessary.

• Expected Output: Your frontend should display the message fetched from your backend API.

6. Deploy Your Application

Once you’re satisfied with your application, consider deploying it using platforms like Vercel for the frontend and Heroku for the backend. Both have free tiers that should suffice for initial testing.

• Expected Output: Your app is now live and accessible via the web.

Troubleshooting: What Could Go Wrong

1. CORS Issues: If you encounter CORS errors while fetching data, make sure to add CORS middleware to your Express app.
2. Server Not Starting: Double-check your Node.js installation and ensure all dependencies are installed properly.

What's Next?

Once your full-stack application is up and running, consider adding features like user authentication or a database for persistent data storage. Explore Cursor’s documentation for more advanced functionalities.

Conclusion: Start Here

Building a full-stack application doesn’t have to be a daunting task. With Cursor, you can set up a simple app in just 2 hours. Start by following the steps above, and don’t hesitate to iterate and improve on your application as you go.

What We Actually Use

In our experience, we rely heavily on Cursor for rapid prototyping and development. For more complex applications, we also use tools like Firebase for backend services and Vercel for frontend deployments.