Currency Converter

Currency converter with live rates and historical trend charts for 150+ currencies built front-end-only with React and Vite.

React · TypeScript · Tailwind CSS · Recharts · Cloudflare Pages Visit ↗ View code ↗
Ebenezer Afonja Claude

Ebenezer Afonja & Claude

Currency Converter

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

View Next

Blue Sky Nigeria

Blue Sky Nigeria

A calm, mobile-first weather app for all 36 states of Nigeria and the FCT, leading with the rainfall and season story, wet season, dry season, the August break, and harmattan, backed by real monthly rainfall climatology.
Astro · Preact · TypeScript · Tailwind CSS · Cloudflare Pages
Waypoint

Waypoint

A multi-route bus ticket booking platform, search a route and date, pick a seat, check out, and manage bookings from an account.
Cloudflare Pages · Cloudflare Workers · D1 · Vanilla JavaScript