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

Source: Dev.to

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:

const [amount, setAmount] = useState(0);
const [optionA, setOptionA] = useState('USD');
const [optionB, setOptionB] = useState('EUR');
const [result, setResult] = useState(null);
const [error, setError] = useState(null);

Using useEffect, I trigger a fetch whenever the amount or selected currencies change. If the API returns successfully, I update the result; if there’s an error (e.g., 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

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

Open for Improvements

I intentionally didn’t focus on polishing the UI or adding extra features—because I want this project to be a starting point for others. If you’d like to enhance it, consider:

• Adding real‑time conversion as the user types
• Showing a loading spinner while fetching data
• Improving UX/UI with better styling and responsive design
• Expanding to support all currencies dynamically instead of hard‑coding 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, it’s available on CodeSandbox:

React Currency Converter Challenge