A complete, open real estate site running on Express API: see it live, deploy it in minutes and modify it however you want.

The wiki documents all 21 actions one by one. This page answers the other question, the one that comes first: how do I build a site with this?

1. See it live

express.mapaprop.com is the site running on a real Mapaprop account, against the production Express API. What you see there is what gets deployed: it is not a mock-up.

The code is at github.com/Mapaprop/mapaprop-express-starter, under the MIT license.

2. What it is

A complete website —home, featured properties, search, property page, developments, blog, contact and seller capture— written in HTML and JavaScript, with no framework and no build step. You open it, you edit it and you see the change.

It is not a loose code sample: it is the implementation we keep up to date with every change in Express API, and the same one we use to show the API working.

3. From zero to deployed

1. Have your plan. Express API is included from Mapaprop Pro+ upwards.
2. Activate your token in Settings > API Token. Step-by-step guide: Express API Token.
3. Deploy the site. The repository has a Vercel button that clones the project and asks you for the token during the process; it is stored as the MAPAPROP_API_TOKEN environment variable.
4. Edit public/js/config.js with your fallback data and publish again.

It also works on your own server: it is a Node server with no dependencies, and it runs behind nginx or Apache like any other application. What is not enough is static file hosting on its own, because the function that holds the token has to be executed.

4. Trying it with no account and no token

git clone https://github.com/Mapaprop/mapaprop-express-starter
cd mapaprop-express-starter
npm run dev:mock                  # http://localhost:3000

That starts the site against the repository fixtures, which are real, anonymized API responses. It is the way to look at it, to work on the design and to send a change without being a Mapaprop customer. In mock mode the forms do not send anything anywhere.

With your token, the real mode:

cp .env.example .env.local        # and paste your token inside
npm run dev                       # http://localhost:3000
npm test                          # the full suite

5. The map of the code

For the developer who is going to modify it, what handles what:

6. Why the token lives on the server side

This is the most important architectural decision in the project, and the one worth understanding before changing it.

Your account has a single API Token, that token carries every permission your plan grants you and it does not expire. If you have the Property API add-on, that same token can also create properties and publish them on the portals. Put in the site's JavaScript, any visitor would read it from the browser developer tools and walk away with a permanent credential for your account.

That is why it lives in a server environment variable, and the browser talks to a function that is the only one that knows it. That function also:

• only lets through the actions the site uses, through an explicit list. Without that list, a hand-crafted route could reach another part of the API with your token.
• filters the body of both forms against the fields each action documents.
• trims settings-v2 down to what the site uses. Besides your name and your contact details, that action returns your tax data and your account's Mapbox and reCAPTCHA keys. Everything the function returns ends up public, so whatever the site does not need does not go out.
• fills in the IP, the browser and the referer of every inquiry: these are data the inquiry action needs and that the browser cannot declare about itself.
• caches the catalogs so no calls are wasted.

The site also declares a Content-Security-Policy and three more headers, and the Node server reads them from the same file Vercel does: that way the defense does not depend on where you deployed it.

7. Inquiries come back to your CRM

The form on every property page posts to messages, so the inquiry enters your Mapaprop Inbox as a lead: you assign it to an agent, you follow up on it, it stays in your reports and it triggers your automations.

If you replace it with a form that only emails you, the circle breaks: you keep loading properties into Mapaprop and you serve your customers outside, where the inquiry does not exist for your CRM.

The seller capture form uses seller-submissions: it creates the contact in your CRM and emails you with the attachments. That action does need a site bound to your token.

8. What it does not cover

9. How to contribute

The repository is public and takes pull requests.

• If something is missing —a filter, a block, a language— open an issue at github.com/Mapaprop/mapaprop-express-starter/issues and we will look into it.
• If you already solved it, send your PR. Mock mode exists precisely so that you can work and test without an account.
• If you find a security problem, how to report it is written in the repository's SECURITY.md.

10. Further reading

• Express API: the 21 actions
• Getting started with the API
• Express API Token: how to activate it