Register
Submit a solution
The challenge is finished.

Challenge Overview

CHALLENGE OBJECTIVES

  • Finish the rest of the alert pages (about 6 unique pages).

 

TECHNOLOGY STACK

 

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 new pages to the existing Alert micro frontend in the provided 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.

 

COMMON LIBRARY

If during the development of new pages you find new components that could be reused, please put that in the common library folder instead of including them in the alerts frontend.

 

UNIT TESTS

You are not required to create unit tests for the new pages but existing unit tests must be maintained, breaking or deleting any existing unit tests is considered missing a major requirement.

 

SCREEN REQUIREMENTS

Screens 1 and screens 7 - 11 from the marvel app are in scope of this challenge.

 

Task List

  • The task list page needs to be updated to have a link to initiate creation of alerts. Please check the screenshot in the forum to understand what exactly needs to be updated.

 

Alert Dashboard

  • In the previous challenge we have implemented the basic table feature and things like filter, searching, sorting etc.

  • In this challenge we need to implement the alert details view which is expanded by clicking the arrow in a row.

  • When details are shown the user can also edit the data and save.

  • Alert creation must work as per design. And the newly created alert should be shown in the table.

  • When at least one row is selected, the delete icon should be enabled. On clicking delete the user should be asked to confirm the deletion.

  • All data should be coming from mock api using json.

  • Export should dump the table data into a csv file that the user can save.

  • Actions like Save, Delete, etc… should call a mock api, and show a loading indicator to simulate the process.

  • State Management of alerts should be properly handled.

  • Error handling

    • User is not authenticated

    • Invalid data input on save

    • Operation failed (save / delete)

 

GENERAL REQUIREMENTS

  • Must use ReactJS and follow the provided design unless otherwise specified.

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

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30125888