Frontend Overview

The Rugdrome frontend is a Next.js 13 application using the App Router. It provides a web interface for swapping, providing liquidity, voting, vesting, and claiming rewards.

Tech Stack

• Framework: Next.js 13 with App Router
• Styling: TailwindCSS + shadcn/ui
• Wallet Connection: wagmi + RainbowKit / AppKit
• State: Zustand
• Blockchain: viem / ethers.js
• Build Target: Static export for Cloudflare Pages

Project Structure

frontend/
├── src/
│   ├── app/          # Next.js routes and layouts
│   ├── components/   # Shared UI components
│   ├── hooks/        # Custom React hooks
│   ├── lib/          # Utilities, ABIs, and config
│   ├── store/        # Zustand stores
│   └── types/        # TypeScript types
├── public/           # Static assets
└── package.json

Routes

Route	Purpose
/	Landing / protocol overview
/swap	Token swaps
/liquidity	Add, remove, and zap liquidity
/vote	Vote for gauges
/vest	Lock RUGD into veNFTs
/rewards	Claim rewards and bribes
/bribe	Add bribes to gauges
/whitelist	Token whitelist management
/faucet	Testnet token faucet
/legal	Risk and legal disclosures

SEO

Every route has a layout.tsx with tailored metadata including:

• Open Graph tags
• Twitter cards
• Canonical URLs
• JSON-LD structured data on the home page

Public files like robots.txt, sitemap.xml, and llms.txt are also included for search engines and AI agents.

Configuration

Key frontend configuration files:

• frontend/next.config.js — Next.js and static export settings.
• frontend/tailwind.config.ts — Tailwind theme and design tokens.
• frontend/src/lib/wagmi.ts — Wallet client and chain configuration.
• frontend/src/lib/contracts.ts — Deployed contract addresses.

Build & Deploy

cd frontend
npm install
npm run build

The output is configured for Cloudflare Pages with the project name rugdrome.