How this was built
Lumea is a portfolio demo. Every page demonstrates a specific full-stack and Web3 engineering skill. Here's the map.
Landing & marketing
Visit →- SSR + per-page SEO/OpenGraph
- Design system & motion
- Tailwind v4 tokens
Tokenomics
Visit →- Recharts data viz (donut, emission, vesting)
- Shared canonical data model
Whitepaper
Visit →- Long-form typesetting
- Server-generated PDF (pdf-lib route handler)
Genesis Sale
Visit →- Contract writes + ETH value
- On-chain whitelist gating
- Pull-based claim
- Owner admin panel
- Neon/Drizzle cache
Staking
Visit →- Approve → stake allowance flow
- Live earned() polling
- Synthetix rewards math
- Chain-time derivation
Operator Pass
Visit →- Dynamic NFT (on-chain attributes)
- Server-generated SVG from chain state
- evolve() gated on stake
- ERC-721 enumeration
Dashboard
Visit →- Seeded simulated feed
- Real cached API integration (CoinGecko)
- Portfolio aggregation
Cross-cutting engineering
- Reusable TxButton / useTx covering every state: not-connected, wrong-network, insufficient balance, approval-needed, pending, success, reverted, user-rejected
- Wallet core: wagmi v2 + viem + RainbowKit, five EVM chains configured with Sepolia active, SSR cookie hydration
- NetworkGuard one-click chain switch + WalletGate connection gating
- Context-based toast system with explorer links
- Backend via route handlers: Neon serverless Postgres + Drizzle, Zod validation, constant-time admin auth
- Accessibility: WCAG AA contrast, keyboard nav, focus rings, reduced-motion, semantic landmarks
Stack
- Next.js 16 (App Router, TS strict, Turbopack)
- Tailwind CSS v4 (CSS-first @theme)
- wagmi v2 · viem v2 · RainbowKit v2 · React Query v5
- Drizzle ORM · Neon serverless Postgres
- Recharts · pdf-lib · Solidity ^0.8.20 + OpenZeppelin v5
- Vercel · Sepolia testnet
Contracts (Sepolia)
- Etherscan ↗LumeaTokenERC-20 $LMA
- Etherscan ↗LumeaStakingSynthetix StakingRewards
- Etherscan ↗LumeaPresaleWhitelist + pull-based claim
- Etherscan ↗LumeaOperatorPassDynamic ERC-721