Whether you’re building a community rewards program, a gated Web3 experience, or a gamified platform, this template will get you up and running fast — fully integrated with the Snag Solutions SDK.

The starter kit is built with:

  • Next.js (App Router) for modern, file-based routing
  • Tailwind CSS for rapid styling
  • Snag Solutions SDK for plug-and-play Web3 features

What’s Included

This template showcases a simple Web3 application with:

  • Web3 Authentication (wallet-based login)
  • Loyalty Program & Leaderboard
  • User Profile Page with wallet info and loyalty point history

Getting Started

Prerequisites

Before you start, make sure you have:

Installation

Clone this repository and install the dependencies:

pnpm install

Environment Setup

Create a .env file in the project root with the following variables:

NEXT_PUBLIC_API_KEY=your_api_key
NEXT_PUBLIC_WEBSITE_ID=your_website_uuid
NEXT_PUBLIC_ORGANIZATION_ID=your_organization_uuid
LOYALTY_CURRENCY_ID=your_loyalty_currency_id
ENABLE_TWITTER_RULES=boolean # Optional
ENABLE_TELEGRAM_RULES=boolean # Optional
RULES_COLLECTIONS='[{"address":"0x123","network":"mainnet"}]' # Optional

You can find or generate your API key and UUIDs via the Admin Dashboard.

Development

To start the development server:

pnpm dev

Visit http://localhost:3000 to see the app in action.

Setup Scripts

Add Initial Loyalty Rules

This sets up a base rule set for your website:

pnpm rules:create

Tip: Make sure your loyalty currency is created first.

Remove All Loyalty Rules

To clear all existing rules:

pnpm rules:remove

Fork This Template

Want to create your own version of this template?

➡️ Fork it here: Next.js Template App

Then follow the Getting Started section above.

Project Structure

.
├── app/                   # App Router pages
├── components/            # Reusable UI components
├── lib/                   # Utility functions and SDK integrations
├── public/                # Static assets
├── scripts/               # Loyalty setup/teardown scripts
└── .env.example           # Environment variable template