react api-rest husky-hooks saga yield state-management usereducer-hooks hooks react-hooks jest-tests jsdoc

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

React state manager

Docs and tools

About

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