kantor_^*

Currency Exchange App and Widget

Overview

"Kantor" is a mobile-friendly Currency Exchange App built on React and TypeScript. Exchange rates built on top of fake data from service rates.denis.app.

Features

• User-friendly
• Mobile-friendly
• Written entirely in React, TypeScript, Hooks, styled components
• Accessible (super important for online banking)
• Covered by automated tests (widget)
• Rates from European Central Bank, refreshed every 10 seconds
• Three currency accounts with USD, EUR, GBP, - but widget supports more
• Supports account balances

Architecture

The project consists of three parts:

1. Currency Exchange Widget as ready-to-use ES Module
2. UI library with ready-to-use ES Module with a styled components, color palette, etc
3. Simple Client app with a simple state managment build on CRA with TypeScript.

The monorepo is managed by Yarn workspaces. Folders structure contains:

applications/*

Directory for full-fledged applications. Contains main Client application.

packages/*

Directory for reusable modules, that ready to be published to some private/public NPM registry, GitHub Packages or any other package registry. Contains two modules with a @bank/* scope:

packages/react-currency-exchange-widget

Usage

import {CurrencyExchangeWidget} from "@bank/react-currency-exchange-widget";

<CurrencyExchangeWidget
  accounts={{
    USD: 100.01,
    EUR: 99,
  }}
  currencies={{
    USD: { symbol: "$", name: "US Dollar", code: "USD" },
    EUR: { symbol: "€", name: "Euro", code: "EUR" },
  }}
  defaultPair={{
    from: "USD",
    to: "EUR"
  }}
  onExchange={(value) => {}}
/>

packages/ui-library

Usage Example

import {Heading1, PrimaryButton, Palette, GlobalStyles, ActionButton} from "@bank/ui-library";

<PrimaryButton type="submit">Fancy Button</PrimaryButton>

packages/exchange-rates

Usage

import {convert} from "@bank/exchange-rates";

const amount = await convert(100, "USD", "EUR", "latest");

Live Demo

kantor.denis.app

Quick Start

Installation

Use yarn packages manager to install packages:

yarn

Run locally

yarn start

Tests

yarn test

TBD

• error handling
• cover client app with unit tests
• add storybook for ui library
• add cypress e2e tests

License

The Unlicense

Author

Denis Kalinichenko

_{^{* "currency exchange bureau" from polish.}}