Currency API Dashboard

Name: Currency Api Dashboard
Author: ghostcompiler

A premium, high-performance developer currency exchange rate platform built on Laravel 13, React 19, and Redis.

🌐 Overview

ghostcompiler-api is a complete developer API and dashboard solution modeled after Open Exchange Rates. The application pulls and processes daily international currency values for over 150 countries, optimizes performance using high-speed Redis database caching, logs query analytics, and exports developer API credentials.

Key Features

Secure API Tokens: Full CRUD token lifecycle manager inside the developer panel. Custom base fallback currencies (defaults to INR system-wide).
Daily Sync Engine: Automated daily command retrieves live values and updates local metadata (currencies, countries, names, rates).
Redis Caching: Cached endpoint metrics reduce database queries and ensure sub-10ms response times.
Sleek Developer Landing Page: Beautiful dark mode interface complete with Framer Motion animations, live guest conversion widgets, and code sample highlights.
Scalar Reference Docs: Interactive API documentation served at /docs with Scalar's modern dark theme UI, complete with Bearer Try-it-out options.

🛠️ Technology Stack

Framework: Laravel 13.x (PHP 8.5)
Client: React 19.x (InertiaJS v3)
Styling: TailwindCSS v4 with Shadcn theme variables
Cache: Redis (via predis driver)
Database: PostgreSQL
Docs UI: Scalar UI via CDN + /public/openapi.json
Test Suite: Pest PHP

📂 API Reference Endpoints

All API endpoints are prefixed with /api/v1 and require your token provided inside the header: Authorization: Bearer <your_token>.

1. Authorize / Validate Token

Route: GET /api/v1/authorize
Description: Validates that a key is active and returns metadata.

2. Get Rates by Token Default Currency

Route: GET /api/v1
Description: Returns active exchange rates relative to the token's configured base currency (falls back to INR).

3. Get Rates by Custom Base

Route: GET /api/v1/{code}
Description: Returns active exchange rates relative to the {code} base currency.

4. Convert Currency

Route: POST /api/v1/{from}/{to}
Request Body: {"amount": 100}
Description: Converts a specific amount from {from} to {to}.

🚀 Getting Started

1. Requirements

Ensure you have PHP 8.5+, Composer, Node.js 18+, Redis, and PostgreSQL running on your machine.

2. Install Dependencies

composer install
npm install

3. Environment Setup

Copy .env.example to .env and configure your database and Redis connections:

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=currency_db
DB_USERNAME=postgres
DB_PASSWORD=secret

REDIS_CLIENT=predis
REDIS_HOST=127.0.0.1
REDIS_PORT=6379

Tip

To sync live exchange rates, you must configure your Open Exchange Rates app credentials. You can register and generate an API access token by visiting Open Exchange Rates Signup & Key Generator.

4. Database Migrations

php artisan migrate

5. Generate Route Definitions

Ensure Wayfinder compiles route types:

npm run build

6. Run Sync Command

Sync currencies and rates from providers:

php artisan app:sync-currencies

7. Run Server

Start the concurrent servers (Laravel development server + Vite dev watcher):

npm run dev

🧪 Testing and Formatting

To verify the features remain stable, execute feature assertions:

php artisan test --compact

Format modified PHP files before committing:

vendor/bin/pint --dirty --format agent

⚙️ Repository Details

URL: git@github.com:ghostcompiler/currency-api-dashboard.git

Development Environment

Built using ServBay

Mac M4 Tested
macOS Apple Silicon
Powered by ServBay

import { Head } from '@inertiajs/react'; import { Search } from 'lucide-react'; import React, { useState, useMemo } from 'react'; interface Currency { id: number; code: string; name: string; country: string | null; rate: number; active: boolean; } interface CurrenciesPageProps { currencies: Currency[]; } export default function CurrenciesPage({ currencies = [], }: CurrenciesPageProps) { const [searchQuery, setSearchQuery] = useState<string>(''); // Calculator mapping helper for INR calculations const inrUsdRate = useMemo(() => { const inrCurrency = currencies.find((c) => c.code === 'INR'); return inrCurrency ? inrCurrency.rate : 83.25; }, [currencies]); // Filter currencies for directory search const filteredCurrencies = useMemo(() => { if (!searchQuery) { return currencies; } const query = searchQuery.toLowerCase(); return currencies.filter( (c) => c.code.toLowerCase().includes(query) || c.name.toLowerCase().includes(query) || (c.country && c.country.toLowerCase().includes(query)), ); }, [currencies, searchQuery]); return ( <> <Head title="Currencies Directory" /> <div className="min-h-screen w-full space-y-6 bg-background p-4 text-foreground md:p-6"> {/* Directory Content (Full Width) */} <div className="bg-card text-card-foreground shadow-xs"> <div className="flex flex-col gap-4 border-b border-border pb-3 sm:flex-row sm:items-center sm:justify-between"> <div> <h1 className="text-lg font-bold"> Exchange Rates Registry </h1> <p className="text-sm text-muted-foreground"> Comprehensive lookup list of supported systems. </p> </div> <div className="relative w-full sm:w-80"> <Search className="absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" /> <input type="text" placeholder="Search code, currency name or country..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="flex h-9 w-full rounded-md border border-input bg-transparent py-1 pr-3 pl-9 text-sm shadow-xs transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden" /> </div> </div> <div className="pt-6"> <div className="overflow-hidden rounded-lg border border-border"> <div className="max-h-[600px] overflow-x-auto"> <table className="w-full border-collapse text-left text-sm"> <thead> <tr className="border-b border-border bg-muted/40 font-semibold text-muted-foreground"> <th className="w-20 p-3.5 text-center"> Code </th> <th className="p-3.5"> Currency Description </th> <th className="hidden p-3.5 md:table-cell"> Country Mapping </th> <th className="w-48 p-3.5 pr-6 text-right"> USD Rate </th> <th className="w-48 p-3.5 pr-6 text-right"> INR Rate </th> </tr> </thead> <tbody className="divide-y divide-border"> {filteredCurrencies.length === 0 ? ( <tr> <td colSpan={5} className="p-8 text-center text-muted-foreground" > No currencies found matching "{searchQuery}" </td> </tr> ) : ( filteredCurrencies.map((c) => { const inrRate = inrUsdRate ? c.rate / inrUsdRate : 0; return ( <tr key={c.id} className="transition-colors hover:bg-muted/10" > <td className="p-3.5 text-center font-mono font-bold text-primary"> {c.code} </td> <td className="p-3.5 font-semibold text-foreground"> {c.name} </td> <td className="hidden max-w-sm truncate p-3.5 text-xs text-muted-foreground md:table-cell" title={ c.country || 'N/A' } > {c.country || 'N/A'} </td> <td className="p-3.5 pr-6 text-right font-mono font-semibold text-foreground"> {c.rate.toLocaleString( undefined, { minimumFractionDigits: 4, maximumFractionDigits: 6, }, )} </td> <td className="p-3.5 pr-6 text-right font-mono font-semibold text-primary"> {inrRate.toLocaleString( undefined, { minimumFractionDigits: 4, maximumFractionDigits: 6, }, )} </td> </tr> ); }) )} </tbody> </table> </div> </div> </div> </div> </div> </> ); } CurrenciesPage.layout = { breadcrumbs: [ { title: 'Dashboard', href: '/dashboard', }, { title: 'Currencies', href: '/dashboard/currencies', }, ], };

Currency Api Dashboard