💱 Currency Converter

A modern, responsive web application for converting currencies in real-time. Built with React, Vite, and Tailwind CSS with a beautiful glass-morphism UI design.

✨ Features

• Real-time Currency Conversion: Convert between multiple currencies with live exchange rates
• Swap Functionality: Easily swap the source and target currencies with a single click
• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices
• Beautiful UI: Modern glass-morphism design with smooth animations and transitions
• Multiple Currency Support: Access rates for various global currencies
• User-friendly Interface: Intuitive input boxes and conversion controls

🛠️ Tech Stack

• Frontend Framework: React 19
• Build Tool: Vite 8
• Styling: Tailwind CSS 4
• Package Manager: npm
• Linting: ESLint 9

📦 Installation

1. Clone the repository:

git clone https://github.com/anasshiraz/currencyConvertor.git
cd currencyConvertor

2. Install dependencies:

npm install

🚀 Getting Started

Development Server

Start the development server with hot module replacement (HMR):

npm run dev

The application will be available at http://localhost:5173 (or another available port).

Build for Production

Create an optimized production build:

npm run build

Preview Production Build

Preview the production build locally:

npm run preview

Lint Code

Check for code quality issues:

npm run lint

📁 Project Structure

src/
├── components/       # Reusable React components
├── hooks/           # Custom React hooks (e.g., useCurrencyInfo)
├── assets/          # Static assets (images, etc.)
├── App.jsx          # Main application component
├── App.css          # Application styles
├── index.css        # Global styles
└── main.jsx         # Application entry point

🎯 How to Use

1. Enter the amount you want to convert in the "From" input field
2. Select the source currency from the dropdown
3. Select the target currency from the dropdown
4. Click the Swap button to exchange the source and target currencies
5. Click the Convert button to calculate the conversion
6. The converted amount will appear in the "To" field

🔧 Configuration

• Tailwind CSS configuration can be modified in tailwind.config.js
• Vite configuration is in vite.config.js
• ESLint rules can be adjusted in eslint.config.js

📝 License

This project is open source and available under the MIT License.

👤 Author

Anas Shiraz
GitHub: @anasshiraz