Currency Convertor

Content Type: Widget
Categories: Extensions

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.

Releases