87 lines (63 loc) · 2.39 KB

SLERF Token Dashboard - Mini Game

A production-ready Next.js 14 frontend featuring a mini cartoon game UX for the SLERF token dashboard.

Features

🎮 Interactive Coin Game: Click the animated gold coin 5 times to unlock the dashboard
📊 Live Trading Chart: Embedded DEXTools chart for SLERF token on Base chain
🎨 Beautiful Animations: Smooth Tailwind CSS animations and particle effects
📱 Responsive Design: Works perfectly on desktop, tablet, and mobile
♿ Accessibility: Full keyboard navigation and screen reader support
🚀 Production Ready: Optimized for performance and SEO

Tech Stack

Framework: Next.js 14 with App Router
Styling: Tailwind CSS with custom animations
Language: TypeScript
Icons: Lucide React
Deployment: Vercel-ready

Getting Started

Install dependencies: ```bash npm install ```
Run development server: ```bash npm run dev ```
Build for production: ```bash npm run build npm start ```

Game Mechanics

Landing Page: Users see an animated gold coin button
Click Counter: Each click increments the counter with visual feedback
Unlock Condition: After 5 clicks, the dashboard is unlocked
Dashboard: Shows live SLERF token chart from DEXTools
Play Again: Reset button to restart the game

Token Information

Token: SLERF
Contract: 0x233df63325933fa3f2dac8e695cd84bb2f91ab07
Chain: Base
Chart Provider: DEXTools

Accessibility Features

Keyboard navigation (Space bar to click coin)
ARIA labels and descriptions
Screen reader friendly
Focus indicators
Semantic HTML structure

Future Integration Ready

The codebase is prepared for:

🔗 Wallet Connect: Easy integration with Web3 wallets
🔌 Backend APIs: Structured for API integration
📈 Real-time Data: WebSocket support ready
🎯 Analytics: Event tracking prepared

Performance Optimizations

Code splitting with Next.js App Router
Optimized images and assets
Minimal bundle size
Production-ready configurations
SEO optimized

Deployment

Deploy instantly to Vercel:

License

MIT License - feel free to use for your projects!