Build a backend with Cursor and Manifest in just 5 minutes đŸ˜±

TL;DR

In this article, I’ll show you how to build a backend in under 5 minutes using Manifest directly from your Cursor IDE.

We’ll start from a static real estate listing app and replace static data with a fully functional backend: data, filters, CRUD, and admin panel!

Introduction

If you’re experimenting with AI-powered development, you’ve probably seen two types of tools emerge.

First, there are vibe coding tools like Lovable or Bolt. They’re great at turning a short prompt into a polished UI. For quick prototypes, they feel magical. But when it comes to integrating a backend, they hit a wall. You stay stuck with mock data without backend logic.

The second are AI code editors like Cursor or Windsurf. These let you code with assistance, directly in your environment. But even then, generating the backend is where problems start.

The AI spreads logic across too many files. Once you iterate, it introduces strange changes that are hard to track. Reviewing everything becomes exhausting, and you can’t really trust that the result is secure. You still need backend skills to understand what was generated and make sure nothing breaks or leaks.

You might consider using one of the many no-code BaaS platforms. Some of them now offer MCPs to bridge the gap between visual tools and AI code editors, but their core experience is still tied to their studio. Even with those improvements, you end up switching back and forth, breaking your flow and slowing down iteration.

Image description

Manifest solves this by allowing you to code or vibe-code a backend instantly. No drag and drop. Just 1 YAML file easy to read and edit both by developers and LLMs.

Prerequisites

Before getting started, make sure you have Node.js installed on your machine.

Used Tools

Here’s an overview of the tools we’ll be working with:

  • Cursor: An AI-powered code editor. In this tutorial, we’ll use it with its default LLM, Claude Sonnet 3.5.

  • Manifest: Manifest is the backend for developers who want to ship fast. We will use it to create instantly a backend with data, storage, logic and an admin panel.

    • Fits naturally into AI-assisted coding. No bloated no-code UI

    • Easy and safe to validate

    • Reduce LLM token usage by up to 90%

    • The fastest way to build a backend.

    • It's open source and can be self-hosted effortlessly.

{% cta https://manifest.build %}

→ Try Manifest

{% endcta %}

Project setup

We’ll start from an existing frontend that displays a few real estate listings using static sample data.

Our goal is to replace this static data with a backend powered by Manifest. We'll keep the existing structure and avoid adding unnecessary complexity. So the data can be managed by administrators.

Now, let’s take a quick look at how the current frontend works before installing the backend.

The current UI is a simple real estate listing page. It displays a few sample properties with basic details like title, image, price, surface and more.

Image description

The project has a client/ folder that contains the frontend. It was generated using bolt.new, which gives us a nice starter to work with and allows us to stay focus on the backend work.

Image description

Each property follows a consistent structure defined in a types/Property.ts.

Image description

The sample data is located in data/properties.ts. This is the static content we’ll replace with real data from our backend.

Image description

These properties are rendered using a PropertyList component.

Now that we’ve seen how the frontend works, let’s install Manifest and bring it to life.

Install Manifest

Manifest is designed to integrate directly into your AI code editor. It doesn’t require any external dashboard or setup flow. Everything lives in a single YAML configuration file.

From the root of your project, run the following command:

yarn create manifest server --cursor

This will create a server/ folder containing your backend Manifest.

Image description

Once the folder is generated, open manifest/backend.yml. In this YAML file, you should see a default template of a backend, called My pet app.

Now, let’s ask Cursor to generate the backend for our real estate app.

Here’s the prompt I used:

Image description

Cursor replies with a YAML file describing your backend. In my case, it named the project: name: Real Estate Listing App 🏠 and defined the three core entities: Property, Agent and Inquiry.

# This is a sample file for a backend.yml manifest backend.
# Read more about the manifest format here: https:/manifest.build/docs

name: Real Estate Listing App 🏠
entities:
  Property:
    properties:
      - title
      - { name: price, type: number }
      - location
      - city
      - { name: bedrooms, type: number }
      - { name: bathrooms, type: number }
      - { name: surfaceArea, type: number }
      - description
      - { name: image, type: image }
      - {
          name: type,
          type: choice,
          options: { values: ['House', 'Apartment', 'Studio'] },
        }
    belongsTo:
      - Agent
    policies:
      read:
        - access: public

  Agent:
    properties:
      - name
      - email
      - phone
      - { name: photo, type: image }
    policies:
      read:
        - access: public
      create:
        - access: public

  Inquiry:
    properties:
      - name
      - email
      - message
    belongsTo:
      - Property
    policies:
      read:
        - access: public
      create:
        - access: public

The assistant also explains its choices, especially the access policies.

Image description

Let’s accept this version for now.

To start the backend and access the generated API and admin panel, just run:

npm run manfiest

Once it’s up, go to http://localhost:1111/api to explore your API routes and test them in the Swagger interface.

Image description

You can also explore the admin panel by visiting: http://localhost:1111 Here, you’ll find all your entities listed with a full interface to manage your data.

Image description

Try creating a few residences and agents directly from the UI. You’ll instantly see them appear in your API responses too. On my side, I seeded mock data running npm run manifest:seed from the server repository.

Image description

Now that the backend is running, it’s time to connect the frontend to real data.

Connect the frontend to the backend

Let’s replace the static content with real data from our backend.

1. Install the Manifest SDK

We can use either the REST API or the SDK. For this tutorial, I chose to use the SDK. To do so, run this command in your client folder:

npm i @mnfst/sdk

Once installed, we can use the SDK to fetch the data from our backend.

In App.vue, replace the static data import with a real API call using the SDK:

import Manifest from '@mnfst/sdk'

This imports the Manifest SDK. It allows us to interact with the backend.

const manifest = new Manifest()

This creates a new instance of the Manifest client. It will automatically connect to the local server running on localhost:1111.

const properties = ref<Property[]>([]) const loading = ref(true) const error = ref<string | null>(null)

Here we set up reactive state:

  • properties will hold the residences fetched from the backend.

  • loading lets us show a loading state while we wait.

  • error will capture any issue if the request fails.

onMounted(async () => {
  try {
    const res = await manifest.from('residences').find({ perPage: 100 })
    properties.value = res.data
  } catch (e: any) {
    error.value = e.message || 'Unknown error'
  } finally {
    loading.value = false
  }
})

This code runs when the component mounts. It fetches up to 100 properties from the backend and stores them in the properties array. If something goes wrong, we store the error message.

For now, we keep it simple by fetching everything in one request. We could add pagination later using the page and perPage options provided by Manifest.

You’ll also need to update the template to reflect the loading and error states:


<div v-if="loading" class="loading">Loading properties...</div>
<div v-else-if="error" class="error">{{ error }}</div>
<PropertyList v-else :properties="properties" />

This ensures that:

  • A loading message is shown while we wait for the data

  • An error message appears if the fetch fails

  • The property list only renders once the data is available

Now your frontend is powered by backend data and ready for the next step. Let’s take a look at the result in the browser:

Image description

What we’ve got so far

At this point, your frontend is fully connected to a real backend.
You can browse residences, apply filters, and manage listings in a clean admin interface.

What’s most interesting is how little code we had to write for the backend:

Most of the logic lives in a single YAML file. That’s what makes Manifest a perfect match for an AI code editor like Cursor.

✅ The LLM gets a clear, structured context to work with. ✅ It can generate reliable changes without scattering logic across the project. ✅ You stay in control and iterate faster.

This was the main goal of this tutorial: show how fast and safe it can be to bring real data into a frontend project, thanks to how naturally Manifest integrates into your AI coding environment.

Want to go further?
Manifest supports essential backend features like file uploads, authentication, custom hooks and so on.

The full version of this project with inquiry forms and email is available on GitHub:

→ github.com/SebConejo/real-estate-example

Manifest is an open source young project. It’s evolving fast thanks to the feedback we get from early users. We’d love to hear what you’re building, what’s missing, and what you’d like us to add next.

👉 Try it here: manifest.build
⭐ Star us on GitHub: github.com/mnfst/manifest

0
Subscribe to my newsletter

Read articles from Sébastien Conejo directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Sébastien Conejo
Sébastien Conejo

I'm co-Founder of Buddyweb and CEO at Manifest, a Backend-as-a-Service so simple that it fits into a single YAML file. My expertise lies in UX/UI design, front-end dev, and leading projects.