Skip to main content
Using an AI coding assistant? Connect Cursor, Claude, or Copilot to Snag Docs for context-aware help. Learn how.
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

View on GitHub

Explore the codebase, star the repo, and fork to start quickly. This is the canonical template repository.

​
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 the Template on GitHub

Create your own copy of the Next.js Template App to customize. After forking, follow the Getting Startedsection 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