💱 Currency Converter App

A modern, real-time currency converter application built with React and Vite. Convert between multiple currencies with up-to-date exchange rates.

✨ Features

• Real-time Currency Conversion - Get live exchange rates for accurate conversions
• Multiple Currency Support - Convert between various global currencies
• Swap Functionality - Instantly swap between source and target currencies
• Responsive Design - Beautiful UI built with Tailwind CSS
• Custom Hooks - Reusable useCurrencyInfo hook for fetching exchange rates
• Disabled Result Input - Prevents manual editing of converted amount for data integrity

🚀 Technologies Used

• React 19.2.0 - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS 4.1.18 - Utility-first CSS framework
• Currency API - Real-time exchange rates from @fawazahmed0/currency-api

📁 Project Structure

src/
├── components/
│   └── Input.jsx          # Reusable input component for currency selection
├── hooks/
│   └── useCurrencyInfo.js # Custom hook for fetching exchange rates
├── App.jsx                # Main application component
└── main.jsx               # Application entry point

🛠️ Installation

1. Clone the repository or navigate to the project directory:

cd "currency project in React/currency-project-react"

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and visit http://localhost:5173

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint for code quality

🎯 How to Use

1. Enter the amount you want to convert in the "From" field
2. Select the source currency from the dropdown
3. Select the target currency in the "Result" section
4. Click the CONVERT button to see the converted amount
5. Use the SWAP button to quickly switch between currencies

🔧 Key Components

Input Component

Reusable component that handles:

• Amount input field
• Currency selection dropdown
• Dynamic currency options
• Disabled state for result display

useCurrencyInfo Hook

Custom hook that:

• Fetches real-time exchange rates based on selected currency
• Returns currency conversion data
• Updates automatically when currency changes

🌐 API Information

This project uses the free currency conversion API:

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

💡 Key Features Implementation

• State Management - Uses React hooks (useState) for managing currency data
• Custom Hooks - Implements useCurrencyInfo for API integration
• Unique IDs - Uses useId hook for accessibility and form controls
• Conditional Rendering - Shows conversion result only after conversion
• Swap Logic - Intelligently swaps currencies and recalculates values

🎨 Styling

The application uses Tailwind CSS for a modern, responsive design with:

• Gradient backgrounds
• Hover effects and transitions
• Rounded corners and shadows
• Responsive layout with flexbox

📦 Dependencies

"dependencies": {
  "react": "^19.2.0",
  "react-dom": "^19.2.0",
  "tailwindcss": "^4.1.18"
}

🤝 Contributing

Feel free to fork this project and submit pull requests for any improvements.

📄 License

This project is open source and available for learning purposes.

---

Built with ❤️ using React and Vite