Skip to content
tanzims.
← All workCase 02 / 06

CryptoTracker

Market data dashboard

Built with
Next.js 16, React 19, Chart.js 4, Tailwind CSS +3 more ↓
Links
Live site ↗
cryptotracker-eight.vercel.app
CryptoTracker — screenshot of the live site

(01) Overview

A market dashboard for crypto, priced in Australian dollars by default. The front page reads the whole market at a glance; every coin gets a page of its own with a price chart, its range and its supply.

(02) Features

  1. 01Market overviewTotal market cap, 24-hour volume, BTC dominance and active coins, under a ticker of the top twenty.
  2. 02MoversTrending coins, top gainers and top losers, side by side above the table.
  3. 03Sortable tablePrice, 1h, 24h and 7d change, volume and market cap — every column sorts — with a seven-day sparkline per coin.
  4. 04Coin pagesA price chart over 24 hours, 7 days, 1, 3 or 12 months, with the day’s range, all-time high and low, and supply.
  5. 05AUD or USDSwitch currency in one click; the choice is remembered.
  6. 06WatchlistStar any coin to keep it on a list of its own — saved in the browser, so there is nothing to sign up for.

(03) Screens

cryptotracker-eight.vercel.app
CryptoTracker — Bitcoin: price, day range, chart and market stats
03.1Bitcoin: price, day range, chart and market stats
cryptotracker-eight.vercel.app
CryptoTracker — The market table, with seven-day sparklines
03.2The market table, with seven-day sparklines
cryptotracker-eight.vercel.app
CryptoTracker — A watchlist kept in the browser
03.3A watchlist kept in the browser

(04) On a phone

Same app, smaller screen.

Captured from the live site at 390 pixels wide — the width of most phones in a hand.

CryptoTracker on a phone — Market overview
Market overview
CryptoTracker on a phone — A coin page
A coin page

(05) Stack

Seven tools, and the job each one does here.

  • FrameworkNext.js16Pages Router, with API routes in front of CoinGecko
  • UIReact19Client-side refresh every minute
  • UIChart.js4Price charts drawn on canvas
  • StylingTailwind CSSThe dark dashboard interface
  • DatalocalStorageWatchlist and currency, with no account
  • ServicesCoinGecko APIMarkets, global stats, trending, search and price history
  • HostingVercelProduction hosting

(06) Under the hood

  1. 01

    The browser never talks to CoinGecko. Six API routes — markets, global, trending, search, coin and chart — sit in front of it, so upstream keys and rate limits stay on the server.

  2. 02

    Prices refresh every minute without a reload, and the page says so above the table.

  3. 03

    Price history is drawn on canvas with Chart.js; the range buttons swap the window without leaving the page.

  4. 04

    Pages ship as static shells and fetch their numbers from those API routes in the browser, so the HTML can be cached while the prices stay live.

Visit the live site

Next case

One Piece Archive