Today’s React Coding Challenge: Building a Currency Converter Tool

Today was all about React coding challenges, and I dove headfirst into building a currency converter tool. I wanted to challenge myself, practice React hooks, and get comfortable fetching data from APIs. The whole process was exciting, frustrating at times, but ultimately super rewarding.

Why I Chose a Currency Converter

Currency converters are a perfect small project for React beginners and intermediates alike. They involve:

• Handling user input dynamically
• Managing multiple state variables
• Fetching data from external APIs
• Displaying results conditionally
• Handling errors gracefully

I wanted a project that would push me to use useState and useEffect, and also make me deal with asynchronous data fetching in a clean and React-friendly way.

How I Built It

I started by creating a simple input field for the amount, then added two dropdowns for selecting the currencies to convert from and to. The main logic is powered by the Frankfurter API, which is simple and free for testing currency conversions.

The React component tracks multiple state variables:

• amount for the input number
• optionA and optionB for the selected currencies
• result for the converted amount
• error for handling any API or input issues

Using useEffect, I trigger a fetch whenever the amount or currencies change. If the API returns successfully, I update the result; if there’s an error (like selecting the same currency for both dropdowns), I show a friendly error message.

This small logic loop helped me understand conditional rendering, API error handling, and reactive programming in React much better.

Key Learnings

Today taught me a lot:

1. React Hooks in Practice: Using useState and useEffect together feels natural but requires careful attention to dependencies.
2. API Fetching and Error Handling: Always check if the response is valid and handle edge cases.
3. Conditional UI Rendering: Showing results or error messages based on the app’s state makes the UI user-friendly.
4. Component Design: Even small projects like this are a chance to think about clean, maintainable code.

Open for Improvements

I intentionally didn’t focus on improving the UI or adding extra features—because I want this project to be a starting point for others. If anyone reading this wants to take this code and enhance it, you can:

• Add real-time conversion as the user types
• Show a loading spinner while fetching the data
• Improve UX/UI with better styling and responsive design
• Expand to support all currencies dynamically instead of hardcoding options

This is a learning playground, so feel free to fork it, experiment, and make it your own.

Check Out the Project

If you want to see the live project or explore the code, I’ve shared it here on CodeSandbox:
React Currency Converter Challenge

Even though it’s a small project, it was a huge learning opportunity for me in React. And now, it’s a chance for anyone else to take it further and make it even better.