Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/techycode-01/currency_converter

Currency Converter is a web application built with React, Vite, and Tailwind CSS. It enables real-time currency conversion and supports currency selection and amount input with a user-friendly interface.
https://github.com/techycode-01/currency_converter

hooks jsx reactjs tailwind-css

Last synced: 25 days ago
JSON representation

Currency Converter is a web application built with React, Vite, and Tailwind CSS. It enables real-time currency conversion and supports currency selection and amount input with a user-friendly interface.

Awesome Lists containing this project

README 

        

# Currency Converter React App



## Overview



This is a simple currency converter built with React + Vite And Tailwind CSS. It allows users to convert between different currencies using live exchange rates. The app features a user-friendly interface and supports dynamic currency conversion with real-time data.



## Features



- **Live Currency Conversion**: Fetches real-time exchange rates.

- **Swap Functionality**: Easily swap the "From" and "To" currencies.

- **Responsive Design**: Works well on various screen sizes.



## Screenshots



![Currency Converter Screenshot](./src/assets/currency_converter.png)



## Live Demo



Check out the live demo [here](https://currencytype-converter.netlify.app/).



## Installation



To set up this app locally, follow these steps:



1. **Clone the Repository**:



   ```bash

   git clone https://github.com/your-username/react-currency-converter.git



2. **Navigate to the Project Directory**:



   ```bash

   cd react-currency-converter



3. **Install Dependencies**:



   ```bash

   npm install



4. **Start the Development Server**:



   ```bash

   npm run dev

   



5. **Open Your Browser**:



   Navigate to `http://localhost:5173` to view the app.



## Usage



1. **Select Currency**: Choose the currency you want to convert from in the "From" field.

2. **Enter Amount**: Input the amount to be converted.

3. **Select Target Currency**: Choose the currency you want to convert to in the "To" field.

4. **Convert**: Click the "Convert" button to see the result.

5. **Swap Currencies**: Use the "Swap" button to interchange the "From" and "To" currencies.



## Technologies Used



- **React**: JavaScript library for building user interfaces.

- **Tailwind CSS**: Utility-first CSS framework for styling.

- **Vite**: Build tool that provides fast development.

- **Currency API**: API for fetching live currency exchange rates.



## Code Overview



### `useCurrencyInfo.js`



A custom React hook that fetches currency data from the Currency API.



```javascript

import { useEffect, useState } from "react";



function useCurrencyInfo(currency) {

  const [data, setData] = useState({});

  useEffect(() => {

    fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${currency}.json`)

      .then((res) => res.json())

      .then((res) => setData(res[currency]));

  }, [currency]);

  return data;

}



export default useCurrencyInfo;

```



### `InputBox.js`



A reusable input component for selecting currencies and entering amounts.



```javascript

import React, { useId } from 'react';



function InputBox({

  label,

  amount,

  onAmountChange,

  onCurrencyChange,

  currencyOptions = [],

  selectCurrency = "usd",

  amountDisable = false,

  currencyDisable = false,

  className = "",

}) {

  const amountInputId = useId();

  return (

    


      


        

          {label}

        

         onAmountChange && onAmountChange(e.target.value)}

        />

      


      


        
Currency Type


         onCurrencyChange && onCurrencyChange(e.target.value)}

          disabled={currencyDisable}

        >

          {currencyOptions.map((currency) => (

            

              {currency}

            

          ))}

        

      


    


  );

}



export default InputBox;

```



### `App.js`



The main component that uses the `useCurrencyInfo` hook and `InputBox` component to build the currency converter.



```javascript

import { useState } from 'react';

import InputBox from './components/InputBox';

import useCurrencyInfo from './hooks/useCurrencyInfo';



function App() {

  const [amount, setAmount] = useState(0);

  const [from, setFrom] = useState('usd');

  const [to, setTo] = useState('inr');

  const [convertedAmount, setConvertedAmount] = useState(0);



  const currencyInfo = useCurrencyInfo(from);



  const options = Object.keys(currencyInfo);



  const swap = () => {

    setFrom(to);

    setTo(from);

    setConvertedAmount(amount);

    setAmount(convertedAmount);

  };



  const convert = () => {

    setConvertedAmount(amount * currencyInfo[to]);

  };



  return (

    


      


        


          Currency exchange

        


        


          


             {

                e.preventDefault();

                convert();

              }}

            >

              


                 setFrom(currency)}

                  selectCurrency={from}

                  onAmountChange={(amount) => setAmount(amount)}

                />

              


              


                

                  Swap

                

              


              


                 setTo(currency)}

                  selectCurrency={to}

                  amountDisable

                />

              


              

                Convert {from.toUpperCase()} to {to.toUpperCase()}

              

            

          


        


      


    


  );

}



export default App;

```