A modern cryptocurrency market dashboard for exploring real-time market data and insights. Built with Next.js 16, TypeScript, shadcn/ui, and powered by the CoinGecko API.
See 🏗️ Architecture
- Node.js 20+
- npm or yarn
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build| Category | Technologies |
|---|---|
| Framework | Next.js, React |
| Language | TypeScript |
| Styling | Tailwind CSS, shadcn/ui, Radix UI |
| State | TanStack Query |
| Charts | Recharts |
| Testing | Vitest, Testing Library |
| Tools | ESLint, Prettier |
- 🏗️ Architecture - System design, data flow, and migration guide
- 🔌 API Reference - CoinGecko integration and API functions
- 🤖 AI Integration - AI-readiness and extension points
- 🧪 Testing - Test commands and coverage
- 🤝 Contributing - Development setup and workflow
This project was upgraded from ChakraUI to the modern stack of Next.js 16 with shadcn/ui components, providing:
- Better performance with React Server Components
- More flexible styling with Tailwind CSS
- Improved accessibility with Radix UI primitives
- Type-safe component APIs
- Better developer experience with modern tooling
If you need client-side features like CoinGecko search, see AI_INTEGRATION.md for adding API routes.
- 📊 Market data visualization with real-time API integration
- 🎨 Modern UI with shadcn/ui components
- 🌙 Dark/light theme support
- 📱 Responsive design
- ♿ Accessible components (Radix UI)
- ⚡ Fast performance with Next.js 16
- 🔧 Type-safe with TypeScript
- 🔄 Automatic API fallback to mock data
To update AI agent skills: npx agent-skills add vercel-labs/agent-skills --skill vercel-composition-patterns
Full docs: https://vercel.com/docs/agent-resources/skills
This project is an independent project inspired by thunderhead-labs/hyperliquid-stats-web, which is licensed under the MIT License.
This repository does not claim to be official or affiliated.