Overview

Features

1. Dynamic Currency Selection:

   • Provides dropdown menus for selecting both the source (from) and target (to) currencies.
   • Automatically fetches a comprehensive list of available currencies from the API.

2. Real-Time Exchange Rate Fetching:

   • Fetches live exchange rates from the Exchange Rates API to ensure accurate calculations.
   • Updates exchange rates dynamically based on the selected currencies.

3. Customizable Inputs:

   • Accepts default values for source currency, target currency, and amount, while allowing users to modify these inputs dynamically.

4. Conversion Logic:

   • Calculates the converted amount using the formula:Converted Amount = Amount × (ToCurrency Rate / FromCurrency Rate)
   • Displays the result in real-time after conversion.

5. Error Handling:

   • Includes error logging for debugging issues related to API calls or data fetching.

6. User-Friendly Design:

   • Clear labels and organized form groups for selecting currencies and inputting the amount.
   • A dedicated button for performing the conversion.

Technical Workflow

1. Currency Fetching:

   • On initial render, the widget fetches a list of currencies and their exchange rates using the fetch API.
   • Populates dropdown menus with the fetched currencies.

2. State Management:

   • Manages the selected source and target currencies, amount, exchange rate, and the converted amount using React's useState hooks.

3. Data Processing:

   • Calculates the conversion rate by dividing the target currency's rate by the source currency's rate.
   • Uses the computed rate to determine the final converted value.

4. Parent Integration:

   • Includes an optional callback function (onConvertedAmount) to pass the converted amount back to the parent Mendix application or component, enhancing reusability.

Enhancements Over Previous Versions

1. Support for Any Currency:

   • Extended support for all currencies available in the API, removing limitations to specific currency pairs.

2. Improved User Experience:

   • Introduced structured form groups and intuitive UI components for better usability.

3. Dynamic Conversion Rates:

   • Automatically updates the exchange rate when the user selects different currencies.

4. Integration Ready:

   • Designed for easy integration with Mendix, with provisions for passing data back to the parent system.

Documentation

The Currency Converter Widget is designed for applications where real-time currency conversion is required. It simplifies the process of converting monetary values between different currencies, making it ideal for:

• Travel Management Systems: Helps users calculate travel expenses in their preferred currency.
• E-Commerce Platforms: Displays product prices in the user’s local currency, improving customer experience.
• Financial Applications: Assists in performing quick currency conversions for international transactions.
• Expense Management: Provides real-time conversion for budgeting and reporting across multiple currencies.

Problems Solved:

• Eliminates the need for manual currency conversions.
• Reduces errors in financial calculations.
• Offers real-time exchange rates to ensure accuracy.

Features and Limitations

Features:

1. Real-Time Exchange Rate Fetching: Dynamically retrieves live exchange rates from the API.
2. Multi-Currency Support: Converts between any two currencies available in the API.
3. User-Friendly Interface: Intuitive dropdowns for selecting currencies and an input field for the amount.
4. Customizable Defaults: Supports default values for source and target currencies and the amount.
5. Integration Capability: Allows parent applications to retrieve the converted amount via a callback function.
6. Dynamic Updates: Automatically recalculates the conversion when input values or selected currencies change.

Limitations:

1. API Dependency: Requires a valid API key for accessing exchange rates.
2. Internet Connection: Needs an active internet connection to fetch real-time data.
3. Limited Error Feedback: Logs errors in the console but does not display user-friendly error messages for API failures.

Dependencies

• React Library: Used for creating and managing the widget’s UI.
• Exchange Rates API: Fetches live exchange rates.
  • API Endpoint: http://api.exchangeratesapi.io/v1/latest
  • API Key: Ensure you have a valid access key from Exchange Rates API.