EUR/USD Currency Converter

A real-time currency converter application built with React, featuring live exchange rate simulation, custom rate overrides, and conversion history tracking. Created for CA-CIB technical assessment.

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/kafann/react-test-cacib.git
cd react-test-cacib

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to view the application.

📦 Tech Stack

• React 18 - UI library with hooks
• Vite - Build tool and dev server
• Tailwind CSS v4 - Utility-first CSS framework
• Heroicons - Beautiful hand-crafted SVG icons

🎯 Features

Core Functionality

• ✅ Real-time Exchange Rate: Automatically updates every 3 seconds with ±0.05 fluctuation
• ✅ Live Currency Conversion: Instant EUR ↔ USD conversion with polling updates
• ✅ Bidirectional Switching: Seamlessly switch between EUR→USD and USD→EUR with value continuity
• ✅ Rate Override System: Lock custom exchange rates with automatic 2% drift deactivation
• ✅ Conversion History: Track last 5 conversions with detailed information
• ✅ Visual Indicators: Real-time trend arrows (up/down) for rate changes

User Experience

• ✅ Modern, clean interface with CA-CIB green branding
• ✅ Smooth animations and transitions
• ✅ Responsive design (optimized for desktop)
• ✅ Clear visual feedback for all interactions
• ✅ Professional card-based layout

🏗️ Project Structure

src/
├── components/
│   ├── ExchangeRateDisplay.jsx    # Current rate with trend indicators
│   ├── CurrencyConverter.jsx      # Main conversion interface
│   ├── RateOverride.jsx           # Custom rate locking system
│   └── ConversionHistory.jsx      # Historical conversions table
├── hooks/
│   ├── useExchangeRate.js         # Rate simulation and override logic
│   ├── useConverter.js            # Conversion calculations
│   └── useHistory.js              # History management
└── App.jsx                        # Main application component

🛠️ Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run deploy       # Deploy to GitHub Pages

💡 How It Works

Exchange Rate Simulation

• Starts at 1.1 EUR/USD
• Updates every 3 seconds with random fluctuation (-0.05 to +0.05)
• Visual trend indicators show rate movement

Rate Override

1. Enter custom rate in override field
2. Click "Lock" to activate
3. System automatically unlocks when real rate drifts 2% from override
4. Visual indicator shows override status

Conversion Flow

1. Enter amount in source currency
2. Result automatically updates with current/override rate
3. Click switch button to reverse currencies (maintains value continuity)
4. All conversions are logged in history table

📋 Development Notes

See todo.md for improvements, shortcuts, and technical debt.

See roadmap.md for planned features and product vision.

🚢 Deployment

The application is deployed to GitHub Pages:

Live Demo: https://kafann.github.io/react-test-cacib

To deploy:

npm run deploy

🔧 Technical Highlights

• Custom Hooks: Separated concerns with useExchangeRate, useConverter, useHistory
• Derived State: Uses useMemo for performance optimization
• Real-time Updates: Polling mechanism updates conversions automatically
• State Management: Clean React hooks pattern without external libraries
• Component Architecture: Modular, reusable components with single responsibilities

📄 Assessment Details

Company: Crédit Agricole CIB
Position: Front-End Developer
Time Limit: 2 hours
Completion Date: January 2025

---