A currency converter looks simple, but it touches API reliability, loading states, number formatting, accessibility, and responsive layout details.

What mattered most

The most important decision was to keep the conversion flow direct. The interface should never make users hunt for the result or wonder which rate is being used.

API shape

The frontend calls a small API route instead of talking directly to the provider. That keeps credentials on the server and makes it easier to normalize errors.

app.get("/api/rates", async (req, res) => {
  const response = await fetch(`${providerUrl}?key=${process.env.API_KEY}`);
  res.json(await response.json());
});

UI details

Small polish mattered: stable input widths, readable currency labels, visible loading states, and a result card that stays clear in both light and dark themes.