Building a Real-Time Forex Rate Conversion App with Finage API

Introduction

In the world of international finance and travel, having access to real-time currency exchange rates is essential. The Finage API provides reliable and up-to-date forex data that you can integrate into your applications.

In this article, you'll learn what it takes to build a modern, static-first, responsive forex conversion application. The app will feature real-time currency conversion, and a clean user interface.

Live Demo | Source Code

Table of Contents

- What's in our Forex Conversion App?

- Setting Up The Project

- Building the Application

- Key Features Explained

- Deploying the Application

- Final Thoughts

1. What's in our Forex Conversion App?

Our forex conversion app will include these key features:

- Convert between major currencies (USD, EUR, GBP, JPY, CAD, AUD, CHF, CNY)

- Real-time exchange rates powered by Finage API

2. Setting Up The Project

In order to have access to the real-time forex data, you will need to create an account and obtain your API key at Finage. This key will be used to authenticate your requests to the Finage API and fetch live exchange rates.

We will be configuring our application for static export. This allows the application to be deployed to any static hosting platform without requiring a server. This makes deployment simple.

3. Building the Application

To get live exchange rates, we'll fetch data from the Finage API. Here's how to call the forex endpoint:

const fetchExchangeRate = async (from: string, to: string) => {

  const apiKey = process.env.NEXT_PUBLIC_API_KEY;

  const url = `https://api.finage.co.uk/convert/forex/${from}/${to}/1?apikey=${API_KEY}`;

 

  const response = await fetch(url);

  const data = await response.json();

 

  return data.value;

};

 

More information about the Finage API can be found in the documentation.

However, when building a static web application, we'll encounter CORS (Cross-Origin Resource Sharing) issues when trying to call API directly from the browser. This is where Corsfix CORS proxy comes to the rescue. It allows us to send request directly from the browser without any server setup.

Instead of calling the API directly, we prefix the URL with the Corsfix proxy:

const fetchExchangeRate = async (from: string, to: string) => {

  const API_KEY = process.env.NEXT_PUBLIC_API_KEY || "{{FINAGE_API_KEY}}";

  const url = `https://api.finage.co.uk/convert/forex/${from}/${to}/1?apikey=${API_KEY}`;

 

  const response = await fetch("https://proxy.corsfix.com/?" + url);

  const data = await response.json();

 

  return data.value;

};

 

We will also store our secret securely in Corsfix, so you can use the app without exposing your API key in the client JavaScript code. Learn more about how to secure your API key with Corsfix.

4. Key Features Explained

As you type in any amount, the app automatically converts to the other currency, ensuring a smooth user experience. It works by fetching the exchange rate from the Finage API and applying it to the input value. The conversion happens in real-time with the interface updating immediately to show the converted amount with proper formatting and currency symbols.

5. Deploying the Application

Since the app is configured for static export, it can be deployed to any static hosting service without server requirements. Popular hosting platforms like Cloudflare Pages, Vercel, Netlify, and GitHub Pages all support static deployments with automatic builds from your Git repository. The deployment process is typically as simple as connecting your repository and the platform will handle the build and deployment automatically whenever you push changes.

6. Final Thoughts

In this article, you've learned what it takes to build a comprehensive forex conversion application that demonstrates several important concepts:

- API Integration: Using the Finage API for real-time forex data

- CORS Solutions: Leveraging Corsfix to overcome browser limitations in static apps

The resulting application provides a smooth, professional user experience while demonstrating best practices for handling external APIs in static web applications. See the complete source code on GitHub.