Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mo-jasim/currency-converter-app

This app allows users to convert between multiple currencies accurately and quickly. Designed with simplicity and efficiency in mind, the app offers real-time currency conversion.
https://github.com/mo-jasim/currency-converter-app

currency-api currency-codes currency-conversion currency-converter currency-exchange-rates currency-exchange-rates-collector currency-rates html javascript javascript-library js jsx react react-components react-hook-form react-hooks react-router reactjs

Last synced: 4 days ago
JSON representation

This app allows users to convert between multiple currencies accurately and quickly. Designed with simplicity and efficiency in mind, the app offers real-time currency conversion.

Awesome Lists containing this project

README 

        
## Currency Converter App Using (React Js)



Check out the app at: [https://currency-converter-app.jasim.io/]



## About this app

The Currency Converter App is a modern, responsive web application built with React JS, styled with Tailwind CSS, and optimized using Vite. This app allows users to convert between multiple currencies accurately and quickly. Designed with simplicity and efficiency in mind, the app offers real-time currency conversion with options for swapping between currencies and selecting from a wide range of available currency pairs. Whether you’re a frequent traveler or someone who needs to handle international transactions, this app provides an easy and effective way to manage currency conversions.



## Key Features

- **Multiple Currency:** Options: The app supports a wide range of global currencies, allowing users to select from various currency pairs for accurate conversion.

- **Real-Time Conversion:** The app fetches the latest exchange rates through an API to ensure that all conversions are up to date and precise.

- **Swap Functionality:** Users can quickly swap the base and target currencies with a single click, making it convenient to reverse conversions.

- **Custom Input:** Users can enter any amount they wish to convert, and the app will instantly display the equivalent value in the target currency.

- **Responsive Design:** The application is fully responsive, ensuring a seamless user experience on all devices, including desktops, tablets, and mobile phones.

- **Favorite Currency Pairs:** Enable users to save frequently used currency pairs for faster access and easier conversion in future sessions.

- **Favorite Currency Pairs:** Enable users to save frequently used currency pairs for faster access and easier conversion in future sessions.

- **Offline Mode:** Implement an offline mode that allows users to use the most recent cached exchange rates when the internet connection is unavailable.



### Technologies Used:



- **React JS:** Provides a fast, dynamic, and scalable frontend architecture, allowing for seamless user interaction and state management.

- **Tailwind CSS:** A utility-first CSS framework that ensures clean, responsive design while maintaining ease of customization for styling elements across the app.

- **Vite:** Optimizes the development process with blazing-fast hot reloading and efficient production builds, ensuring a smooth and performant application.

- **Frank Furter API:** The app fetches real-time data from a reliable currency conversion API to provide accurate and up-to-date exchange rates.

- **Frank Furter (or Fetch API):** Handles API requests for fetching currency data efficiently, ensuring smooth integration and fast response times.



### How to Use:

1. Clone the repository:

   ```bash

   https://github.com/mo-jasim/Currency-Converter-App.git

   ```



2. Navigate to the project directory and install dependencies:

```bash

   cd Currency-Converter-App

   npm install

```



3. Start the development server:

   ```bash

   npm run dev

   ```



4. Open the app in your browser and start converting currencies by selecting the base currency, target currency, and entering the amount to convert.

5. Use the Swap button to quickly exchange the base and target currencies.



### Key Functionalities:

1. Select Base and Target Currencies: Users can choose their base currency and target currency from a comprehensive list of global currencies.

2. Enter Amount: Input the amount of currency to be converted, and the app will display the equivalent amount in the selected target currency instantly.

3. Swap Currencies: With a single click, users can swap the selected base and target currencies, making conversions faster and more convenient.

4. Real-Time Conversion: The app retrieves live exchange rates from the API and performs instant calculations, ensuring the results reflect the most accurate conversion rates



Contributions to improve the app, whether through feature additions, performance optimizations, or UI enhancements, are encouraged. Feel free to fork the repository, create a new branch with your changes, and submit a pull request. Feedback and suggestions can also be shared via the email ([email protected]), where discussions for potential improvements are welcomed.