Architecture

Overview

FX Checker is intentionally frontend-first: no database, no backend beyond Next.js server functions. Every rate comes from the public Frankfurter API (ECB reference data), and user data lives in the browser. The engineering lives in three cooperating layers.

The Layers

Request flow

The Two-Way Conversion Protocol

The converter's challenge is avoiding feedback: both fields derive from the same rate, so naive recalculation would ping-pong forever. Two mechanisms cooperate:

• Typing derives the counterpart field directly on each keystroke — synchronous multiplication or division by the current rate. The field you're editing is never touched.
• Pair changes (picking a currency) go through an editingField + derivePending protocol in the store: setting a base/quote marks a derivation as pending; one guarded effect converts once — in the direction of editingField — when the fresh rate arrives, then clears the flag.
• Focusing the other field converts the current value exactly once from the other direction before flipping editingField, so the next keystroke divides instead of multiplies.

Cache Discipline on Two Levels

The data updates at most once per business day, yet the UI feels live:

• Server side — every upstream call carries next: { revalidate: 3600 }. A page with ticker, pair rate, chart, and compare list reuses one cached response per URL.
• Client side — 5-minute staleTime, no refetch-on-focus churn.
• Ticker deduplication — today and the previous business day arrive in one range request, split by distinct business dates present in the response (the 7-day window survives weekends and holidays).

Data Model (No Database)

The only "model" is client-side — a persisted slice of the Zustand store under localStorage key fx-currency-converter:

type FavoritePair = { base: string; quote: string };
type ConversionLogEntry = {
  id: string;            // crypto.randomUUID()
  base: string;
  quote: string;
  sendAmount: number;
  receiveAmount: number;
  timestamp: number;
  relativeTime: string;  // "5m ago"
};

Plus a static 57-currency catalog (assets/data/flags.ts) with curated names and popularity groups.

Accessibility as Architecture

Roving-tabindex tablists with arrow/Home/End keys (converter tabs and chart ranges); a combobox/listbox currency picker with search autofocus, wrap-around arrow traversal, and Escape that returns focus to the trigger; four aria-live regions announcing conversions, favorite toggles, log actions, and the live pair rate; lime focus-visible rings everywhere; reduced-motion fallbacks via a dedicated hook.

Hard Problems Solved

Honest Gaps

Found by auditing the code — documented, not hidden:

• Swap preserves amounts instead of recomputing — swapping EUR→USD → USD→EUR exchanges both amounts verbatim rather than re-deriving from the new rate.
• Favorites fetch is N+1 — each pinned pair triggers its own history request for day-over-day change. Fine at favorite scale; a batching candidate.
• A fresh rate arriving mid-typing doesn't re-derive the counterpart field until a pair change.
• The "1D" chart range actually fetches 7 days of daily closes — Frankfurter publishes no intraday data.