Chartz

Cryptocurrency charting with customization and shareable chart links.

Features

• Markets — top 50 coins by market cap with live prices, 24h change, and 7-day sparklines
• Interactive charts — candlestick, line, and area charts powered by TradingView's lightweight-charts, with OHLC crosshair readout
• Time ranges — 1D, 7D, 1M, 3M, 1Y
• Customization — color presets (classic teal/red and a colorblind-safe blue/orange, both contrast-validated) plus free-form up/down color pickers
• Sharing — every chart view is encoded in the URL; the Share button copies a link that reproduces your exact chart

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Charts: lightweight-charts (TradingView)
• Data: CoinGecko public API, proxied through route handlers with ISR caching
• Deployment: Vercel

Getting Started

npm install
npm run dev

Open http://localhost:3000. No environment variables or API keys required — market data comes from CoinGecko's free API with server-side caching.

Scripts

npm run dev      # start dev server
npm run build    # production build
npm run start    # run production build
npm run lint     # lint

Architecture Notes

• src/lib/coingecko.ts — typed CoinGecko client; every fetch sets a revalidate window (60s for hot data, up to 15m for yearly history) so the free-tier rate limit is shared across all visitors rather than hit per-request.
• src/app/api/crypto/[id]/* — thin proxy routes the chart page fetches client-side when the user switches type or range.
• src/lib/chart-settings.ts — chart settings ⇄ URL query codec; the server page reads searchParams so shared links render with the right settings on first paint.

Deployment

Deployed on Vercel. Import firedintern/chartz from GitHub and deploy — no extra configuration needed.

License

MIT