Readme

This is a React App to submit Reliant test. This application is the frontend part of the Rails API developed for the same purpose. Here I made a paginated DataTable for each Resource available, a HTML Form to create Resources and a preview mode which show the YAML formatted spec for the HTML Form.

This application was built using these frameworks and versions:

• Node 14.17.3
• Yarn 1.22.10
• React 17.0.2
• Material UI 4.x
• Axios 0.24.0
• React Toasts 3.0.6
• React Ace 9.5.0

Available Scripts

In the project directory, you can run:

1 - yarn

To install all dependencies and prepare the application to run.

2 - yarn 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.

• NOTE: This app talks to an API located in http://localhost:3001

Custom JSON and YAML inputs

The forms used to fill the FormSpec uses the React Ace framework wich can be customized to parse some code languages instead using the default textarea.

Example of YAML text formatted using Reat Ace (read only):

Example of JSON text for input FormSpecs:

• NOTE: For the YAML template, the parser validation is not working.

API Response messages

Sending data by Forms can result in Bad Request response among other statuses. Those forms can show what happened using the Material UI Alert component:

DataTables

Using a TableContainer component from Material UI, I customized and standardized a component that uses an URI to show paged list results and navigate through the pages sending new requests for the API. This component also can handle different Rows Per Page and can customize the columns through a header content. In some cases, the columns can even add another components with customized actions like the image bellow:

Additionally, the rows click can lead to another route, facilitating navigation between tables and record details.

Loading Component

The Loading component was built with CircularProgress component from Material UI library. It is useful to ensures end users know when the application is waiting for the API responses.

Toast Messages

When the API respondes with errors like communication failure, the ToastMessage components shows that information to the user. This component was built using ToastStore component from the react-toasts library.

Themes

Built to work with custom colors, I developed some basic themes that can be changed in the src/components/themes/theme.js where you can choose one between the bellow:

• Black And Orange
• Blue Gray
• Brown Sugar
• Eletric Blue
• Royal Purple
• Sailor Blue
• Sky Blue
• Space Cherry

It becomes easy to build your own theme, you just need to find colors and fill the following specification:

const colors = {
    primary: '#101820FF',
    primaryLight: '#2D465EFF',
    primaryDark: '#000000FF',
    secondary: '#F2AA4CFF',
    secondaryLight: '#f7d09cFF',
    secondaryDark: '#a37436FF',
    inherit: '#9ea7b0FF',
    default: '#D3D0CBFF'
}

export default colors;

To use a theme just change the line number 2 of the src/components/themes/theme.js pointing to your desired theme:

import colors from './spaceCherry';

Example of some themes:

• Space Cherry

• Brown Sugar

• Sky Blue

• Royal Purple

What is missing

• Improve UI Design
• Make the YAML parser works to show formatting errors
• Create a customized and generalized Form to reuse on all of the forms (passing only the content need to catch after fill the form)
• Improve codes for the "fulfill form" and "preview yml context"
• Centralize some common styles used in all application
• Create a Footer component
• Implement tests
• Improve responsiveness