Exchange Rate Tracker provides a premium, real-time dashboard to monitor exchange rates of USD, AUD, EUR, and GBP against the Sri Lankan Rupee (LKR). Compare rates across 9+ banks, analyze historical trends with interactive charts, and find the best deals — all in a beautifully crafted dark-themed UI.
🔗 Try it live: exrates.suwansankaja.com
| Feature | Description |
|---|---|
| 🔄 Multi-Currency Support | Instantly switch between USD, AUD, EUR, and GBP |
| 📊 Interactive Charts | Historical trend analysis with Chart.js — filter by bank, time range, and rate type |
| 🏦 Bank Comparison | Compare buying & selling rates across 9+ Sri Lankan banks |
| 💎 Best Rate Highlights | Instantly see the best selling/buying rates with bank names |
| 🌙 Premium Dark UI | Glassmorphism design with aurora background and micro-animations |
| ⚡ Edge-Cached | CDN caching + client-side prefetching for instant currency switching |
| 📱 Fully Responsive | Optimized for desktop, tablet, and mobile |
| 🔒 Secure | Environment secrets encrypted via Cloudflare Workers |
Frontend → Next.js 15 · React 19 · TypeScript · Chart.js · Day.js
Styling → Vanilla CSS · Glassmorphism · CSS Custom Properties
Backend → Next.js API Routes · MongoDB Driver
Database → MongoDB Atlas
Deployment → Cloudflare Workers · OpenNext Adapter
- Node.js v18+
- MongoDB Atlas account (or local MongoDB)
# 1. Clone the repository
git clone https://github.com/SuwanSankaja/exchange_rate_dashboard.git
cd exchange_rate_dashboard
# 2. Install dependencies
npm install
# 3. Create environment file
cp .env.example .envCreate a .env file in the project root:
MONGO_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/?retryWrites=true&w=majority
DB_NAME=exchange_rates
COLLECTION_PREFIX=daily_npm run devOpen http://localhost:3000 in your browser.
This app is deployed on Cloudflare Workers using the @opennextjs/cloudflare adapter.
# Build & deploy to Cloudflare
npm run deploy- Go to Workers & Pages → your worker → Settings → Variables and Secrets
- Add
MONGO_URIas a Secret DB_NAMEandCOLLECTION_PREFIXare set automatically viawrangler.jsonc
| Command | Description |
|---|---|
npx opennextjs-cloudflare build |
Build for Cloudflare Workers |
npx opennextjs-cloudflare deploy |
Deploy to production |
The app exposes a RESTful API for fetching exchange rate data:
GET /api/rates/:currency
| Parameter | Type | Values |
|---|---|---|
currency |
string |
usd, aud, eur, gbp |
Example:
curl https://exrates.suwansankaja.com/api/rates/usdResponse: Array of daily rate documents with bank_rates, market_statistics, and last_updated fields.
Caching: Responses are cached at Cloudflare's edge for 10 minutes (s-maxage=600).
exchange_rate_dashboard/
├── src/
│ ├── app/
│ │ ├── api/rates/[currency]/
│ │ │ └── route.ts # MongoDB API handler
│ │ ├── globals.css # Design system & animations
│ │ ├── layout.tsx # Root layout with SEO
│ │ └── page.tsx # Main page
│ └── components/
│ ├── Dashboard.tsx # State management & data fetching
│ ├── Header.tsx # Animated header
│ ├── CurrencySelector.tsx # Currency pill selector
│ ├── RateCards.tsx # Best rate display cards
│ ├── ChartSection.tsx # Interactive chart with controls
│ └── SkeletonLoader.tsx # Loading state UI
├── wrangler.jsonc # Cloudflare Workers config
├── open-next.config.ts # OpenNext adapter config
├── next.config.ts # Next.js config
└── package.json
Distributed under the MIT License.
Built with ❤️ by Suwan Sankaja