FTA - React UI Prototype

Create the UI Prototype for the provided design using React stack.

Project Background

Our client has an application called FTA which is written using Adobe Flex. They’d like us to rewrite it using modern web technologies.

We have already reimplemented all of the screens and the majority of UI elements in PSD format in the previous challenge. In this challenge, we will create a UI prototype using reimplemented designs which are provided.

Technology Stack

• React 16

• Redux

• CSS Modules (or Styled components)

Code access

There is no base code for this challenge. You may use a bootstrap code you are comfortable with which match our requirements.

On the forum we will provide you with:

• Design source in PSD format.

• Screens document which provides a description for the functionality.

• Archive with all the icons.

• API document and postman collection.

• Deployed existent Flex application connected to the same mock API for reference.

Individual requirements

Main goal

Our main goal is to recreate the UI of the existent Flex application. We already reimplemented designs in PSD format and it was approved by the client. So PSD repeats the Flex application close enough and you can follow provided PSD designs.

If provided PSD designs don’t have some elements you can follow provided screenshots of the Flex application or live Flex application which we run and provide a link for you on the forum.

Most of the data will come from the mock API service which is provided in the forum.

Browser Requirements

Must work good in both of these browsers.

• Internet Explorer 11

• Chrome 69+

UI Requirements

• For 9 admin screens 06-01 - 06-09 design has fixed width. All the forms, menus and panel have fixed width on these screens.
  For 5 non-admin screens, 01 - 05 design should be fluid. Forms and tables have fluid width. Modal popups have fixed width.
  Please, check deployed Flex application for reference to see which elements have to be fluid and which have the fixed width/height. Our aim is to recreate the existent app as close as possible.

• The minimum resolution for the HTML should be 1280x1024.

• In the design, we use custom styled elements for
  - select
  - checkboxes (two styles)
  - radio inputs
  - input with buttons to increment/decrement value

• We can use native browser scrollbars. No need to implement custom styles for scrollbars like in existent app and designs.

Tech requirements

• The prototype should be built using React 16 and Redux.

• For the styling, you have to use any technology which protects us from CSS class names collisions like CSS Modules or Styled Components.

• Avoid using multilevel nesting in styles, both technologies like CSS Modules or Styled Components let us do it.

• It’s preferable to define all the colors which we use in styles as variables in one file. (But not required)

• Keep most of the data in the Redux store and avoid using state. Later we will need to be able to restore the app state when the application starts. We could to it if the application is rendered from the Redux store. Still can use the state to manage small things.

• Follow best React best practices. Split components into dumb components and containers. Split code into action, reducers, services (to call API).

• No data should be hardcoded in components, all the data should come from service. The code should call Redux actions, actions should call service methods and put response data to the Redux store. We have mock API implemented for some endpoints. For the rest of endpoints, you can hardcode response inside service methods (NOT inside actions, redux store or components).

• For most select fields you can hardcode data directly in components unless we have data which comes from mock API.

• We should be able to deploy the prototype to Heroku.

• Use eslint to check code quality. “airbnb” eslint pre-configuration is fine, but you may use another one.

• All of the endpoints for the mockup should be externalized and able to be modified from one place.

Common components

Most of the design elements are repeated across the application. They should be implemented as dumb components and be reused. In particular, at least these components should be reusable:

• Tooltip (I recommend using https://github.com/FezVrasta/react-popper to implement it as it has very good positioning implementation, but you may use another plugin)

• Input field

• Select field

• Buttons

• Section with header and body (optionally, the body may be expandable/collapsible)

• Modal windows (with the ability to open several modal windows on top of each other at the same time, each modal also has its own backdrop)

• Alert messages (small Modal with a title, message, and button)

• Checkboxes (two types)

• Radio inputs

• Form search results table

• Input with a calendar widget

Deployment guide and validation document

Create a README.md file in the root of your code base and describe:

• project tech requirements

• how to configure project (backend base URL and so on)

• how to deploy project locally

• how to deploy project to Heroku

Important Notes

All the provided screens and documents are under NDA and shouldn’t be shared with anyone.

Final Submission Guidelines

• The source code of React application

• README.md should be in the root of React application code folder