Tutorial: build a real site on kura

A small property-listings site, schema to deployed read - about twenty minutes

This builds a working content-backed site end to end: a small property-listings site. You'll define the content shape, add a listing, and read it from a frontend. About twenty minutes. It assumes you've skimmed Getting started; this is the hands-on version.

We'll make a Listing content type with a title, a price, a bedroom count, a photo, and a map location, then read the published listings from a frontend.

1. Create the project and start the trial

Sign in at kuracms.com with a magic link, create a project (call it riko-realty), and start the free trial. The trial must be active or the public API returns 402 and serves nothing - do this before wiring up the frontend.

Note your project slug from the project page (/app/riko-realty).

2. Define the schema

You can do this by talking to your AI tool over MCP, or by hand in the admin. Via MCP it looks like:

You:  Create a Listing content type.
kura: Created content type "listing".
You:  Add these fields to Listing: title (text, required); price (number,
      whole numbers); bedrooms (number, whole numbers); photo (image);
      location (coordinates).
kura: Added 5 fields to "listing".

That produces a Listing type with keys title, price, bedrooms, photo, location (keys are derived from labels - see the field-type reference). Remember the schema is additive in v0.1: pick these names deliberately, you can't rename them later.

3. Add a listing and publish it

In the admin, open Listing, add an entry, fill in the form (a text box, two number boxes, an image uploader, and a map picker - all generated from your schema), and publish it. Only published entries are served by the public API.

4. Get a token

On the project page, open the Developer section, Create token (name it "Website"), and copy it - it's shown once. It's prefixed kr_live_. Keep it server-side: a project token can write as well as read your content.

5. Read it from your frontend

Set two values in your frontend's environment:

KURA_BASE_URL=https://kuracms.com
KURA_TOKEN=kr_live_your_token

Fetch the published listings (server-side, so the token isn't exposed):

const res = await fetch(
  `${process.env.KURA_BASE_URL}/api/v1/riko-realty/listing?sort=-price&limit=20`,
  { headers: { Authorization: `Bearer ${process.env.KURA_TOKEN}` } }
);
const { data } = await res.json();

for (const listing of data) {
  console.log(listing.title, listing.price, listing.bedrooms);
  const photoUrl = `${process.env.KURA_BASE_URL}${listing.photo}`; // /media/{key}
  const { lat, lon } = listing.location; // coordinates object
}

Three shapes to handle (see the REST API reference): the photo image is a relative /media/{key} path you prefix with KURA_BASE_URL; the location is a { lat, lon } object; and if you'd added a relation field it would come back as a slug needing a second fetch.

For the exact pattern in your stack - Astro, Next.js, Nuxt, SvelteKit, Eleventy, or Hugo - see the framework guides, each backed by a real example repo you can clone.

6. Hand it over

The build is done; the content is maintained from the admin, not the code. Invite your client as an editor: on the project page (/app/riko-realty), open the Team section and invite them by name and email. They get a magic link, accept it, and sign in under their own account - where they edit listings in the same form you saw and publish. The frontend picks up published changes on its next read. You don't touch the code again.

Editors can edit and publish content; they don't see the schema, tokens, or billing. The project's single subscription covers as many editors as you invite - there's no per-editor charge.

That's a complete site: schema, content, API, and a non-technical editor. From here, the framework guides show the read step in your exact stack.