Currency Converter App

A simple and responsive React-based currency converter that allows users to convert amounts between different currencies with a clean and user-friendly interface.

---

🔹 Features

• Convert currencies using up-to-date exchange rates.
• Swap currencies instantly with the Swap button.
• Auto-convert on initial page load for the default amount.
• Controlled inputs with amounts rounded to 2 decimal places.
• Dropdown displays currencies in uppercase while keeping values lowercase internally.
• Responsive design using Tailwind CSS.
• Clean and reusable InputBox component.

---

🔹 Tech Stack

• Frontend: React, Tailwind CSS
• Custom Hooks: useCurrencyInfo for fetching and managing exchange rates
• Languages: JavaScript, JSX

---

🔹 Installation

1. Clone the repository:

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

2. Install dependencies:

cd react-currency-converter
npm install

3. Start the development server:

npm run dev

---

🔹 How it Works

1. Enter an amount in the From field.
2. Select the currencies in From and To dropdowns.
3. Click Convert to see the converted amount.
4. Click Swap to switch the currencies and amounts.
5. On first load, the app automatically converts the default amount.

---

🔹 Folder Structure

currency-converter/
├─ src/
│  ├─ components/
│  │  ├─ InputBox.jsx
│  │  └─ index.js
│  ├─ hooks/
│  │  └─ useCurrencyInfo.js
│  ├─ App.jsx
│  ├─ main.jsx
│  └─ index.css
├─ package.json
└─ README.md

---

🔹 Future Improvements

• Add real-time exchange rates via an external API.
• Support historical rates and charts.
• Add multi-currency conversion.
• Add unit tests for components and hooks.
• Add dark mode.

---