A beautiful, modern cryptocurrency tracking application built with React, TypeScript, and Tailwind CSS. This app displays real-time cryptocurrency data including prices, market caps, volume, and performance metrics using the CoinMarketCap API.
- Real-time Data: Live cryptocurrency prices and market data
- Beautiful UI: Modern glassmorphism design with smooth animations
- Responsive Design: Works perfectly on desktop, tablet, and mobile
- Search & Filter: Find cryptocurrencies by name or symbol
- Sorting Options: Sort by market cap, price, or 24h change
- Market Overview: Total market cap, volume, and top gainers/losers
- Performance Metrics: 1h, 24h, and 7-day price changes
- Auto-refresh: Data updates every 5 minutes automatically
- Node.js (version 16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <your-repo-url> cd cryptoProject
-
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser Navigate to
http://localhost:3000to view the application
npm run build
# or
yarn buildThe built files will be in the dist directory.
- Frontend: React 18 with TypeScript
- Styling: Tailwind CSS with custom design system
- Build Tool: Vite for fast development and building
- HTTP Client: Axios for API requests
- Icons: Lucide React for beautiful icons
- State Management: React hooks for local state
- API: CoinMarketCap Sandbox API
The app uses the CoinMarketCap Sandbox API. The API key is already configured in the code:
const API_KEY = '1992a633-aae8-4ad8-b67c-13a81696ccdb'Note: This is a sandbox API key for development purposes. For production use, you should:
- Get your own API key from CoinMarketCap
- Store it in environment variables
- Update the API endpoint to the production URL
The app features a custom design system with:
- Color Palette: Custom crypto-themed colors
- Glassmorphism: Modern glass-like card effects
- Gradients: Beautiful gradient backgrounds and text
- Animations: Smooth hover effects and transitions
- Typography: Clean, readable font hierarchy
Each cryptocurrency card shows:
- Current price in USD
- 24-hour price change percentage
- Market capitalization
- 24-hour trading volume
- Circulating and total supply
- 1-hour and 7-day price changes
- Market rank
The app automatically fetches the top 100 cryptocurrencies by market cap. To change this limit, modify the limit parameter in src/services/cryptoApi.ts.
Customize the design by modifying:
tailwind.config.jsfor color schemes and animationssrc/index.cssfor global styles and custom CSS classes- Individual component files for component-specific styling
The app currently uses these CoinMarketCap endpoints:
/cryptocurrency/listings/latest- Get latest listings/cryptocurrency/quotes/latest- Get detailed quotes
- Mobile: 1 column layout
- Tablet: 2 column layout
- Desktop: 3-4 column layout
- Large Desktop: 4 column layout
- Lazy Loading: Components load only when needed
- Debounced Search: Search input is optimized for performance
- Efficient Re-renders: React.memo and useCallback for optimization
- Auto-refresh: Smart data refresh every 5 minutes
-
API Rate Limits: The sandbox API has rate limits. If you hit them, wait a few minutes and try again.
-
CORS Issues: The app is configured to work with the CoinMarketCap API. If you encounter CORS issues, check your API configuration.
-
Build Errors: Make sure you have the correct Node.js version and all dependencies are installed.
If you encounter any issues:
- Check the browser console for error messages
- Verify your internet connection
- Ensure the CoinMarketCap API is accessible
- Check that all dependencies are properly installed
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
For support or questions, please open an issue in the GitHub repository.
Happy Crypto Tracking! 🚀📈