Deploy the App

Clone the Starter

The Venue Starter is a white-label Next.js 15 app pre-configured to work with OddMaki. It includes market browsing, trading (limit, market, and batch orders), market creation (binary, groups, and Pyth price markets), UMA resolution flows, access control management, a leaderboard, trader profiles, and a live theme editor.

git clone https://github.com/oddmaki/venue-starter.git my-venue
cd my-venue

Configure Environment Variables

Copy the example file and fill in your values:

cp .env.local.example .env.local

Required:

# Your venue ID from the createVenue() step
NEXT_PUBLIC_VENUE_ID=1

# OddMaki subgraph endpoint (see protocol/contracts for URLs)
NEXT_PUBLIC_SUBGRAPH_URL=https://api.studio.thegraph.com/query/…/oddmaki/version/latest

Optional:

# Display name shown in the UI
NEXT_PUBLIC_VENUE_NAME="My Prediction Market"

# Auth provider: "rainbowkit" (default, free) or "privy" (consumer-friendly, paid at scale)
NEXT_PUBLIC_AUTH_PROVIDER=rainbowkit
# NEXT_PUBLIC_PRIVY_APP_ID=your-privy-app-id   # required if AUTH_PROVIDER=privy

# Feature flags
NEXT_PUBLIC_ENABLE_MARKET_CREATION=true         # show market creation UI
NEXT_PUBLIC_ENABLE_THEME_EDITOR=true            # enable /admin/theme

# IPFS (optional — for uploading market images and metadata)
PINATA_JWT=your-pinata-jwt
NEXT_PUBLIC_IPFS_GATEWAY=https://gateway.pinata.cloud/ipfs/

The starter defaults to Base Sepolia for testing. For Base mainnet, ensure your venue was created there and the subgraph URL points at the mainnet indexer.

Run Locally

pnpm install
pnpm dev

Open http://localhost:3000. You should see your venue's market grid. Connect a wallet and verify that your venue name displays correctly.

Customize Branding

Edit theme.config.json — two colors are enough to generate a full design system:

{
  "brand": {
    "primary": "#00F0FF",
    "secondary": "#FF00E5"
  }
}

The starter auto-generates 10-shade scales, surface colors, and semantic tokens from these two colors. With NEXT_PUBLIC_ENABLE_THEME_EDITOR=true, visit /admin/theme for a live preview editor that exports a ready-to-commit theme.config.json. See Branding for details.

Deploy to Vercel

# Install Vercel CLI if you haven't
pnpm add -g vercel

# Deploy
vercel

Set your environment variables in the Vercel dashboard (Settings → Environment Variables) and redeploy. Any Next.js-compatible platform (Netlify, Railway, self-hosted) works too.

Architecture Note

The app talks directly to the blockchain (via RPC) and the subgraph (via GraphQL). There is no backend server. This means:

• No infrastructure to maintain — the app is a Next.js frontend with client-side blockchain calls and a single optional IPFS upload route
• No API keys to manage in production — data comes from the public subgraph and on-chain state
• No single point of failure — if your hosting goes down, users can still interact with the contracts directly

Real-time updates come from a WebSocket listener that subscribes to Diamond and CTF events and invalidates the relevant TanStack Query caches.

Next Step

Your venue is on-chain and your app is deployed. Let's create your first market →