Currency Exchange Dashboard

A React and TypeScript dashboard for checking currency exchange rates, converting amounts, and viewing exchange-rate trends.

Features

• Currency converter with live rates
• Historical exchange-rate chart with selectable ranges
• Light and dark theme toggle using React Context
• Loading, empty, and error states for API-driven views
• React Query caching and request state management
• Responsive layout for desktop and mobile

Tech Stack

• React
• TypeScript
• Vite
• TanStack React Query
• React Icons
• Vitest
• React Testing Library

API

Exchange-rate data is fetched from the Frankfurter API:

https://api.frankfurter.dev

API request functions live in src/services/currencyService.ts. Pure formatting and calculation helpers live in src/utils.

Getting Started

Install dependencies:

npm install

Start the development server:

npm run dev

Build for production:

npm run build

Run tests:

npm test

Testing

The test suite intentionally focuses on high-value coverage rather than testing every component:

• Currency converter component tests with React Testing Library
• Utility test for currency code formatting used by the converter
• Dashboard integration test for the initial full-page loading state

Deployment

For Netlify, use:

Base directory: currency-dashboard
Build command: npm run build
Publish directory: dist

If the Netlify base directory is not set, use:

Build command: npm run build
Publish directory: currency-dashboard/dist