A modern, feature-rich cryptocurrency dashboard built with Next.js 14, TypeScript, and Tailwind CSS. Track real-time cryptocurrency prices, market trends, and global statistics with an intuitive and responsive interface.
- Real-time Cryptocurrency Data: Live prices, market caps, and 24h volume tracking
- Advanced Search: Filter and search through 100+ cryptocurrencies
- Detailed Coin Analysis: Comprehensive statistics, historical data, and price charts
- Global Market Overview: Total market cap, 24h volume, and market dominance
- Trending Coins: Discover trending cryptocurrencies in real-time
- Price Charts: Interactive historical price charts with multiple timeframes
- Dark/Light Mode: Seamless theme switching with system preference detection
- Progressive Web App (PWA): Installable on mobile devices with offline support
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- TypeScript: Type-safe development with full TypeScript support
- Modern UI/UX: Built with Radix UI components and Tailwind CSS
- Authentication: NextAuth.js integration with Google OAuth support
- State Management: Zustand for efficient client-side state management
- API Integration: CoinRanking API for comprehensive cryptocurrency data
- Code Quality: ESLint, Prettier, and Husky pre-commit hooks
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS + CSS Modules
- UI Components: Radix UI + Lucide React icons
- Charts: Recharts for data visualization
- State Management: Zustand
- Authentication: NextAuth.js
- Package Manager: npm
- Code Quality: ESLint + Prettier
- Git Hooks: Husky + lint-staged
- PWA: next-pwa
- Loading: nextjs-toploader
- Notifications: Sonner (toast notifications)
- Crypto Data: CoinRanking API
- Authentication: Google OAuth via NextAuth.js
- News: Crypto news integration
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/bhanurx100/crypto-dashboard.git cd crypto-dashboard -
Install dependencies
npm install
-
Environment Setup
cp .env.local.sample .env.local
-
Configure Environment Variables Edit
.env.localand add your API keys:# CoinRanking API NEXT_PUBLIC_COINGECKO_API_KEY=your_coinranking_api_key # Google OAuth (Optional) GOOGLE_ID=your_google_client_id GOOGLE_SECRET=your_google_client_secret NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your_nextauth_secret
-
Start Development Server
npm run dev
-
Open your browser Navigate to http://localhost:3000
-
CoinRanking API
- Sign up at CoinRanking
- Get your API key from the dashboard
- Add it to
NEXT_PUBLIC_COINGECKO_API_KEYin.env.local
-
Google OAuth (Optional)
- Go to Google Cloud Console
- Create a new project or select existing one
- Enable Google+ API
- Create OAuth 2.0 credentials
- Add the credentials to your environment variables
-
Dashboard Overview
- View global cryptocurrency market statistics
- Track top 10 cryptocurrencies by market cap
- Discover trending coins
-
Cryptocurrency Explorer
- Browse 100+ cryptocurrencies
- Search and filter by name
- View detailed statistics for each coin
-
Coin Details
- Comprehensive coin statistics
- Historical price charts
- Market analysis and trends
- Official links and resources
-
Theme Customization
- Toggle between light and dark modes
- System preference detection
- Persistent theme selection
crypto-dashboard/
├── public/ # Static assets and PWA files
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── api/ # API routes
│ │ ├── coin/ # Coin-specific pages
│ │ └── explore/ # Cryptocurrency explorer
│ ├── components/ # Reusable React components
│ │ ├── dashboard/ # Dashboard components
│ │ ├── ui/ # Base UI components
│ │ └── ... # Other feature components
│ ├── services/ # API service configurations
│ ├── store/ # State management
│ ├── lib/ # Utility functions
│ └── container/ # Layout containers
├── .husky/ # Git hooks
├── .vscode/ # VS Code settings
└── ... # Configuration files
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run prepare # Setup Husky hooks- Create components in
src/components/ - Add API endpoints in
src/services/ - Update state management in
src/store/ - Add routes in
src/app/
- Modify
tailwind.config.tsfor theme customization - Update
src/app/globals.cssfor global styles - Use CSS Modules for component-specific styles
/coins- List of cryptocurrencies/coin/{id}- Coin details/coin/{id}/history- Historical price data/stats- Global market statistics
- Free tier: 100 requests per day
- Consider upgrading for production use
- Environment variables for sensitive data
- NextAuth.js for secure authentication
- API key protection
- CORS configuration
- Content Security Policy headers
- Connect your GitHub repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on push to main branch
npm run build
npm run startEnsure environment variables are properly configured in your hosting platform.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use ESLint and Prettier configurations
- Write meaningful commit messages
- Test your changes thoroughly
This project is licensed under the MIT License - see the LICENSE file for details.
- CoinRanking for cryptocurrency data API
- Next.js for the React framework
- Tailwind CSS for styling
- Radix UI for accessible components
- Recharts for data visualization
If you have any questions or need support, please:
- Open an issue on GitHub
- Check the documentation
- Review existing issues and discussions
Built with ❤️ by Bhanu Prakash