Tech Stack

Frontend

Technology	Purpose	Version
React	UI framework	18.x
TypeScript	Type safety	5.x
Vite	Build tool / dev server	5.x
Tailwind CSS	Utility-first styling	3.x
wagmi	React hooks for Ethereum	2.x
viem	TypeScript Ethereum library	2.x
@tanstack/react-query	Data fetching/caching	5.x

Key Frontend Patterns

• Glass morphism UI: backdrop-blur-md bg-white/30 panels
• Context-based state: AppContext for global app state
• localStorage caching: Offline-first with API sync
• SIWE authentication: Sign-In with Ethereum

Backend (API)

Technology	Purpose
Vercel Functions	Serverless API endpoints
Node.js 20+	Runtime (ESM modules)
jose	JWT signing/verification (HS256)
Vercel KV	Redis persistence (Upstash)

API Structure

api/
├── _lib/           # Shared utilities (not routes)
│   ├── auth.js     # SIWE + JWT helpers
│   ├── cors.js     # CORS middleware
│   └── store.js    # Data persistence layer
├── auth/
│   ├── nonce.js    # GET nonce for SIWE
│   ├── verify.js   # POST verify signature → JWT
│   └── beta.js     # POST beta access validation
├── profile/
│   └── [address].js # GET/PUT user profiles
├── quests.js       # GET/POST/PATCH quests
├── mail.js         # GET/POST/PATCH/DELETE mail
├── leaderboard.js  # GET leaderboard
├── reputation.js   # GET reputation
├── community-dao.js # GET/POST/PUT DAO data
├── resolve.js      # GET ENS resolution
└── github/
    └── token.js    # POST OAuth code exchange

Persistence

Production (Vercel KV)

• Provider: Upstash Redis
• Encryption: AES-256-GCM for mail (at-rest)
• Keys:
  • profile:{address} — User profile object
  • quests — Array of all quests
  • leaderboard — Leaderboard data
  • mail:{address} — User's mailbox (encrypted)
  • mail:broadcasts — Platform-wide announcements
  • communityDao — DAO state and FQPs

Development (Local)

• Seed files: api/seed/*.json
• In-memory cache: Module-level variables
• Writes: Persisted back to seed files

Blockchain

Network	Chain ID	Explorer
Base Sepolia (testnet)	84532	sepolia.basescan.org
Base (mainnet)	8453	basescan.org

Environment Toggle

# .env.local
VITE_NETWORK=mainnet  # or omit for testnet

Smart Contracts (Future)

Contract	Purpose
Quest.sol	Quest escrow, completion, disputes
FetchToken.sol	Protocol token (if applicable)
GenesisNFT.sol	DAO membership NFTs

External Services

Service	Purpose
Vercel	Hosting (frontend + API)
Upstash	Redis KV storage
GitHub	OAuth for developer identity
ENS	Ethereum Name Service resolution

Development Tools

# Package manager
pnpm

# Type checking
npx tsc --noEmit

# Build
cd frontend && npx vite build

# Local API server
cd api && node dev-server.mjs