A modern, responsive currency converter application built with React and TailwindCSS. Convert between 34+ world currencies with real-time exchange rates, featuring a beautiful UI with dark mode support.
- 🌍 34+ Currencies - Support for all major world currencies
- 🎌 Flag Emojis - Visual currency identification with country flags
- 🔍 Searchable Dropdowns - Quick currency search and selection
- 💱 Real-time Rates - Live exchange rates from ExchangeRate-API
- ⚡ Instant Conversion - Fast and accurate currency conversion
- 🔄 Swap Currencies - One-click currency swap with smooth animation
- 📊 Exchange Rate Display - Shows current rate and last update time
- 🌙 Dark/Light Mode - Toggle between themes with persistence
- 📱 Fully Responsive - Works perfectly on mobile, tablet, and desktop
- 🎨 Modern Design - Gradient backgrounds with glassmorphism effects
- ✨ Smooth Animations - Fade-in effects and animated blob backgrounds
- 🎯 User-Friendly - Clean interface with intuitive controls
⚠️ Error Handling - Clear error messages for network issues- 💾 LocalStorage - Remembers last conversion and theme preference
Beautiful gradient interface with clean design
Eye-friendly dark theme for night-time use
Optimized layout for all screen sizes
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository
git clone <your-repo-url> cd currencyConvertor
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
Navigate to http://localhost:5173
- Enter Amount - Type the amount you want to convert
- Select Source Currency - Choose the currency you're converting from (e.g., USD)
- Select Target Currency - Choose the currency you're converting to (e.g., EUR)
- Click Convert - Get instant conversion results
- View Results - See converted amount with exchange rate
- Swap Currencies - Click the
↔️ button to quickly swap source/target currencies - Toggle Dark Mode - Click the 🌙/☀️ icon in top-right corner
- Search Currencies - Use the search box in dropdowns to find currencies quickly
- Auto-save - Your last conversion is automatically saved and restored on page reload
- React 19.1.1 - Modern UI library with hooks
- Vite 7.1.5 - Lightning-fast build tool and dev server
- TailwindCSS 4.1.13 - Utility-first CSS framework
- Custom CSS - Keyframe animations and transitions
- ExchangeRate-API - Real-time currency exchange rates
- Axios - HTTP client for API requests
- Lucide React - Beautiful, consistent icon set
- ESLint - Code quality and consistency
- Hot Module Replacement (HMR) - Instant updates during development
currencyConvertor/
├── src/
│ ├── components/
│ │ ├── CurrencyConverter.jsx # Main converter component
│ │ ├── CurrencyDropdown.jsx # Searchable currency selector
│ │ └── ThemeToggle.jsx # Dark mode toggle
│ ├── hooks/
│ │ ├── useCurrencyConverter.js # Conversion logic
│ │ └── useLocalStorage.js # LocalStorage persistence
│ ├── utils/
│ │ ├── currencyData.js # Currency data & formatters
│ │ └── api.js # API integration
│ ├── App.jsx # Main app component
│ ├── index.css # Global styles & animations
│ └── main.jsx # Entry point
├── public/ # Static assets
├── index.html # HTML template
├── package.json # Dependencies
├── vite.config.js # Vite configuration
└── README.md # This file
The app supports 34 major world currencies:
🇺🇸 USD • 🇪🇺 EUR • 🇬🇧 GBP • 🇯🇵 JPY • 🇦🇺 AUD • 🇨🇦 CAD • 🇨🇭 CHF • 🇨🇳 CNY • 🇮🇳 INR • 🇲🇽 MXN • 🇧🇷 BRL • 🇿🇦 ZAR • 🇷🇺 RUB • 🇰🇷 KRW • 🇸🇬 SGD • 🇭🇰 HKD • 🇳🇴 NOK • 🇸🇪 SEK • 🇩🇰 DKK • 🇳🇿 NZD • 🇹🇷 TRY • 🇦🇪 AED • 🇸🇦 SAR • 🇹🇭 THB • 🇲🇾 MYR • 🇮🇩 IDR • 🇵🇭 PHP • 🇵🇱 PLN • 🇨🇿 CZK • 🇭🇺 HUF • 🇮🇱 ILS • 🇨🇱 CLP • 🇦🇷 ARS • 🇪🇬 EGP
Update src\utils\api.js to change the API provider:
const API_BASE_URL = 'your-api-url-here';- ⚡ Fast Initial Load - Optimized bundle size
- 🔄 Efficient Re-renders - React hooks optimization
- 💾 Smart Caching - Reduced API calls
- 📱 Mobile Optimized - Touch-friendly interface
Solution: Hard refresh the page (Ctrl + Shift + R) after first load.
Solution: Cached rates are used. Wait 1 hour or the cache clears automatically.
Solution: Check internet connection. API requires active connection.
# Build optimized production bundle
npm run build
# Preview production build locally
npm run previewThe production build will be in the dist/ folder.
Contributions are welcome! Feel free to:
- 🐛 Report bugs
- 💡 Suggest new features
- 🔧 Submit pull requests
Built with ❤️ using React, TailwindCSS, and ExchangeRate-API