Foreign Exchange Currency Converter

This is my solution to the Frontend Mentor Foreign Exchange Currency Converter challenge.

Overview

A responsive currency converter app that allows users to check exchange rates, swap currencies, view historical data, and save favorite currency pairs.

Features

• Convert between different currencies
• Swap base and quote currencies
• View exchange rate history
• Sort or view details by history, compare, favorites, and log
• Save favorite currency pairs
• Responsive layout for mobile, tablet, and desktop
• Loading skeletons while data is being fetched
• Error handling for API requests
• Dark and light themed UI

Built With

Screenshot

Links

• Solution URL
• Live Site URL
• GitHub Repo

Getting Started

Clone the project:

git clone https://github.com/your-username/your-repo-name.git

Go to the project folder:

cd your-repo-name

Install dependencies:

npm install

Start the development server:

npm run dev

What I Learned

While building this project, I practiced working with API data, React state management, reusable components, and responsive layouts. I also learned how to display currency exchange rates, calculate reverse currency pairs, and update the UI based on user actions.

Continued Development

In the future, I want to improve the app by adding more features below:

• Persist the active pair in the URL so a conversion can be bookmarked or shared
• Add keyboard shortcuts for the search, currency swap, and chart ranges
• Export the conversion log as a CSV file
• Add a hover crosshair to the chart showing the date and rate under the cursor
• Cache the last rates and show an out-of-date banner when the API is unreachable
• Add accounts and a backend so favorites and the log sync across devices

Author

• Frontend Mentor - @codewithMycah
• GitHub - @codewithMycah

Acknowledgments

Thanks to Frontend Mentor for providing the challenge design and requirements.