Implementation Overview

Loom 🚀: Watch Demo

A quick summary of what’s been implemented, where files live, and how to run everything.

1. Entities & Migrations

   Entity
   packages/server/src/entities/exchange-rate.entity.ts

   Defines the ExchangeRate table fields:

    currency
    code
    amount
    rate
    (inherited) createdAtUtc, updatedAtUtc, etc.
   

   Migration
   packages/server/src/migrations/1695820000000-create-exchange-rate.ts

   SQL to create the exchange_rate table in Postgres.

2. Backend Service & Resolver

   Service
   packages/server/src/services/exchange-rate/exchange-rate.service.ts

    Checks for cached rates younger than 5 minutes (unless bypassCache=true).
    Builds today’s dd.MM.yyyy URL, fetches the CNB TXT file, parses it, clears old rows, saves & returns new rates.
    Wraps the HTTP call in try/catch and throws InternalServerErrorException on failure.
   

   Resolver
   packages/server/src/services/exchange-rate/exchange-rate.resolver.ts

   GraphQL query signature:

   exchangeRates(bypassCache: Boolean = false): [ExchangeRate]
   

   Passes the bypassCache flag down to the service.

3. Backend Unit Tests

   Service tests
   packages/server/src/services/exchange-rate/exchange-rate.service.spec.ts

    Mocks TypeORM repo methods (find, create, clear, save) and axios.get.
    Covers three scenarios: cache hit, cache miss (fetch & save), HTTP error.
   

   Resolver tests
   packages/server/src/services/exchange-rate/exchange-rate.resolver.spec.ts

    Instantiates the resolver with a fake service.
    Verifies that exchangeRates(false) and exchangeRates(true) call the service with the correct argument.
   

4. Frontend Hook & Components

   Hook
   packages/client/src/hooks/useExchangeRates.ts

    Wraps Apollo’s useQuery, tracks "last fetched" timestamp, computes human-friendly "age", and exposes refetch().
   

   Component
   packages/client/src/components/ExchangeRates.tsx

    Search box filters & highlights matches in any column.
    "Last fetched" displayed as a MUI Chip with clock icon.
    Refresh IconButton calls refetch({ bypassCache: true }).
    MUI Table with loading/error states inside the table container.
   

5. Frontend Theming & App Structure

   Theme util
   packages/client/src/theme.ts

    getDesignTokens(mode) for light/dark palette.
    ColorModeContext for toggling.
   

   Entry & Providers
   packages/client/src/main.tsx

    Wraps <App /> with ApolloProvider, ColorModeContext.Provider, ThemeProvider, and CssBaseline.
   

   App
   packages/client/src/App.tsx

    Top bar with page title and dark/light toggle.
    Renders <ExchangeRates /> below.
   

6. Running Unit Tests

   Navigate to the server package:
   cd packages/server

   Run all unit tests:
   yarn test
   Jest auto-discovers *.spec.ts files under src/.

7. Starting the App Locally

   Backend
   cd packages/server
yarn start:dev

   Frontend
   cd packages/client
yarn dev