A modern, browser-based currency converter application that allows you to convert one source currency to multiple target currencies (up to 10) simultaneously. Supports both cryptocurrency and fiat currencies with real-time exchange rates.
- One-to-Many Conversion: Convert a single source currency to up to 10 target currencies at once
- Crypto & Fiat Support: Mix and match cryptocurrencies (Bitcoin, Ethereum, etc.) with fiat currencies (USD, EUR, GBP, etc.)
- Real-time Exchange Rates: Powered by CoinGecko API
- Auto-refresh: Exchange rates automatically update every 60 seconds
- Persistent State: Your currency selections and amounts are saved to localStorage
- Search & Filter: Easily find currencies with the built-in search functionality
- Swap Functionality: Quickly swap any target currency with the source
- Responsive Design: Works seamlessly on desktop and mobile devices
- Vue.js 3 - Progressive JavaScript framework with Composition API
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Axios - HTTP client for API requests
- Lucide Vue - Beautiful icon library
- CoinGecko API - Real-time cryptocurrency and fiat exchange rates
- Node.js 18+ and npm
- Clone or navigate to the repository:
cd currency-converter- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe built files will be in the dist directory.
npm run preview- Select Source Currency: Click on the source currency field to choose your base currency
- Enter Amount: Input the amount you want to convert
- Add Target Currencies: Click the "+ Add Currency" button to add target currencies
- View Conversions: See real-time conversion results for all target currencies
- Swap Currencies: Click the swap icon on any target currency to make it the new source
- Remove Currencies: Click the trash icon to remove a target currency
- Refresh Rates: Click the refresh button in the header or wait for automatic updates
This application uses the free tier of the CoinGecko API, which has rate limits. If you experience issues with rate limiting, consider:
- Reducing the frequency of manual refreshes
- Increasing the auto-refresh interval
- Using a CoinGecko API key (requires code modification)
src/
├── components/ # Vue components
│ ├── CurrencySelector.vue # Modal for selecting currencies
│ ├── SourceCurrencyInput.vue # Source currency and amount input
│ ├── TargetCurrencyList.vue # List of target currencies
│ └── TargetCurrencyItem.vue # Individual target currency item
├── composables/ # Reusable composition functions
│ ├── useCurrencyAPI.ts # CoinGecko API integration
│ ├── useConverter.ts # Main converter logic
│ └── useLocalStorage.ts # localStorage persistence
├── types/ # TypeScript type definitions
│ └── currency.ts
├── utils/ # Helper functions
│ └── formatters.ts
├── App.vue # Main application component
├── main.ts # Application entry point
└── style.css # Global styles (Tailwind imports)
Unlike traditional converters that only convert between two currencies, this app allows you to see conversions for multiple target currencies simultaneously, making it perfect for travelers, traders, or anyone working with multiple currencies.
Your selections are automatically saved to browser localStorage, so when you return to the app, your previously selected currencies and amounts are restored.
Exchange rates are automatically refreshed every 60 seconds to ensure you always have up-to-date information. You can also manually refresh at any time.
The currency selector includes a powerful search feature that filters by currency code, symbol, or name. Currencies are also categorized (Popular, Crypto, Fiat) for easy navigation.
This project is open source and available under the MIT License.
- Exchange rate data provided by CoinGecko API
- Icons by Lucide