Thor DC Starter API Mockup Code Challenge

BASIC REQUIREMENTS
Build API Mock up objects using JSON Server based on client references

CHALLENGE GOAL
The goal of this challenge is to build API mockup for Thor DC Starter application

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
https://drive.google.com/drive/u/0/folders/1skiPQsxSyUUFgIIywPi_tbNC0JRhsu2J

General Requirements:

• You must use JSON-server for base of API: https://github.com/typicode/json-server
• IMPORTANT: We’re looking for very clean, modular, organized, reusable mock objects design and structure following best practices. (FYI: we will give bonus payment for 1st & 2nd Place that meet this requirement.)
• IMPORTANT: Follow API Best Practices as required reference from here: https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design
• Make sure you submission support unit testing
• The requests and responses should properly list all fields.
• Suggest best practices endpoints format for the actual API implementations
• Create sample data based on storyboard content
• All JSON-Server descriptions below are just starting points, feel free to suggest the best solution for this challenge submission.
• Your submission need covered whole endpoints as much as possible based on video reference

Technology Stack

• NodeJS
• JSON Server: https://github.com/typicode/json-server

Individual Requirements
Refer to the attached Video Demo on Challenge Assets (workflow.mov) for visual reference and workflow.

General Mockup API Requirements

• In the mockup app we need to pass the token in every API call.  App needs to monitor for expiration of token.
• Before expiration call RefreshTokenApi with username and old token as parameters.  Normally you would refresh every 55 minutes or so to make sure you don’t time out.
• Sample request body:

{
  "user":"user@company.com", // User email registered in the Azure AD.
  "Token":"ey00iywyu87cyueytiuhyaigyyu..." // The expired Azure AD token to refresh.
}

• On return with http code 200 you get a new token valid for 1 HOUR. (this mockup api can also return 401 unauthorized)
• Apply this to all API endpoints

1). Login
Video Demo: 00:00 to 00:04

• Login page need display these fields:
  • Email Address
  • Password
  • Application ID
• Forgot Password can be dead link

JSON-Server requirements:

• Create new endpoint for GET /login
• Sample request body:

{  
 "user":"user@company.com", // User email registered in the Azure AD.
  "Passowrd":"abc123",  // Password stored in the Azure AD.
  "applicationId":"a43e7353-1bdf-43e3-b972-2c8856655f57"    // The application id registered in the Azure AD.
}

• On return with http code 200 you get a token valid for 1 HOUR.  (this api can also return 401 unauthorized or 403 account locked out)

2). Locate Page
Video Demo: 00:03 to 00:11

• This is 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
• When searching the order, an API request should be made to retrieve the details for that order.
• Use preloader while retrieve data from API
• And need auto redirect to Device List Result screen explained below

JSON-Server requirements:

• Locate page need accept Order Number & Item Number

4). Device List Result
Video Demo: 00:12 - 00:16

• After retrieving the details for the specified Order Number, the screen shall display a list of devices associated with that order (deviceList.jpg)
• User need able to filter device list data based on Show location dropdown and Search input.Notice there’s number counter for each Location. By default it need show “All Structures" dropdown
• 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
• Device List need use table layout, table need able to sort for each column.
• Each device on the page will have a status field which will contain either a description of any current errors, or a Configuration Button.
• Clicking the Configure button in the device list row will trigger the configuration workflow.

JSON-Server requirements:

• Locate Order need able to filtered the data using these fields:
  • Location
  • Search By input with details explained above
• Return search order list contains these fields:
  • Total Devices
  • Number of items to configure
  • Device need configure
  • Device Status
  • Device
  • Location
  • Configured By
  • Device Issue
  • Config File By

5). Device Detail
Video Demo: 00:17 - 00:19

• Clicking the Device Name will open a device details page
  • This page shows assorted information about the selected device
  • The design for this page has been changed from what is in the workflow video refer to DeviceDetails.jpg for reference.
  • Clicking the Configure button on the details page will trigger the Configure workflow
  • Create modal window that show connecting status
  • Show flow when there is Failed to Connect error message
  • Retry need reload the connecting status
• Match data values need displayed like video reference

JSON-Server requirements:

• Return device detail contains these fields:
  • Device photo
  • Device name
  • Status
  • Device ID
  • Location
  • Family
  • Model
  • Style Number
  • Config File name
  • Compartment
  • Status
  • Label Name
  • Name
  • CT Pri
  • CT Sec
  • PT Pri
  • PT Sec
  • Wiring
  • IP address
  • Subnet

6). Configure Device
Video Demo: 00:43 - 00:19

• The configuration workflow should open in a modal dialog/overlay
• There are 4 steps in the configuration that should be shown in a stepper
• Match each step content like video reference
• Create flow when there is issue detected
• Notice on the right sidebar there are quick buttons for
  • Return to this order
  • Locate a new order
• At each step, a description of what is occurring should be shown below the stepper
  • For this sample application, you may use a timer to automate progress through the steps (~10 seconds per step)
  • For this sample application, you need to show the successful and error conditions.
• Once the configuration process is complete, the configuration button for that device on the Locate page should be replaced with a Configured badge.
  • This should include an API call to update the status of the device in the database
  • Create different sample data for error and success configuration like displayed on video demo
• Create preloader design while retrieve data from API

JSON-Server requirements:

• These are the configure request need pulled off
• Step 1 (Programming PXM2260)
  • Return success/error message
• Step 2 (Validating firmware)
  • Return success/error message
• Step 3 (Upload Config file to cloud)
  • Send the config file
  • Return success/error message
• Step 3 (Rebooting Device)
  • Return success/error message

Unit Testing
All of your code should be test covered. You must cover at least +90% of the code.
You need to test all cases and in test case assertion you need to assert accuracy of all fields.

Documentation
Provide a detailed README documentation for how to setup and configure the application.

Configurations
You are expected to use environment variables to store sensitive information and environment-specific configurations.   

Scripts
- Provide scripts for create all tables/collection
- Provide script to insert default users.
- Provide script to insert sample data

Postman Client
- Create postman environment and collection file that will listing all requests and sample data.
- Group each route on Postman collection into separate folder
- Provide description for endpoints
- Get Started with Postman : http://www.getpostman.com/
 

Final Submission Guidelines

Deliverables
- All required source code.
- Postman collections and configuration
- Sample init data for JSON-server
- Document(s) that will help future developers have better understand how to deploy and continue updating the API.