For the Badge

Badges for badges' sake.

🌐 Live Site: forthebadge.com

Features

• 🎨 Custom Badge Creator - Design badges with custom text, colors, and icons
• 📦 Pre-made Badges - Browse a library of ready-to-use badges
• 🏆 Developer Awards - Earn and display achievement badges
• 👤 User Accounts - Save and manage your badge collections
• 🔗 Easy Sharing - Copy badge URLs or download as images

Tech Stack

• Framework: Nuxt 4 (Vue 3)
• Deployment: Cloudflare Workers via NuxtHub
• Database: Cloudflare D1 (SQLite)
• KV Storage: Cloudflare KV
• ORM: Drizzle ORM
• Auth: nuxt-auth-utils
• Security: nuxt-security

Getting Started

Prerequisites

• Node.js 22+
• Yarn (via Corepack)
• Wrangler CLI (for Cloudflare deployment)

Installation

# Enable Corepack for Yarn
corepack enable

# Clone the repository
git clone https://github.com/forthebadge/for-the-badge.git
cd for-the-badge

# Install dependencies
yarn install

# Copy environment variables
cp .env.example .env
# Edit .env with your values

Development

# Start development server
yarn dev

The app will be available at http://localhost:3000.

Building

# Build for production
yarn build

# Preview production build locally
yarn preview

Configuration

Environment Variables

See .env.example for all available configuration options.

Required variables:

• NUXT_SESSION_PASSWORD - Session encryption password
• PASSWORD_PEPPER - Additional password hashing security
• ACCOUNT_HMAC_SECRET - HMAC secret for account operations
• BADGE_ENCRYPTION_KEY - Encryption key for badge data
• REFERRAL_SQIDS_ALPHABET - Alphabet for generating referral IDs

Cloudflare Setup

1. Create a D1 database:

   wrangler d1 create forthebadge
   

2. Create a KV namespace:

   wrangler kv:namespace create KV
   

3. Update wrangler.jsonc with your database and KV IDs

4. Set secrets:

   wrangler secret put NUXT_SESSION_PASSWORD
   wrangler secret put PASSWORD_PEPPER
   wrangler secret put ACCOUNT_HMAC_SECRET
   wrangler secret put BADGE_ENCRYPTION_KEY
   wrangler secret put REFERRAL_SQIDS_ALPHABET
   

Scripts

Command	Description
yarn dev	Start development server
yarn build	Build for production
yarn preview	Preview production build
yarn test	Run tests
yarn test:coverage	Run tests with coverage
yarn db:generate	Generate database migrations
yarn security:check	Run security audits

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Security

For security concerns, please see SECURITY.md.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you find For the Badge useful, consider supporting us on Open Collective.

Acknowledgments

• Original For the Badge concept
• All our contributors
• The Nuxt and Cloudflare communities