Building a Real-Time Currency Converter for Travel Apps

#javascript #tutorial #webdev

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:

Updates rates daily
Works offline
Shows historical trends
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);
};