A production-ready Next.js 14 frontend featuring a mini cartoon game UX for the SLERF token dashboard.
- 🎮 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
- Framework: Next.js 14 with App Router
- Styling: Tailwind CSS with custom animations
- Language: TypeScript
- Icons: Lucide React
- Deployment: Vercel-ready
-
Install dependencies: ```bash npm install ```
-
Run development server: ```bash npm run dev ```
-
Build for production: ```bash npm run build npm start ```
- 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: SLERF
- Contract:
0x233df63325933fa3f2dac8e695cd84bb2f91ab07 - Chain: Base
- Chart Provider: DEXTools
- Keyboard navigation (Space bar to click coin)
- ARIA labels and descriptions
- Screen reader friendly
- Focus indicators
- Semantic HTML structure
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
- Code splitting with Next.js App Router
- Optimized images and assets
- Minimal bundle size
- Production-ready configurations
- SEO optimized
Deploy instantly to Vercel:
MIT License - feel free to use for your projects!