Currency Exchange Tracker

A full-stack real-time currency exchange tracker built with the @cleverbrush library suite. Demonstrates schema-first development with React 19, TypeScript 6, and PostgreSQL.

Architecture

currency-tracker/
├── shared/          # Wire contract + schemas (used by both backend & frontend)
├── backend/         # BFF server aggregating Frankfurter API
└── frontend/        # React 19 SPA with real-time updates

Tech Stack

Layer	Technology
Schemas	@cleverbrush/schema — single source of truth for validation, types, forms, DB, and OpenAPI
Backend	@cleverbrush/server, @cleverbrush/auth, @cleverbrush/di, @cleverbrush/knex-schema
Frontend	@cleverbrush/client, @cleverbrush/react-form, React 19, TanStack Query
Database	PostgreSQL 16 via Knex
Styling	Tailwind CSS v4, Framer Motion
Charts	lightweight-charts (TradingView)
API Docs	@cleverbrush/server-openapi (OpenAPI + AsyncAPI)

Features

• Dashboard — Live currency grid with sparkline charts and real-time rate updates
• Pair Detail — Interactive area chart (lightweight-charts) with time-range selection
• Converter — Schema-driven form with live rate conversion
• Watchlist — Track favourite pairs (auth required)
• Price Alerts — Set threshold alerts with direction (above/below), real-time toast notifications
• Auth — JWT + HttpOnly cookies, scrypt password hashing
• WebSockets — Live rate streaming and alert notifications
• OpenAPI/AsyncAPI — Auto-generated API documentation from schema definitions

Prerequisites

• Node.js 22+
• PostgreSQL 16+ (or Docker)

Setup

# Install dependencies
npm install

# Copy environment config
cp .env.example .env
# Edit .env with your database URL, JWT secret, etc.

# Start PostgreSQL (via Docker)
docker-compose up -d postgres

# Run backend (migrations run automatically on startup)
cd backend && npm start

# Run frontend (in another terminal)
cd frontend && npm run dev

Environment Variables

Variable	Description	Default
DATABASE_URL	PostgreSQL connection string	—
JWT_SECRET	Secret for JWT signing	—
JWT_EXPIRES_IN	Token expiration	7d
PORT	Backend server port	3000
POLL_INTERVAL_MINUTES	Rate polling interval	5
FRANKFURTER_BASE_URL	Frankfurter API base URL	https://api.frankfurter.dev
CORS_ORIGIN	Allowed CORS origin	http://localhost:5173

Scripts

# Lint all packages
npm run lint

# Auto-fix lint + formatting
npm run lint:fix

# Format code
npm run format

# Type-check all packages
npm run typecheck

API Endpoints

REST

Method	Path	Auth	Description
POST	/api/auth/register	No	Create account
POST	/api/auth/login	No	Sign in
POST	/api/auth/logout	Yes	Sign out
GET	/api/auth/me	Yes	Current user
GET	/api/currencies	No	List all currencies
GET	/api/rates/latest	No	Latest exchange rates
GET	/api/rates/history	No	Historical rate points
POST	/api/rates/convert	No	Convert between currencies
GET	/api/watchlist	Yes	List watchlist items
POST	/api/watchlist	Yes	Add pair to watchlist
DELETE	/api/watchlist/:id	Yes	Remove pair from watchlist
GET	/api/alerts	Yes	List price alerts
POST	/api/alerts	Yes	Create price alert
DELETE	/api/alerts/:id	Yes	Delete price alert

WebSocket

Path	Description
/ws/rates/live	Real-time rate updates
/ws/alerts	Alert trigger notifications

Documentation

Path	Description
/openapi.json	OpenAPI 3.1 spec
/asyncapi.json	AsyncAPI spec

License

MIT