Crypto Tracker
Case study
Overview
A live crypto market dashboard built to demonstrate KendoReact Grid skills from a previous role. It shows the top 50 coins by market cap in a sortable, filterable data grid. Clicking any row opens a detail view with key stats and a 7-day price history chart powered by the CoinGecko public API.
The reason for building it
At Scalable I spent a lot of time binding KendoReact components to API data to build grids and charts for financial dashboards. I wanted a portfolio project that showed that work directly, rather than asking a recruiter to take my word for it.
Licensing decisions
KendoReact is split into free and commercial tiers. The Grid has a genuinely free, production-safe tier covering sorting, filtering, and paging. Charts do not; there is no free tier, and an unlicensed chart shows a page-level banner on every visit.
Rather than carry that banner on a live portfolio project, I paired the free Kendo Grid with Recharts for the price history chart. This is a realistic pattern in production codebases, where teams mix vendor and open-source tooling rather than buying every component from one supplier. The case study is honest about that decision rather than pretending Recharts was the obvious first choice.
Things I hit along the way
Vite's default TypeScript config has verbatimModuleSyntax enabled, which requires import type for type-only imports. The error surfaced in the browser console rather than the terminal, which was a good reminder to check both.
The cells.data prop on GridColumn triggers a premium feature warning in KendoReact v15. The free tier does not support per-cell custom renderers through that API. The fix was to pre-format the data in the processing step before handing it to the grid, rather than formatting inside the cell. That also simplified the column definitions.
KendoReact v15 no longer applies the k-alt class to alternating rows. Targeting it in CSS had no effect. The fix was CSS nth-child instead, which turned out to be simpler.
Recharts props only accept plain strings, not CSS custom properties. A chartTheme.ts constants file bridges that gap, with comments mapping each value back to its CSS variable so the relationship stays explicit when colours change.
Securing the API key
After adding a CoinGecko Demo API key, I noticed it was visible in the browser's Network tab. Because this is a Vite frontend app, environment variables get bundled into the client-side JavaScript at build time, so anyone inspecting the network requests could read the key.
The fix was to proxy the API calls through Netlify Functions. The frontend now calls its own /api/markets, /api/coin/:id, and /api/price-history/:id endpoints. The functions make the CoinGecko requests server-side with the key in the environment, so it never reaches the client bundle.
What's next
- Vitest unit tests for the hooks and formatters
- Allow the user to switch between more coins (currently fixed at top 50)
- Light mode and system preference support