# Launch a User Map App on XION in 5 Minutes

Building an app on XION typically involves three main components:

* **A smart contract** – Contains the core business logic of your app.
* **A Treasury contract** – Enables gasless transactions using **Fee Grants**, making onboarding smoother for users. It also handles **Authorization Grants**, which allow your frontend to execute transactions on behalf of the user, enabling a more traditional application-like experience through our OAuth2-style **Abstraxion** solution.
* **A frontend** – This is your app’s interface, used to display data and trigger transactions via the smart contract.

As a beginner to XION development, getting a fully functional app up and running should be simple and shouldn’t require any complex setup. With this in mind, we’ve created a [**quick launch frontend solution**](https://quickstart.dev.testnet.burnt.com) for the **User Map** app that handles the creation of both the **User Map** and **Treasury** contracts. Outside of this we have built a [**frontend**](https://github.com/burnt-labs/xion-user-map-json-store-frontend) solution for interacting with the User Map contract.

{% hint style="info" %}
You should have your demo app up and running in under **5 minutes**. Once you're familiar with the workflow, you can move on to the advanced [**User Map guide**](https://docs.burnt.com/xion/developers/computation/use-cases/building-a-per-user-data-storage-dapp).
{% endhint %}

## What is the User Map app?

The **User Map** contract is a lightweight and beginner friendly smart contract designed to help developers, especially those coming from traditional web or application development, understand how to manage per-user data in a decentralized environment.

Think of it like a basic key-value store:

* **Key:** User's wallet address
* **Value:** A JSON object (e.g., user profile, preferences, settings)

You can find the source code here: [github.com/burnt-labs/contracts/tree/main/contracts/user\_map](https://github.com/burnt-labs/contracts/tree/main/contracts/user_map).

## Prerequisites

Before you begin, make sure you have the following installed:

* [Node.js](https://nodejs.org) (v18+)
* [Git](https://git-scm.com)

## Create Instance of User Map and Treasury Contracts

**Compiling** and **instantiating** smart contracts can feel like huge tasks, especially for new developers. You typically need to set up your development environment with tools like [**Docker**](https://docs.burnt.com/xion/developers/xion-quick-start/setup-local-environment/installation-prerequisites-setup-local-environment#docker) and [**xiond**](https://docs.burnt.com/xion/developers/xion-quick-start/setup-local-environment/installation-prerequisites-setup-local-environment#xiond), and go through the full process of compiling, deploying, and instantiating your contracts manually. On top of that, creating and configuring a Treasury contract via the [**Dev Portal**](https://dev.testnet.burnt.com) can be overwhelming if you're just getting started.

To make this much easier, we’ve created a [**quick launch frontend solution**](https://quickstart.dev.testnet.burnt.com) for this **User Map** app that takes care of all the heavy lifting, so you can skip the setup pain and focus on experimenting with a real, working app.

1. Go to <https://quickstart.dev.testnet.burnt.com> and log in using your **Meta Account**

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FkLbQrnyLcugWoZH4wXru%2Fimage.png?alt=media&#x26;token=0ad0e7f8-1d48-4335-8e53-a5b0f08096fd" alt=""><figcaption></figcaption></figure>

2. Select "**User Map**" from **Step 1** and click the **Launch User Map & Fund Treasury** button under **Step 2**.

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FGQwE8ixtUc9ecgDVLksv%2Fimage.png?alt=media&#x26;token=4b9821fe-c1c1-49a2-ab26-7b9ad59d8895" alt=""><figcaption></figcaption></figure>

Behind the scenes, this:

* Instantiates your **User Map** contract
* Deploys a **Treasury contract** with a configured **Fee Grant** to enable gasless transactions and also **Authorization Grants** for users to give the frontend approval to interact with the **User Map** contract on their behalf
* Funds the **Treasury contract** to pay transaction fees for users via the **Fee Grant**

These 4 environment variables will be generated which will you will need to add to the frontend project `.env.local` [environment file](#set-up-environment-variables):

```env
NEXT_PUBLIC_CONTRACT_ADDRESS=...
NEXT_PUBLIC_TREASURY_ADDRESS=...
NEXT_PUBLIC_RPC_URL=...
NEXT_PUBLIC_REST_URL=...
```

## Set Up the Frontend

The frontend allows users to log into your app using their Meta Account via multiple authenticators (Email, Social Login, Wallets, Passkeys). Once logged in, users can query contract data and execute transactions to update their User Map record, which is linked to their Meta Account address.

There are two options available for setting up the frontend:

* One being the automated option where you you run a command that downloads the frontend app from github, install all the dependencies and set up are the required environment varaibles with the required values.
* The other option is a manual installtion where you will need to pull down the code from github, install the necessary packages and set up the environment variables.

### Automated Installation

In the **Quick Launch Frontend**, select the **"webapp"** template under **Step 3**.

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FvnqpXCodG8yhejp8YlDD%2Fimage.png?alt=media&#x26;token=1d2849e5-e48d-4816-a5fc-959e18bc85c6" alt=""><figcaption></figcaption></figure>

You’ll see two options for setting up your project. **Option 1: One-liner (Recommended)** provides a bash command that automates the entire setup process:

* Clones the frontend project from the Git repository
* Installs all required packages
* Sets up the necessary environment variables
* Launch a dev server

To use this option, simply copy the provided bash command and run it in your terminal from the directory where you'd like your project to be created.

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FSzaNifmCbGzE9IO1De0g%2Fimage.png?alt=media&#x26;token=c01f4d04-0a8c-4a17-a690-6f782fe90023" alt=""><figcaption></figcaption></figure>

Once complete, the development server will automatically start, and you can access your app at <http://localhost:3000> in your browser.

### Manual Installation

To manually set up the project, start by cloning the repository:

```bash
git clone https://github.com/burnt-labs/xion-user-map-json-store-frontend
cd xion-user-map-json-store-frontend
```

Next, create a `.env.local` file in the root of your project directory.

#### Set up Environment Variables

In the **Quick Launch Frontend**, select the **"webapp"** template:

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FQIfMNt7lrs6DaVcxmA92%2Fimage.png?alt=media&#x26;token=05d00c56-fc21-4935-948d-2135725e14ef" alt=""><figcaption></figcaption></figure>

Under the **"Manual Setup"** section, copy the environment variable values and paste them into your `.env.local` file:

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2F9HQSSVhjrYTu0AUWHMvY%2Fimage.png?alt=media&#x26;token=828412b4-2ec8-41c8-91e3-16b4d7b44039" alt=""><figcaption></figcaption></figure>

Once the environment is configured, install the dependencies and start the local development server:

```bash
npm install
npm run dev
```

You can now access the app at <http://localhost:3000> in your browser.

#### The Frontend Interface

After the app loads in your browser, you’ll see the homepage with a **“Connect”** button. Click this button to log in with your XION Meta Account.

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FujxFol60dJ2ZQS3EkCfS%2Fimage.png?alt=media&#x26;token=240c4f45-fd27-4b28-80a8-2144a19b21dd" alt=""><figcaption></figcaption></figure>

Once connected, the interface will allow you to:

* **Submit JSON data**: Enter a JSON object and click **“Submit JSON”** to trigger a transaction that stores the data in your User Map on-chain.
* **Retrieve data**: Use the available menu options to query and view stored JSON data from the smart contract.

<figure><img src="https://3630978198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB5Z5ijJgMx0GJO3l1Il9%2Fuploads%2FiAaXrEVHtVaut6uo2mek%2Fimage.png?alt=media&#x26;token=b39b292c-69ea-4e37-acef-f6c372ead0b0" alt=""><figcaption></figcaption></figure>

***

For a detailed breakdown of the contract’s design, execution messages, and frontend setup see [Full Guide – Building a Per-User Data Storage app](https://docs.burnt.com/xion/developers/learn-and-build/use-cases/building-a-per-user-data-storage-dapp).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.burnt.com/xion/developers/computation/xion-quick-start/zero-to-dapp-in-5-minutes/launch-a-user-map-dapp-on-xion-in-5-minutes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.