https://github.com/finesse/currency-exchange-test-task

A React/Redux test task for a financial organization
https://github.com/finesse/currency-exchange-test-task

application css-modules enzyme jest react reactjs redux redux-saga test-task

Last synced: about 2 months ago
JSON representation

A React/Redux test task for a financial organization

• Host: GitHub
• URL: https://github.com/finesse/currency-exchange-test-task
• Owner: Finesse
• License: mit
• Created: 2019-02-09T08:34:39.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-16T03:31:07.000Z (over 7 years ago)
• Last Synced: 2026-01-03T19:19:09.403Z (5 months ago)
• Topics: application, css-modules, enzyme, jest, react, reactjs, redux, redux-saga, test-task
• Language: TypeScript
• Homepage: http://finesse.github.io/currency-exchange-test-task
• Size: 767 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Currency exchange test task

[![Build Status](https://travis-ci.org/Finesse/currency-exchange-test-task.svg?branch=master)](https://travis-ci.org/Finesse/currency-exchange-test-task)

The goal was to make a React application that simulates the currency exchange screen functionality of the given application:

https://www.youtube.com/watch?v=c0zPSiKYipc&t=29s

The task is described more detailed here:

[task.pdf](task.pdf)

## How to run the application

Just open http://finesse.github.io/currency-exchange-test-task.

The application supports all the modern browsers (IE is not at the party).

If you want to run it locally:

1. Download the repository

2. Open a terminal and go to the project directory

3. Run `npm install`

4. Run `npm start`

5. Open http://localhost:3000 in a browser

If you want to deploy it on a server, do steps 1-3 and then run `npm run build`.

A `build` directory will be created in the project directory. Serve the content of the directory with your web server.

## How to test

Run `npm test` to perform the tests. Another checks are performed during running `npm start` and `npm run build`.

## Architecture concepts

- [Redux](http://redux.js.org) is used to manage the application state

- [Redux-Saga](redux-saga.js.org) is used to manage asynchronous actions because it allows to write very testable code

- The architecture may seem overcomplicated.

    I chose it to show my skills and because it fits for complex applications (which financial applications usually are).

- [Big.js](http://github.com/MikeMcl/big.js) is used for precise money calculations (e.g. for the famous `0.1 + 0.2`)

- The "beutiful" React components are stored in `src/view/components`, the "clever" React components are stored in `src/view/containers`

- Select field is a more convenient way than slider to pick from many currencies

- The [FloatRates](http://floatrates.com) website is used to get exchange rates because it doesn't require an API key.

    Not requiring an API key makes the application much easier to install.