Dragonnet dRISK ReactJS Prototype - Library and Alert Pages 1

CHALLENGE OBJECTIVES

• Refactor some components in the base code to a shared library.

• Build around 3 new unique pages.

 

TECHNOLOGY STACK

• ReactJS v16.8

• Micro Frontend Framework

• Redux

• Typescript

• HTML5

• CSS

 

MICRO FRONTEND FRAMEWORK REQUIREMENTS

This prototype must be developed following the Micro Frontend Framework. Micro Frontend best practices and guidelines must be strictly followed, which include but are not limited to the following:

• We expect no code change in each application page to integrate these Micro Frontends in multiple containers.

• Packaging of each Micro Frontend has to be independent. Please keep the project structure and build process.

• Every application page navigation should check whether the user is set as Authenticated. If not authenticated, redirect to the error page (follow existing prototype).

• Authentication is a cross-cutting concern that is owned by the landing page (container) that hosts these Micro Frontends. We expect the router to inject into each micro frontend on initialization.

• Micro Frontend Inter dependencies - we recommend having them communicate or depend on each other as minimum possible. We understand from our use case following data needs to be passed b/w micro frontends which is cross cutting concerns, please make use of best practice (example: custom events) to decouple the applications:

  • Authentication token, Language selection and User Preferences object across frontends. 

• Reusable Components as Library - make sure the shared UI component has only UI logic, and no business or domain logic. Example: we expect Task List components described below does not include domain specific attribute logic inside the component.

• Multi-lingual support at all levels of components. Multi-lingual should be extensible to any new language.

• Need to follow javascript integration approach.

• Navigation integrates together using JavaScript.

 

MICRO FRONTEND PACKAGES

This challenge will add a new Alert micro frontend to the prototype.

 

API INTEGRATION & STATE MANAGEMENT

• You need to implement all the necessary (mock) UI services and http service adaptors  to fetch data from JSON files. You must not hardcode any test data into the code.

• Please create JSON files based on the design (and following existing JSON conventions) to mock backend calls with the http service adaptors.

• You need to implement full state management following React’s best practices.

• The expectation is that all pages should fully function and will be ready to plug with actual backend integration and deploy to next environments once we swap the mock services with real ones.

 

REFACTOR & COMMON REQUIREMENTS

A major requirement of this challenge is to refactor the existing code and extract common components to a shared library so that they can be used in different micro frontends, and as you can see from the design the Alert pages will be able to reuse quite a few of these, a few notes here:

• Existing unit tests must be maintained and coverage should not be reduced in this challenge.

• You may need to move the user identity and MicroFrontend class to the new shared library, please analyze the code and decide if that’s necessary.

• Localization is in scope for all new UI elements, please follow the same approach we are using in the base code.

 

SCREEN REQUIREMENTS

Screens 2 - 6 from the marvel app are in scope of this challenge, but unit tests are NOT in scope. Please note these pages will be in a new / separate micro frontend.

 

Alert Dashboard

• This page is very similar to the Task List page in that we have some common components on the page such as:

  • Search bar

  • Filters

  • Table

• Table data should be loaded from the mock local api which returns a json in which each object contains all fields as shown in screen 3 of marvel app.

• Each of these columns can be set to show or hide via this popup, this must be reflected in the table in real-time.

• Right now the columns in the table don’t match the columns on the popup, please update the table to have match columns.

• The table could be showing a large number of rows, so make sure there’s no performance issue with loading, showing and scrolling through the rows.

• Please implement the same scroll to load more rows feature we already have on the Task List page.

• Make sure the table shows properly when there’s no data at all.

• Just like the Task List page, search should be done via an API call which we’ll simulate by showing a loading indicator, and then load the data. You must have a mock service for this and you need to call it from the UI code.

• In the filters section, please follow the design except for the Alert Amount field, which you can implement like RE Amount that we have on Task List filters.

• Filtering will also trigger an API call, we need to simulate this by showing a loading indicator, then refresh the list of alerts. 

  • On Apply Filters, we should also save the filters to preferences (api call)

  • Whenever user navigates to Alert page, filters from preferences are applied automatically

  • When Clear Filters is clicked, remove filters from both the page and preferences (api call)

• Sorting should also be simulated like a server call, you must have a mock service for this and you need to call it from the UI code (the mock should sort the rows properly using data from json).

• State Management of alerts should be properly handled.

• The add, download and delete buttons don’t need to work for now.

• Error handling

  • User is not authenticated

  • Alert data could not be fetched.

 

GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.

• Common scenarios where data is shared between components - Authentication, Theme, User preferences including Language preference, other reference data like drop down values etc. Please enable me to share this in context across all components.

• Application Styling should be Theme/Skin based, clearly separating styles into CSS files.

• The main content should have fluid width to fill all the available space, and the minimum resolution that works with the base code must be maintained.

• The prototype must handle exceptions and communicate to users whether or not exceptions can be handled. User should never be clueless if some exception has raised

• Although User input screens are minimum in the challenge scope, we expect you cover basic validation like empty input/selection, number validation etc.

• Searching / filtering should work whenever applicable.

• Pagination should be implemented as explained (scroll to load more).

• Filtering/search/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc). Make sure you pass such parameters to your mock services.

• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

• Show loading spinners when populating data from API / local JSON to UI

• No linting errors

• No errors with prod builds

• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 

CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been set up to handle transpiling the syntax to the current JavaScript standard.

• Use .tsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.tsx. Make sure your linter is configured to work with tsx as well.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Create reusable components.

 

JAVASCRIPT REQUIREMENTS

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• Use ES6 linter for code quality

 

LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

BROWSER REQUIREMENTS

• Windows: IE 11+, Chrome latest, Firefox latest, Edge Latest (Chromium based one)

• Mac: Safari Latest, Chrome Latest, Firefox Latest, Edge Latest (Chromium based one)

Final Submission Guidelines

• Full code that covers all the requirements.

• A detailed README file including information on how to setup and run your application (make sure you update README to handle the new micro frontend).