Currency Converter
Currency converter with live rates and historical trend charts for 150+ currencies built front-end-only with React and Vite.
Ebenezer Afonja & Claude
A currency converter built for how people actually check rates: pick two currencies, type an amount, and the answer is right there, large and unmissable. It covers 150+ fiat and crypto currencies and opens on US Dollar to Nigerian Naira, with one-tap chips for the other Naira pairs people check most (GBP, EUR, CNY).
What it does
The converter is the whole first screen: an amount field with live thousands separators, two searchable currency pickers with country flags, a swap button, and the converted result with the unit rate and a “rates as of” date under it. Tap “Show trend” and a chart unfolds showing how the pair has moved over 7, 30, or 90 days, with the percentage change colored and arrowed by direction. Star any pair and it sticks around as a favourite chip, persisted in localStorage, so your usual conversions are one tap away next visit.
Fiat amounts round to two decimals; crypto rates like BTC switch to significant digits automatically so tiny values stay readable instead of collapsing to zero.
How it’s built
There is no backend and no API key. Rates come from the free open fawazahmed0 exchange API on the jsDelivr CDN, and every fetch has an automatic fallback to the API’s Cloudflare Pages mirror, so a CDN hiccup never blanks the screen; a failed load shows a friendly retry state instead. Historical charts would naively cost 90 requests, so the app samples the range (daily for 7D, every third day for 30D, weekly for 90D), fires the requests in parallel, and caches whole responses keyed by base currency and date, which means one fetch serves every target currency and switching timeframes is instant on revisit.
The chart library is code-split into its own lazy chunk, so the initial page stays light and Recharts only downloads if you actually open the trend. Flags are served as images rather than emoji because Windows renders flag emoji as plain letters.
Technology Stack
- Frontend: React + TypeScript on Vite
- Styling: Tailwind CSS v4
- Charts: Recharts
- Hosting: Cloudflare Pages, auto-deploys on every push
- Data: fawazahmed0 exchange API (jsDelivr, with pages.dev mirror fallback)
Repository: github.com/47QVA/currency-converter