Tech Stack

Frontend

Technology	Version	Purpose
Next.js	15.5.9	React framework with App Router
React	19.1.0	UI library
TypeScript	5.x	Type safety
TailwindCSS	4.x	Utility-first CSS
Radix UI	1.x	Accessible UI primitives
Lucide React	0.545	Icon library

Key Frontend Features

• App Router - Server and client components

• Turbopack - Fast development builds

• Custom Design System - Vibrant colors, custom fonts (Outfit, Manrope)

• Responsive Design - Mobile-first approach

• Animations - Custom keyframes for overlay effects

---

Web3 Integration

Technology	Version	Purpose
wagmi	2.17.5	React hooks for Ethereum
viem	2.37.13	TypeScript Ethereum library
RainbowKit	2.2.8	Wallet connection UI
ethers.js	6.15.0	Ethereum utilities
SIWE	3.0.0	Sign-In with Ethereum

Supported Chains

Chain	Chain ID	Network Type
Base Sepolia	84532	Testnet
Mantle Sepolia	5003	Testnet

Smart Contracts

• KubiStreamerDonation - Main donation contract

• ERC20 - Token interactions

• Yield Tokens - Auto-yield representative tokens

---

Backend

Technology	Version	Purpose
Next.js API Routes	15.5.9	REST API endpoints
Prisma	6.17.0	Database ORM
PostgreSQL	16	Primary database
Iron Session	8.0.4	Encrypted cookie sessions

Real-time Features

Technology	Version	Purpose
Pusher	5.2.0	Real-time WebSocket service
pusher-js	8.4.0	Client-side Pusher SDK

How It Works

1. Donation Event → Event Listener detects on-chain event

2. Queue Entry → Creates QueueOverlay record (PENDING)

3. Processor → Picks up queue entry, enriches data

4. Pusher Broadcast → Sends to overlay-{streamerId} channel

5. OBS Overlay → Receives and displays alert

Smart Contract Development

Core Technologies

Technology	Version	Purpose
Solidity	^0.8.20	Smart contract programming language
Foundry	Latest	Development framework & toolkit
OpenZeppelin Contracts	Latest	Battle-tested smart contract standards