CryptoDash

A real-time cryptocurrency dashboard built with React and the CoinStats API. Clean dark UI, live market data, interactive price charts, and the latest crypto news — all in a single page app.

Features

• Global market stats — Total market cap, 24h volume, BTC dominance, and altcoin dominance with % change indicators
• Top 50 coins table — Sortable by any column (price, market cap, 1h/24h/7d change), with real-time search
• Interactive price charts — Click any coin to expand an area chart with period selector (1D, 1W, 1M, 3M, 6M, 1Y)
• Latest crypto news — 6 most recent articles with source, timestamp, and thumbnail
• Dark theme with animated skeleton loading states

Tech Stack

• React 19 + Vite 5
• Tailwind CSS v4
• Recharts for price charts
• CoinStats API for all market data

Getting Started

1. Clone the repo

git clone https://github.com/Kevinelectronics/cryptodashboard.git
cd cryptodashboard
npm install

2. Add your API key

Get a free key at portal.coinstats.app — no credit card required.

Create a .env file in the root:

VITE_COINSTATS_API_KEY=your_api_key_here

3. Run

npm run dev

Open http://localhost:5173.

Project Structure

src/
├── api/
│   └── coinstats.js        # All API calls (coins, markets, charts, news)
├── hooks/
│   └── useCoinstats.js     # Generic data fetching hook with cleanup
├── components/
│   ├── Navbar.jsx           # Top bar with live indicator
│   ├── GlobalStats.jsx      # 4-card market overview
│   ├── CoinTable.jsx        # Sortable, searchable coins table
│   ├── CoinChart.jsx        # Recharts area chart with period selector
│   └── NewsSection.jsx      # Latest news grid
└── App.jsx

API Endpoints Used

Endpoint	Description
GET /coins?limit=50	Top cryptocurrencies with OHLCV and price changes
GET /markets	Global market stats (market cap, volume, BTC dominance)
GET /coins/{id}/charts?period=1w	Historical price data for a specific coin
GET /news?limit=6	Latest crypto news articles

API Key Security Note

The API key is stored in .env with the VITE_ prefix, which means it is included in the client-side bundle. This is fine for personal use and local development.

For a production deployment, proxy the API calls through a backend (Express, Cloudflare Workers, Next.js API routes) so the key is never exposed in the browser.

License

MIT