A modern, real-time cryptocurrency tracking application built with Next.js 15, featuring live price data, interactive charts, and crypto news.
- Real-time cryptocurrency prices from CoinGecko API
- Top cryptocurrencies by market cap
- 24-hour price changes and market data
- Responsive grid layout with search and sorting
- Historical price data visualization with Recharts
- Multiple time ranges (24H, 7D, 30D, 90D)
- Line and area chart types
- Responsive chart design
- Latest cryptocurrency news
- Category-based filtering (Bitcoin, Ethereum, DeFi, NFT, Regulation)
- Real-time updates
- Responsive card layout
- Dark/Light mode toggle
- Responsive design for all devices
- Smooth animations with Framer Motion
- shadcn/ui component library
- TailwindCSS for styling
- Server-side rate limiting
- Intelligent caching (client & server-side)
- API fallback mechanism
- Error isolation and graceful degradation
- SWR for data fetching and caching
- Next.js 15 - React framework with App Router
- TypeScript - Type safety and better DX
- TailwindCSS - Utility-first CSS framework
- shadcn/ui - Accessible component library
- Framer Motion - Smooth animations
- Recharts - Data visualization
- Lucide React - Beautiful icons
- CoinGecko API - Cryptocurrency data
- SWR - Data fetching and caching
- Axios - HTTP client
- Next.js API Routes - Proxy and caching
- Prettier - Code formatting (printWidth: 120)
- ESLint - Code linting
- TypeScript - Type checking
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/crypto-tracker.git cd crypto-tracker -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
npm run build
npm startcrypto-tracker/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ │ └── crypto/ # CoinGecko proxy
│ │ ├── cryptocurrencies/ # Cryptocurrencies page
│ │ ├── news/ # News page
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home page
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── crypto-list.tsx # Cryptocurrency list
│ │ ├── price-chart.tsx # Price charts
│ │ ├── news-feed.tsx # News feed
│ │ └── navigation.tsx # Navigation bar
│ └── lib/ # Utilities and configurations
│ ├── api.ts # API client and functions
│ ├── hooks.ts # Custom React hooks
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── .prettierrc # Prettier configuration
├── tailwind.config.ts # TailwindCSS configuration
├── next.config.ts # Next.js configuration
└── package.json # Dependencies and scripts
# Development
npm run dev # Start dev server with formatting
npm run build # Build for production with formatting
npm start # Start production server
# Code Quality
npm run format # Format code with Prettier
npm run format:check # Check formatting without changes
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint errors- Print Width: 120 characters
- Single Quotes: Enabled
- Semicolons: Enabled
- Trailing Commas: ES5 style
- Rate Limiting: 2-second intervals between API calls
- Caching: 60-second server-side cache
- Fallback: Automatic proxy route fallback
- Error Handling: Graceful degradation with cached data
The application implements intelligent rate limiting to prevent API overload:
- Server-side rate limiting (2-second intervals)
- Client-side rate limiting (3-second intervals)
- Automatic fallback to cached data on rate limits
- Proper HTTP status codes (429) with retry instructions
Multi-layer caching system for optimal performance:
- Server-side cache (1-minute duration)
- Client-side cache (60-second duration)
- Cache headers for browser caching
- Stale-while-revalidate strategy
Robust error handling prevents cascading failures:
- Each API call is independent
- Fallback mechanisms for failed requests
- Graceful degradation with cached data
- User-friendly error messages
Mobile-first approach with adaptive layouts:
- Grid layouts that adapt to screen size
- Touch-friendly interactions
- Optimized for all devices
- Dark/light mode support
- Base URL:
https://api.coingecko.com/api/v3 - Rate Limits: Free tier limitations handled gracefully
- Endpoints Used:
/coins/markets- Market data/coins/{id}/market_chart- Price history/coins/{id}- Detailed coin information
- Path:
/api/crypto - Features: Rate limiting, caching, error handling
- Benefits: CORS handling, request optimization
- Utility-first CSS framework
- Custom design system with shadcn/ui
- Dark/light mode support
- Responsive breakpoints
- shadcn/ui: Accessible, customizable components
- Radix UI: Headless UI primitives
- Lucide React: Consistent icon system
- Mobile: Optimized touch interactions
- Tablet: Adaptive grid layouts
- Desktop: Full feature experience
- Breakpoints: sm, md, lg, xl, 2xl
- API Errors: Graceful fallbacks and user notifications
- Network Issues: Offline detection and retry mechanisms
- Rate Limiting: Intelligent backoff and cached responses
- Validation: Input validation and error boundaries
- Code Splitting: Automatic with Next.js
- Image Optimization: Next.js Image component
- Caching: Multi-layer caching strategy
- Bundle Analysis: Optimized bundle sizes
- Lazy Loading: Component and data lazy loading
- 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 the existing code style (Prettier configured)
- Write TypeScript for type safety
- Add proper error handling
- Test on multiple screen sizes
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- CoinGecko for providing the cryptocurrency API
- shadcn/ui for the component library
- TailwindCSS for the utility-first CSS framework
- Next.js for the React framework
- Recharts for the chart library
If you have any questions or need help, please:
- Open an issue on GitHub
- Check the documentation
- Review the code comments
Made with ❤️ and lots of ☕
Built with Next.js 15, TypeScript, and TailwindCSS