Challenge Overview
A Large IoT and Power Management Company would like to consolidate all of their employee technical competency into a single tool which can be used to track at multiple levels. The goal is to have an application that allows CoE leaders to define roles with their competency requirements, and actions or trainings which prove each competency level. Managers and Directors will be able to track profiles with roll ups of competency in specific sections of the workforce.
In this very first challenge, we need you to implement the first set of pages for our desktop app based on the storyboard (provided on the challenge forum, available on registration) using ReactJS + Redux and Electron.
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.
Authentication
The design doesn’t have a login screen but you need to implement a very basic login screen (registration is not required) and provide a set of mock login credentials for demo purposes.
Submitting the login form with invalid credentials should show an error.
User Roles
The following types of users have access to the app:
-
Leader
-
Director
-
Manager
The logic for each user type will be handled on the backend. The only different on the frontend will be the sidebar (Directors and Managers only have access to the AGGREGATE TOTALS page and the user type badge at the top right of the page).
Challenge Scope
-
Create the electron wrapper and setup the required scripts to run the app in development mode as well as to publish the final app installer.
-
All pages under the “Manage” group from the left sidebar are in the scope of this challenge.
-
Create a detailed README file including information on how to setup and run your application.
Right Sidebar Logic
-
When selecting an entity from the main content (eg: a user from the table), the details should be shown on the sidebar.
-
When an entity is selected, show the “Unlock to make change” button to make the form editable.
-
Clicking that “Unlock to make change” button should show the form to edit the entity.
General Notes
-
The header should be fixed at the top of the page and should always be visible.
-
The sidebars should have fixed width while the main content should have fluid width to fill all available space.
-
The menu groups on the left sidebar should be collapsible.
-
Do NOT create the floating bookmark button. We don’t need it.
-
Searching should be done on Enter key press.
-
Pagination should work.
-
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).
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.
Platform Requirements
You need to provide instructions on how to test (dev mode), build (create installer) and run the application for the following platforms:
-
Windows
-
MacOS
-
Linux
If you have any questions, feel free to ask on the challenge forum!