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.
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.
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.
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.
Each property follows a consistent structure defined in a types/Property.ts
.
The sample data is located in data/properties.ts
. This is the static content weāll replace with real data from our backend.
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.
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:
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.
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.
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.
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.
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:
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
Top comments (0)