💱 React Currency Converter

A modern Currency Exchange Rate Converter built with React.js and Tailwind CSS. This application fetches real-time exchange rates from a currency API and allows users to convert between different currencies instantly.

The app also displays country flags based on selected currency codes, making the interface more visual and user-friendly.

• 🌍 Live Exchange Rates – Fetches real-time currency data using an API
• 💱 Instant Currency Conversion – Convert between any two currencies
• 🏳 Country Flag Display – Automatically updates flags for selected currencies
• ⚡ Fast & Modern UI – Built with React and styled using Tailwind CSS
• ♻ Reusable Components – Modular component-based architecture
• 📱 Responsive Design – Works on mobile, tablet, and desktop devices

• React.js – Frontend JavaScript library
• Tailwind CSS – Utility-first CSS framework
• JavaScript (ES6+) – Application logic
• Fetch API – Fetching live exchange rate data
• Currency Exchange Rate API – Provides real-time currency data

This project demonstrates several important React development concepts:

• React Hooks
• Custom Hooks
• Reusable Components
• API Integration
• State Management
• Dynamic Rendering

src/
│
├── components/
│   └── InputBox.jsx        # Reusable component for currency input
│
├── constants/
│   └── countryFlag.js      # Currency codes mapped to country flags
│   └── cryptoCurrencies.js # List of crypto currencies used to filter them from dropdown
│
├── hooks/
│   └── useCurrencyInfo.js     # Custom hook for fetching currency data
│
├── App.jsx                 # Main application component
├── main.jsx                # React entry point
└── index.css               # Global styles with Tailwind CSS

git clone https://github.com/Pankaj2299/React-Currency-Converter.git

cd react-currency-converter

npm install

npm run dev

http://localhost:5173

1. Open the application in your browser
2. Select the base currency
3. Select the target currency
4. Enter the amount to convert
5. Click Get Exchange Rate
6. The app will fetch the latest exchange rate and display the converted value
7. Country flags will automatically update based on selected currencies

This project uses a free currency exchange API to fetch real-time exchange rates.

API Endpoint:

https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{currency}.json

Example:

https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json

This endpoint returns exchange rates for the selected base currency in JSON format.

The {currency} parameter is dynamic and changes based on the selected base currency in the application.

Data Source: https://github.com/fawazahmed0/currency-api

Pankaj Kumar

📧 Email: Pankajkumar199922@gmail.com
🔗 GitHub: https://github.com/Pankaj2299
🔗 LinkedIn: https://www.linkedin.com/in/pankaj-kumar-4b3276266

If you like this project, please consider starring ⭐ the repository. It helps others discover the project and motivates further development.