Requirements

• Ensure to have Node 8 LTS or above.
• run npm i to install the dependencies
• run npm start to start the application

Description

This repo contains a currency exchange dashboard. The app displays a list
of currencies based on the params provided by the user.

Users can set a base currency and date of reference, once they click the
button load a table will be filled with all currencies.

Data is to be retrieved from the following open source API:
www.vatcomply.com/documentation#rates.

Application preview

Initial view

The user choose a base rate reference

The user choose a date rate reference

The user click on load button

The application display a loader animation

The application loads the result into the table and displays a success feedback

The application display an error message in case of issues

Implementation details

• React framework is used.
• ReactMaterial UI is used for basic styling, for the Datagrid component
  and the message feedback
• Application state management uses
  • useReducer hook as layer to handle the business logic
  • redux-saga to hnadle asyncronous actions
  • Context API to share state beween nested components

• Appplication uses ESlint to keep code style consistency
• Appplication uses JSDOC to documentate the code and to enforce
  data type consistency such:

/**
 * @typedef {{
 *    filter?: {
 *      date?: string
 *      base?: RateCodes
 *    }
 *    feedback?: {
 *      severity: string
 *      message: string
 *      autoHideDuration: number | null
 *    }
 *    rate?: Rate
 *    loading?: boolean
 *    error?: any
 *    tableRate?: RateTableRow []
 * }} AppState
 *
 * */

/** @type {import("../model/rate").AppState} */
const initialState = {
  rate: null,
  loading: false,
  error: null,
  tableRate: [],
};

• Appplication uses the tool husky to run npm run lint before every git commit
  and npm run test before every git push
• Application was unit tested by using the tool Jest. Although the entire
  application is not fully covered, I implemented different kind of unit testing
  for the main components and business logic.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

References

React UI

• reactjs
• material-ui
• useEffect

React state manager

• React Context for Beginners – The Complete Guide (2021)
• Context API
• useContext
• useReducer
• redux-saga
• use-saga-reducer

Docs and tools

• jsdoc
• eslint
• husky