Emerald - Hub Application Prototype Challenge

CHALLENGE OBJECTIVES

• Build the desktop prototype for the Emerald project.

 
PROJECT BACKGROUND

• We need to build a container application where many smaller UI applications can be embedded. Some of these smaller applications may or may not exist today.
• For the moment, we’re focusing on the container app and the details of the Sentinel UI and Bulk Management apps.
• After this prototype is done, we’ll move on with API integration.

 
TECHNOLOGY STACK

• ReactJS Latest (v16)
• Redux
• HTML5
• Javascript
• CSS

 
API INTEGRATION
Although the API is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from JSON files and storing the data in the Redux store. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
 
You must not hardcode any test data into the code.
 
SCREEN REQUIREMENTS
All screens from the design are in scope of this challenge. We’ll provide design source file and the marvelapp link in the forum.
 
App Container
On this page, only the Bulk Manager UI and Sentinel UI cards are supposed to work, the other UI elements don’t have to respond to user actions.
 
Sentinel Database

• This page is navigated from App Container page by clicking the Sentinel UI card.
• On this page only the Home tab at the top is supposed to work.
• Pagination, search, filters above / below the table must work.
• Clicking a row will show the read-only details view
• Create New and Edit should work.
• Please implement field validation error for record creation / editing, as shown in screen #18 of the marvelapp.

 
Bulk Database

• This page is navigated from App Container page by clicking the Bulk Manager UI card.
• Pagination, search and filters above / below the table must work.
• Create New and Edit should work.
• Clicking View Batch on a row will navigate to the Batch Database page.
• Please implement field validation error for record creation / editing, as shown in screen #18 of the marvelapp.

 
Batch Database

• From this page users can navigate back to the Bulk Database page.
• Pagination, search and filters above / below the table must work.
• Stop must be implemented (simulated) as shown in design.
• Create New and Edit should work.
• Clicking View Jobs should navigate to the Job Database page.
• Please implement field validation error for record creation / editing, as shown in screen #18 of the marvelapp.

 
Job Database

• From this page users can navigate back to the Batch Database page.
• Pagination, search and filters above / below the table must work.
• Stop must be implemented (simulated) as shown in design.
• Create New and Edit should work.
• On clicking the Refresh button, show the job execution error as shown in screen #17 of the marvelapp. The Resolve Now button will lead to screen #18 of the marvelapp.
• The menus must be implemented (screen #19 and #20)
• Please implement field validation error for record creation / editing, as shown in screen #18 of the marvelapp.
• Sections in the menu popup (scree #20) must be expandable and collapsible.

 
GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.
• The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*720 (height is actually unlimited since page can scroll).
• Searching / filtering should work whenever applicable.
• Pagination should work whenever applicable.
• Filtering/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).
• 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
• Implement validation errors (for example: login error as shown in design)
• 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 setup to handle transpiling the syntax to the current JavaScript standard.
• Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.
• 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 typescript and 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
• Mac: Safari Latest, Chrome Latest, Firefox Latest

Final Submission Guidelines

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.