How to create your first API documentation and build the website that displays the current foreign exchange rate

Robert Lee
2 min readApr 3, 2022
Photo by Scott Graham on Unsplash

What is an API?

API (Application Programming Interface) allows two software systems to interact with each other. For example, Google Map API sends a user’s request to show the current location and pulls in location information from a Google Map server.

What is a REST API?

A REST API (Representational State Transfer API) is an architectural style that follows a set of rules (for example, uniform resource identifier) and supports computer systems to communicate via the internet.

What is the API documentation?

According to the website, API docs, or API description documents, are the collection of references, tutorials, and examples that help developers use your API.

Visit Frankfurter API

Frankfurter is an open-source API for current and historical foreign exchange rates published by the European Central Bank.

After reading through the website, you can get an idea of Frankfurter API usage (for example, GET request.)

Visit Stoplight Studio

Using Stoplight you can create OpenAPI descriptions, documentation, mock servers much faster than other API tools, with no specialized knowledge required in technical documentation.

To get started, you can refer to this article. You can use the knowledge to create your first Frankfurter API documentation.

Visit Postman

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs — faster

You can read this article to learn how to submit a request through Postman. You will submit requests to get data to build the website that displays the current foreign exchange rate.

Visit CodePen

CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build.

You can submit a request to Frankfurter to find the current foreign exchange rate and use HTML to display the data on the website.

HTML is only used to design the website

Also, you can use Fetch API to display the data on the website. Fetch API is going to update the website with the foreign exchange rate.

Fetch API is used to update the website


Building a website is a rewarding experience. You can add API documentation to help other developers understand how your website works.