Register
Submit a solution
The challenge is finished.

Challenge Overview

BASIC REQUIREMENTS
  • Build Electron and the Forge also React as desktop native app based on storyboard design
  • Use PX Blue Design System Components and follow challenge requirements
  • Use static data for this challenge, note: there will be the next challenge to linking with JSON-server
  • Must support unit testing for this ElectronJS app
  • Testing desktop native app on required System Operation

CHALLENGE GOAL
The goal of this challenge is to build native desktop app that allows the user to configure a set of devices that are included in a particular customer order.

PROJECT BACKGROUND
  • This application is used to configure a set of devices that are included in a particular customer order.
  • The user starts by entering the order number.
  • The application queries the API and retrieves the order details.
  • These details include a list of individual devices that are used to populate the devices list. The details for each device are also fetched from the API.
  • Each of these devices needs to be configured before the order is complete.
  • Devices are configured by navigating to the device details page and clicking the Configure button.

CHALLENGE ASSETS
Storyboard: https://drive.google.com/open?id=1gL0P4P_BYGeFgGjcj1gF_q7e0HPMnnYT
MarvelApp Click-Flow: https://marvelapp.com/58219ic

Technology Stack
Electron and the Forge: https://electronforge.io/
ReactJS

OS Requirements
IMPORTANT: Your submission need build as desktop native app that will work on these required OS:
Windows 7
Windows 10
Mac

Technical Requirements
Thor DC Starter application should adhere to the following technical requirements.

1. Electron
2. React
  • The application should be built using ReactJS

3. Material UI
  • The application should make use of the Material UI (https://material-ui.com/) component library wherever possible
  • Custom CSS should be kept to a minimum

4. PX Blue Design System
5. Mock API for order/device information
  • IMPORTANT: For this challenge you can use static text. We will swap with Mock API using json-server in the next challenge.

6. Include libraries for building installers
7. Include Detailed Readme
  • The project should include a detailed readme with instructions for running the project locally as well as packaging the project for final distribution
  • Final distribution shall package the application into an installer using the libraries defined above

Individual Requirements
Refer to the attached Storyboard on Challenge Assets for visual reference and workflow.

1). Login
Screenshot: 00 Login.png
  • PXBlue Design Pattern: https://pxblue.github.io/patterns/login
  • Create repeated background image on this login page that covered whole browser screen
  • Login box need placed centered and using fixed width
  • Create tooltip when hover the “?” button next to Sign in title
  • Login page need display these fields:
    • Eaton.com Email Address
    • PX White Password
  • Create how validation look with PxBlue Design system for error/success message
  • This is error validation look (Screenshot: 01 Login - ERROR.png)
  • Click x button need clear the values
  • Need able to reveal the password when click “eye” button
  • Sign in button become enabled once user filled both inputs (Screenshot: 02 Login - FILLED.png)
  • Forgot Password can be dead link

2). General Layout
  • This is general page layout after user logged in that applied to all pages.
  • Header bar need remain fixed on top
  • The navigation menu should match the design and behavior described on https://pxblue.github.io/patterns/navigation under “Icon Navigation Bar / Responsive Navigation”
  • These are the sidebar menu navigation content:
    • Locate
    • Print
    • Help
    • Settings
    • Logout (Click this need take user back to Login page)
  • Create active/inactive menu state
  • You can disabled page that is not exist in storyboard
  • Use standard icons based on PXBlue Design Pattern

3). Locate Page
Screenshot: 03 Locate.png
  • Upon first navigating to the Locate page, the user is presented with a search field
    • The Order Number and Item Number fields should accept any alphanumeric input
    • Order Number should be limited to 10 characters
    • Item Number should be limited to 5 characters
    • Search button should be disabled until a valid Order Number is entered (Screenshot: 04 Locate - FILLED.png)
  • “Report an issue here” link can be disabled
  • Notice on input focus need use blue colored border
  • When searching the order, an API request should be made to retrieve the details for that order.
  • Use preloader while retrieve data from API

4). Device List
Screenshot: 05 Locate - ORDER FOUND.png
  • After retrieving the details for the specified Order Number, the screen shall display a list of devices associated with that order.
  • Back button on header bar need take user back to Locate page
  • On the right side of header bar display numbers based on device status
  • User need able to filter device list data based on Location dropdown and Search input on header bar
  • Notice there’s number counter for Location that will be change when change the Location
  • Search input need able to change to these options for specific search target
    • By Device Name
    • By Device ID
    • By Device Family
    • By Device Model
    • By Device Compartment
    • By IP Address
    • By Subnet
  • Report an Issue can be dead link
  • Table device list need able to sort
  • Need support to load more rows when user scrolling the table
  • Filter area and Table header can use fixed placement, while table body scrolling
  • Each device on the UI will have a status field which will contain either a description of any current errors, or a Configuration Button
  • All Device status can be read-only
  • Clicking the Device Name will open a device details page

5). Device Detail
Screenshot: 06 Device Details.png
  • This page shows assorted information about the selected device
  • Back button on the header bar need take user back to previous screen
  • Content area can remain in center like storyboard look
  • Clicking the “Configure this Device” link will trigger the Configure workflow
  • Other links can be dead link
  • Display configuration details on the bottom

6). Configure Device
Screenshot: 07 Connecting Loader.png
  • The configuration workflow should open in a modal dialog
  • For this sample application, you may use a timer to automate progress through the steps (5 seconds per step)
  • This is default screen at first time click Configure button
    • This is screen when connecting (Screenshot: 07 Connecting Loader.png)
    • This is screen when there’s an error (Screenshot: 08 Connection Failed.png)
      • Click Retry need redo the connecting modal
        • Click exit need close modal window
    • If no error need auto load the Step 1 of Configuration Wizard
  • There are 4 steps in the configuration that should be shown in a stepper
    • Step 1 (Screenshot: 09 Connected - STEP 1.png)
      • Programming PXM2260
      • Do not unplug or power down device...
    • Step 2 (Create this step)
      • Validating Firmware
      • Checking for the latest version...
    • Step 3 (Screenshot: 10 Connected - STEP 3.png)
      • Uploading config file to cloud
      • Loading settings...
    • Step 4 (Screenshot: 15 Connected - STEP 4.png)
      • Rebooting PXM2260
      • Establishing Communication
    • Issue detected (Screenshot: 11 Issue Detected.png)
      • This is screen when issue detected during configuration
      • Click exit need close the modal window
      • Device details page need show updated look if there issue found (Screenshot: 12 Device Details - ISSUE.png)
        • On top device details updated with Issue detected status
        • Update the image with exclamation icon
        • On the right side, there is next steps area that will take the user back to the previous screen or locate new order
        • This is the updated device list page with device with “Issue” status (Screenshot: 13 Locate - ORDER ISSUE UPDATED.png)
    • Success screen (Screenshot: 16 Device Details - SUCCESS.png)
      • This is screen if all steps successfully configured
      • Device details page need show updated look if there configuration success (Screenshot: 17 Device Details - CONFIGURED.png)
        • On top device details updated with Configured status
        • Update the status with green colored label
        • On the right side, there is next steps area that will take the user back to the previous screen or locate new order, or print the queue
        • This is the updated device list page with device with “Configured” status (Screenshot: 18 Locate - ORDER - CONFIGURED DEVICE UPDATED.png)
  • Note: On the title area of modal window, you need countdown counts until all steps completed
  • For this challenge submission click-flow:
    • Create flow when there’s issue on Configuration flow
    • After that, click the Configure Device again need show the success message
    • Create separated device details based on different error and success message

Challenge Rules
  • Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirements.
  • Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
  • Create clear documentation about how to set up your submission
  • Remove unnecessary/unused code from your application. You should always make sure you submit what you are required to submit.
  • Create a clean folder structure and follow the latest best practices for the technology you are using.


Final Submission Guidelines

Deliverables
  • All source code that implement the challenge requirements.
  • README in markup format contains all deployment detail steps
  • Video demo explains the application features

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30101973