CryptoDash is a cryptocurrency dashboard built with Next.js, TypeScript, Tailwind CSS, shadcn/ui, Recharts, and the CoinGecko API.
The application allows users to track cryptocurrency prices, market capitalization, 24h price variation, market ranking, favorite assets, and interactive price charts.
- Real-time cryptocurrency data from CoinGecko API
- Search cryptocurrencies by name or symbol
- Favorite cryptocurrencies with LocalStorage persistence
- Light and dark theme support
- Responsive cryptocurrency cards
- Mini price charts on each card
- Detailed 7-day price chart modal
- Market cap and ranking display
- Responsive layout for desktop and mobile
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Recharts
- CoinGecko API
- next-themes
- Lucide React
- Vercel
The dashboard displays cryptocurrency data including name, symbol, current price, market cap, market rank, 24h price variation, and 7-day sparkline data.
Users can search cryptocurrencies by name or symbol. The search input uses a debounce to reduce unnecessary API calls.
Users can mark cryptocurrencies as favorites. Favorite assets are stored in LocalStorage and persist after page reload.
Each cryptocurrency card includes a mini chart. Users can also open a modal with a detailed 7-day price chart.
The application supports light and dark mode using next-themes.
- Node.js
- npm
git clone https://github.com/gamaalice/cryptodashbord.git
cd cryptodashbord
npm installnpm run devOpen:
http://localhost:3000npm run buildnpm startThis project uses the public CoinGecko API to retrieve cryptocurrency market data.
Main endpoint used:
https://api.coingecko.com/api/v3/coins/marketsThe application fetches market data with:
- USD currency
- Market cap ordering
- Sparkline data enabled
- 24h price change percentage
The project is deployed on Vercel.
Developed by Alice Gama.
LinkedIn: Alice Gama
Portfolio: Portfolio Website
GitHub: gamaalice