Skip to content

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

Notifications You must be signed in to change notification settings

mdibenedetto/rate-dashboard

Repository files navigation

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

App Preview

The user choose a base rate reference

App Preview

The user choose a date rate reference

App Preview

The user click on load button

App Preview

The application display a loader animation

App Preview

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

App Preview

The application display an error message in case of issues

App Preview

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

App Preview

  • 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.

App Preview

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published