# Start from create-solana-dapp (/docs/start/solana)



[create-solana-dapp](https://solana.com/developers/templates) makes a new Solana app from a template. Domino's template, **Domino Quests**, is the Solana Foundation's Next.js and `@solana/kit` starter with Sign-In With Solana, a **Quests** page, a **Leaderboard** page and two sample quests that check devnet: **Hold devnet USDC** and **Post a memo on devnet**.

The app runs on your machine at `http://localhost:3000` against real Domino, in your project's **Test** environment.

```mermaid
sequenceDiagram
    actor Member
    participant App as Your Next.js app
    participant Domino
    participant Devnet as Solana devnet
    Member->>App: Connects a wallet and signs in with Solana
    App->>Domino: Signs the member in under that wallet
    Member->>Devnet: Posts a memo from the wallet
    Member->>App: Presses Check on the quest
    App->>Domino: Checks the quest
    Domino->>Devnet: Reads the wallet's finalized transactions
    Domino-->>App: Points awarded
```

## Before you start [#before-you-start]

* **Node.js 24**, which Domino's SDK and CLI need.
* **A Domino project.** Create one in [Console](https://console.domino.run) with the existing-app path.
* **A Solana wallet** in your browser, such as Phantom, Solflare or Backpack, switched to devnet.

## 1. Create the app [#1-create-the-app]

```sh
npx create-solana-dapp@latest my-solana-dapp -t solana-foundation/templates/community/domino-quests
cd my-solana-dapp
```

create-solana-dapp installs the dependencies with npm; pass `--pnpm`, `--yarn` or `--bun` for another package manager, and run the `npm run` commands below with it. Besides the Foundation starter's own pages, the app has:

| Part                                                     | Where                                |
| -------------------------------------------------------- | ------------------------------------ |
| Wallet sign-in (Sign-In With Solana)                     | `app/api/wallet/`, `app/lib/domino/` |
| Domino's participant API for the browser                 | `app/relay/[...path]/route.ts`       |
| Quests and Leaderboard pages                             | `app/quests/`, `app/leaderboard/`    |
| The sample quests, the points ledger and the leaderboard | `domino/`                            |
| Domino project settings                                  | `relay.json`                         |

## 2. Connect your Domino project [#2-connect-your-domino-project]

```sh
npm run domino login
npm run domino whoami
```

Set `organization` and `project` in `relay.json` to the IDs `whoami` lists, then publish the quests, the **Points** ledger and its leaderboard to **Test**:

```sh
npm run domino:deploy
```

## 3. Create an app login key [#3-create-an-app-login-key]

1. In Console, open **Settings → App login keys** in **Test** and create a key with `http://localhost:3000` as its origin.
2. Under **Connected apps**, choose **Allow vouching** on the key, give a reason, and confirm. Domino then attaches the wallet each member signs in with, which the quests read. This needs an organization admin with **Publish** permission.
3. Copy `.env.example` to `.env.local` and fill in the Domino variables:

| Variable               | Value                                                                                                          |
| ---------------------- | -------------------------------------------------------------------------------------------------------------- |
| `DOMINO_APP_LOGIN_KEY` | The app login key, starting `di_`                                                                              |
| `DOMINO_APP_ORIGIN`    | The app's exact address, the one the key names. Leave it empty for `http://localhost:3000` under `npm run dev` |
| `IRON_SESSION_SECRET`  | 32 or more random characters, such as the output of `openssl rand -base64 32`. Required in production          |

> [!NOTE] Each address needs its own key
> A key for `http://localhost:3000` refuses the app on another port or address. For a hosted app, create a **Live** key for its HTTPS address and set `DOMINO_APP_ORIGIN` to it. [Develop on localhost](/docs/build/self-hosted-wallet-sign-in#develop-on-localhost) lists the rules.

## 4. Complete the quests [#4-complete-the-quests]

1. Run `npm run dev` and open `http://localhost:3000/quests`.
2. Connect your wallet from the header and choose **Sign in with Solana**.
3. For **Hold devnet USDC**, get devnet USDC for the same wallet from [Circle's faucet](https://faucet.circle.com) (choose Solana Devnet), then press **Check**. It pays once the wallet holds 1 USDC.
4. For **Post a memo on devnet**, open the home page, pick **devnet** in the header, and use **Add memo**. Then press **Check** on the quest.

Each quest pays 100 points, which show on **Quests** and on **Leaderboard**. Domino counts a devnet transaction once it is finalized, about 13 seconds after it lands, so a check right after a transaction may ask you to try again. For devnet SOL to pay fees, use **Airdrop 1 SOL** on the home page or [faucet.solana.com](https://faucet.solana.com).

> [!DEV] How the pieces fit
> The browser asks the wallet to sign a Sign-In With Solana message, through the wallet's `solana:signIn` feature when it has one and as a plain signed message otherwise. The verify route checks it with `verifyWalletSignIn` and keeps the wallet in an `iron-session` cookie, as [wallet sign-in in your own Next.js app](/docs/build/self-hosted-wallet-sign-in) describes. The `/relay` route is `createParticipantBackend`; its `authenticate` returns the wallet as the member's subject and vouches for it. **Hold devnet USDC** calls `ctx.wallet.balance()` with Solana devnet as the chain; **Post a memo on devnet** calls `ctx.wallet.transactions()` for the SPL Memo program on devnet and counts only transactions the wallet signed, as in [check on-chain actions on Solana](/docs/build/wallets#check-on-chain-actions-on-solana).

## Add your own quests [#add-your-own-quests]

Add quest files under `domino/quests/` and publish them with `npm run domino:deploy`. To reward calls to your own program, deploy it to devnet and set it as the **Program** of **Post a memo on devnet**, in the quest file or in Console. `npm run domino agents install` adds Domino's guide for coding agents.

## Where next [#where-next]

- [Build on Solana](/docs/build/solana) — Every Solana guide in one place, and how to move from devnet to mainnet.
- [Wallets](/docs/build/wallets) — every onchain check a quest can make: balances, NFTs and Solana program calls, on mainnet and devnet.
- [Wallet sign-in in your own Next.js app](/docs/build/self-hosted-wallet-sign-in) — the sign-in this app uses, and paying prizes to members' wallets.
- [Leaderboards](/docs/build/leaderboards) — boards, seasons and payout lists.