---
title: "Snag Template App"
description: "A production-ready Next.js + Tailwind Web3 starter template with loyalty program and user profiles designed for Web3 projects"
keywords: ["Next.js loyalty template", "Web3 Next.js starter", "loyalty app template", "Snag starter kit"]
sidebarTitle: "Template App"
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://docs.snagsolutions.io/llms.txt). Append `.md` to any page URL for its markdown version.

import AiAssistantCallout from '/snippets/ai-assistant-callout.mdx'

<AiAssistantCallout />

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](https://nextjs.org/docs) (App Router)** for modern, file-based routing
- **[Tailwind CSS](https://tailwindcss.com/docs)** for rapid styling
- **Snag Solutions SDK** for plug-and-play Web3 features

<Columns cols={1}>
  <Card title="View on GitHub" icon="github" href="https://github.com/Snag-Solutions/nextjs-template">
    Explore the codebase, star the repo, and fork to start quickly. This is the canonical template repository.
  </Card>
</Columns>

## 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:

- [Node.js](https://nodejs.org/)
- [PNPM](https://pnpm.io/)

### Installation

Clone this repository and install the dependencies:

```bash
pnpm install
```

### Environment Setup

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

```env
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**](https://admin.snagsolutions.io).

## Development

To start the development server:

```bash
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:

```bash
pnpm rules:create
```

> Tip: Make sure your loyalty currency is created first.

### Remove All Loyalty Rules

To clear all existing rules:

```bash
pnpm rules:remove
```

## Fork This Template

Want to create your own version of this template?

<Columns cols={1}>
  <Card title="Fork the Template on GitHub" icon="github" href="https://github.com/Snag-Solutions/nextjs-template">
    Create your own copy of the Next.js Template App to customize. After forking, follow the <a href="#getting-started">
     Getting Started</a>

    section above.
  </Card>
</Columns>

## Project Structure

```bash
.
├── 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
```

## Related Docs

- [Next.js App Router Docs](https://nextjs.org/docs/app/building-your-application/routing)
- [Tailwind CSS Docs](https://tailwindcss.com/docs)