Build a Currency Converter App

# Create a new React app with TypeScript
npx create-react-app currency-converter --template typescript
cd currency-converter

# Install additional dependencies
npm install axios tailwindcss
npx tailwindcss init

// src/services/currencyService.ts
import axios from 'axios'

const API_BASE_URL = 'https://api.fxratesync.io/v1'
const API_KEY = process.env.REACT_APP_FX_API_KEY

export interface ConversionResult {
  from: string
  to: string
  amount: number
  converted_amount: number
  rate: number
  timestamp: string
}

export class CurrencyService {
  private static instance: CurrencyService
  
  static getInstance(): CurrencyService {
    if (!CurrencyService.instance) {
      CurrencyService.instance = new CurrencyService()
    }
    return CurrencyService.instance
  }

  async convertCurrency(
    from: string, 
    to: string, 
    amount: number
  ): Promise<ConversionResult> {
    try {
      const response = await axios.get(
        `${API_BASE_URL}/convert?from=${from}&to=${to}&amount=${amount}`,
        {
          headers: {
            'X-API-Key': API_KEY
          }
        }
      )
      return response.data
    } catch (error) {
      throw new Error('Failed to convert currency')
    }
  }

  async getSupportedCurrencies(): Promise<string[]> {
    // For this tutorial, we'll use a static list
    return ['USD', 'EUR', 'GBP', 'JPY', 'CAD', 'AUD', 'CHF', 'CNY']
  }
}

// src/components/CurrencyConverter.tsx
import React, { useState, useEffect } from 'react'
import { CurrencyService, ConversionResult } from '../services/currencyService'

const CurrencyConverter: React.FC = () => {
  const [fromCurrency, setFromCurrency] = useState('USD')
  const [toCurrency, setToCurrency] = useState('EUR')
  const [amount, setAmount] = useState(100)
  const [result, setResult] = useState<ConversionResult | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [currencies, setCurrencies] = useState<string[]>([])

  const currencyService = CurrencyService.getInstance()

  useEffect(() => {
    loadCurrencies()
  }, [])

  const loadCurrencies = async () => {
    try {
      const supportedCurrencies = await currencyService.getSupportedCurrencies()
      setCurrencies(supportedCurrencies)
    } catch (err) {
      setError('Failed to load currencies')
    }
  }

  const handleConvert = async () => {
    if (amount <= 0) {
      setError('Amount must be greater than 0')
      return
    }

    setLoading(true)
    setError(null)

    try {
      const conversionResult = await currencyService.convertCurrency(
        fromCurrency,
        toCurrency,
        amount
      )
      setResult(conversionResult)
    } catch (err) {
      setError('Conversion failed. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  const swapCurrencies = () => {
    setFromCurrency(toCurrency)
    setToCurrency(fromCurrency)
    setResult(null)
  }

  return (
    <div className="max-w-2xl mx-auto p-6 bg-background rounded-2xl shadow-xl">
      <h1 className="text-3xl font-bold text-center text-foreground mb-8">
        Currency Converter
      </h1>

      <div className="space-y-6">
        {/* Amount Input */}
        <div>
          <label className="block text-sm font-medium text-foreground mb-2">
            Amount
          </label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(Number(e.target.value))}
            className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="Enter amount"
          />
        </div>

        {/* Currency Selectors */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
          <div>
            <label className="block text-sm font-medium text-foreground mb-2">
              From
            </label>
            <select
              value={fromCurrency}
              onChange={(e) => setFromCurrency(e.target.value)}
              className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-blue-500"
            >
              {currencies.map(currency => (
                <option key={currency} value={currency}>{currency}</option>
              ))}
            </select>
          </div>

          <div className="flex justify-center">
            <button
              onClick={swapCurrencies}
              className="px-4 py-2 text-primary hover:bg-primary/10 rounded-lg transition-colors"
            >
              ⇄ Swap
            </button>
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-2">
              To
            </label>
            <select
              value={toCurrency}
              onChange={(e) => setToCurrency(e.target.value)}
              className="w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-blue-500"
            >
              {currencies.map(currency => (
                <option key={currency} value={currency}>{currency}</option>
              ))}
            </select>
          </div>
        </div>

        {/* Convert Button */}
        <button
          onClick={handleConvert}
          disabled={loading}
          className="w-full bg-primary hover:bg-primary/90 disabled:opacity-50 text-background font-semibold py-3 px-6 rounded-lg transition-colors"
        >
          {loading ? 'Converting...' : 'Convert Currency'}
        </button>

        {/* Results */}
        {result && (
          <div className="bg-success/10 border border-success/30 rounded-lg p-6">
            <div className="text-center">
              <div className="text-3xl font-bold text-success-foreground mb-2">
                {result.converted_amount.toFixed(2)} {result.to}
              </div>
              <div className="text-sm text-success">
                {result.amount} {result.from} = {result.converted_amount.toFixed(2)} {result.to}
              </div>
              <div className="text-xs text-success mt-2">
                Rate: {result.rate.toFixed(4)} • {new Date(result.timestamp).toLocaleString()}
              </div>
            </div>
          </div>
        )}

        {/* Error Display */}
        {error && (
          <div className="bg-destructive/10 border border-destructive/30 rounded-lg p-4 text-destructive-foreground">
            {error}
          </div>
        )}
      </div>
    </div>
  )
}

export default CurrencyConverter

# .env
REACT_APP_FX_API_KEY=your_api_key_here

# Test locally
npm start

# Build for production
npm run build

# Deploy to Netlify, Vercel, or your preferred hosting