Dev.to WebDev 🛠 Dev 👁 0 📖 1 min read

Building a Real-Time Currency Converter for Travel Apps

Building a Real-Time Currency Converter for Travel Apps Every traveler needs to convert currencies. Here's how I built a real-time converter for ViajApp. The Problem When you're in Japan, you need to quickl

Building a Real-Time Currency Converter for Travel Apps

Every traveler needs to convert currencies. Here's how I built a real-time converter for ViajApp.

The Problem

When you're in Japan, you need to quickly convert yen to your home currency. mental math is hard, and most apps require internet.

The Solution

A currency converter that:

  1. Updates rates daily
  2. Works offline
  3. Shows historical trends
  4. Has a clean UI

Implementation

Backend (FastAPI)

@router.get("/convert")
async def convert_currency(
    from_currency: str,
    to_currency: str, 
    amount: float
):
    rate = get_exchange_rate(from_currency, to_currency)
    converted = amount * rate
    return {
        "from": from_currency,
        "to": to_currency,
        "amount": amount,
        "rate": rate,
        "converted": round(converted, 2)
    }

Frontend (Next.js)

const convertCurrency = async (amount: number) => {
  const res = await fetch(
    `/api/v1/currency/convert?from=${from}&to=${to}&amount=${amount}`
  );
  const data = await res.json();
  setConverted(data.converted);
};

Features

  • 10 currencies: JPY, EUR, USD, GBP, KRW, etc.
  • Daily updates: Rates refresh every 24 hours
  • Offline support: Last known rates cached
  • Quick presets: "How much is 1000 yen?"

Lessons

  1. Cache everything: API calls are slow, cache is fast
  2. Show the rate: Users want to see the exchange rate, not just the result
  3. Round properly: Money should always show 2 decimal places

Try it: viajapp.app/currency

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.