PR: Implement Exchange Rates GraphQL Query & Frontend Display

Overview

This pull request implements the required functionality for fetching, caching, and displaying exchange rates, meeting the provided specifications for both backend and frontend. The changes include:

• A new GraphQL query on the backend to fetch exchange rates.
• Integration with the Czech National Bank to get the latest rates.
• Caching using a Postgres database with a 5-minute lifetime.
• A simple React frontend displaying the exchange rates and cache age.

Backend Changes

GraphQL Query for Exchange Rates

• Implementation:
  A new GraphQL query has been added to return a list of exchange rates, integrating NestJS, TypeScript, and GraphQL.

Data Fetching from the Czech National Bank

• Details:
  The service located in fullstack/task/packages/server/src/services/exchange-rate now retrieves the latest rates from the Czech National Bank website.

Caching with Postgres

• Mechanism:
  • Fetched exchange rates are saved in the Postgres database using TypeORM.
  • The cache expires after 5 minutes, after which new requests fetch and store fresh data.
  • During the cache lifetime, data is served from the database to reduce external API calls.

Frontend Changes

Exchange Rates Table

• Implementation:
  A new React component (using TypeScript) has been added to display a table of exchange rates with the following details:
  • Country
  • Currency
  • Amount
  • Code
  • Rate

Cache Timestamp Display

• Details:
  A section has been added to show how long ago the exchange rates were fetched, based on the cache timestamp. This helps inform users about the data's freshness.

UI examples

Main

Screenshot 2025年01月20日 200558

Timestamp

Screenshot 2025年01月20日 200604

Small UI improvement: dark/light theme

Screenshot 2025年01月20日 201030

Notes

I have some issues with pnp on current machine so just used clasic approach.