Challenge Overview
App environment:
- ReactJS application
Basic requirements for this challenge:
- Build ReactJS application based on storyboard design
- Need load data from JSON by using simple library
Project Background
Xerox BlockChain - Product Lifecycle Tracking App purpose is intended to demonstrate how Blockchain technology can be used to provide new levels of visibility into a Xerox-related value chain: the print hardware lifecycle. This application will show how blockchain supports the autonomous functioning of each supply chain element while providing consistent information to Xerox and its partners. These elements include:
- Delivery from the manufacturer
- Warehousing / Print Hardware Inventory
- Device contracted to a customer
- Device configuration
- Delivery to customer
- Use by customers
- Model Reliability
- Disposal
For this challenge, we need build new ReactJS based on storyboard and some requirements below. As part of this challenge you need load all data as JSON files. Make sure your submission running good on Desktop browsers.
Technology Stack
- NodeJS
- ReactJS
- HTML5
- CSS3
- Javascript
- JSON
Deployment environment requirements
- localhost
- Heroku
Challenge Assets:
Zeplin: https://zpl.io/aRPPK7v
Note: Request Zeplin access on challenge forum by providing your email address
ReactJS Requirements:
- You must use ReactJS for this challenge submission: https://reactjs.org
- You can choose some ReactJS library to help you build your submission. As long its open source
- ReactJS Components must be re-usable. Components data should be populated based on the configuration.
- You must use Redux as part of ReactJS app, store JSON data on related endpoints.
- Need support ESLint rules for JS code, nor StyleLint rules for SCSS.
- Make sure you submission support unit testings
- You can use Google map for map that used on the app.
- Right now you can set min-width for 1366px as storyboard screen, but application must support fluid width
REST API requirements
- We will be making use of json-server (https://www.npmjs.com/package/json-server) to populate data in the demo applications. Or you may come up with your own solution.
- Required API request based on original wireframe: https://docs.google.com/presentation/d/1cM3zJZ-zDhsZuLH4Sd3aENWWN_Pws68DVX1xPp7jNSs/edit?usp=sharing
- Important: We need use consistent structure and naming based on client suggested endpoints.
- You must follow JSON request and respons structure from the Swagger:
https://drive.google.com/file/d/1wZKoKuxpt7FEzjTjZGuH3K2ftzPs2Txj/view?usp=sharing
https://drive.google.com/open?id=1gPY7WyHI2lPWz_nymm-h4pPu4MqJsrkz
- The plan is we need keep use remain endpoints when swap with the actual REST API from client
- Let us if you need some clarifications related the Models/endpoints and JSON structure
General Submission Requirements
1). Login
Screenshot: 00_0-Login.png
- Display username and password
- Forgot My password can be dead link
- Password need use asterisk by default
- Click the eye icon need show the password
- Make sure background image covering all browser screen
- You need detect different role as explained below and take to different landing page. For admin role need take to Dashboard screen
- Some required roles:
-- Admin
-- Sales Person
-- Configuration Engineer
-- Customer
-- QA Engineer
-- Rigger
-- Shipping Carrier
-- Warehouse Employee
-- Device Management
-- Factory Engineer
2). Dashboard
Screenshot: 01_0 Dashboard.png
- This is dashboard initial look
- Set active state on the left sidebar
- Another column next to sidebar contains some box for current map viewport information and the life cycle state
- Notice there is donut chart indicator on the right side
- You can create simple animation when load all donut chart progress
- Click gear button need load flyout option and change to chart view (Screenshot: 01_0_ Dashboard.png)
- Map view display different color based on life cycle state
- Need able to zoom out/in the map
- Click on some life cycle box show the colored box also need display the label above the map (Screenshot: 01_1-Dashboard.png)
- Display percentage information on the selected life cycle
- Click Device Model need expand the Device Model (Screenshot: 01_2-Dashboard.png)
- This is expanded state of Device Model (Screenshot: 01_3_-Dashboard.png)
- Dropdown on Latest Life Cycle on the header bar (Screenshot: 01_3-Dashboard.png)
- When click the Region dropdown (Screenshot: 01_4-Dashboard.png)
- Search need support autocomplete (Screenshot: 01_5-Dashboard.png)
- Match the search result grouping
- Click Filter button need load the filter options (Screenshot: 01_6-Dashboard.png)
- Need able to expand more filters (Screenshot: 01_7-Dashboard.png)
- on your submission add new saved tab to see all Saved filter (Screenshot: 01_8_-Dashboard.png)
- When user click on the map marker (Screenshot: 01_8-Dashboard.png)
- Click on another marker (Screenshot: 01_9-Dashboard.png)
- Click drag button need allow user to drag and zoom in the selected area (Screenshot: 01_10-Dashboard.png)
- This is zoom in sample. Notice that the country information changed/auto detect (Screenshot: 01_11-Dashboard.png)
- Map markers displayed title on top
- User need able to collapse the column box (Screenshot: 01_12_-Dashboard.png)
- Slider show up after click the zoom out/in button (Screenshot: 01_12-Dashboard.png)
- Click the marker need load this (Screenshot: 01_13-Dashboard.png)
- Click lifecycle timeline need display the additional information also marker bigger (Screenshot: 01_14-Dashboard.png)
- Click followed link displayed message on top (Screenshot: 01_15-Dashboard.png)
3). My Tracking
Screenshot: 01_16-My-Tracking.png
- Hover need load the place info (Screenshot: 01_17-My-Tracking.png)
- Click on the row need auto-zoom the map (Screenshot: 01_18-My-Tracking.png)
4). Notification
Screenshot: 01_19-Notifications.png
- User see this flyout when click the notification button
- Click on gear button need load the Modul view and Chart view options (Screenshot: 01_20-Notifications.png)
- Click chart view need display the gradient chart (Screenshot: 01_21-Dashboard.png)
5). Landing page for Xerox Sales Person
Screenshot: 03_0-Xerox-Sales-Person.png
- User login with Sales Person role will take to this screen
- Change Manufacturing Pending need display this screen (Screenshot: 03_1-Xerox-Sales-Person.png)
- Click submit button need display the message on top (Screenshot: 03_2-Xerox-Sales-Person.png)
- Validation error message (Screenshot: 03_3-Xerox-Sales-Person.png)
Your submission must look and work consistently across these following browsers on the latest versions:
- Chrome,
- Edge,
- Safari,
- Firefox
What To Submit?
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- ReactJS application
Basic requirements for this challenge:
- Build ReactJS application based on storyboard design
- Need load data from JSON by using simple library
Project Background
Xerox BlockChain - Product Lifecycle Tracking App purpose is intended to demonstrate how Blockchain technology can be used to provide new levels of visibility into a Xerox-related value chain: the print hardware lifecycle. This application will show how blockchain supports the autonomous functioning of each supply chain element while providing consistent information to Xerox and its partners. These elements include:
- Delivery from the manufacturer
- Warehousing / Print Hardware Inventory
- Device contracted to a customer
- Device configuration
- Delivery to customer
- Use by customers
- Model Reliability
- Disposal
For this challenge, we need build new ReactJS based on storyboard and some requirements below. As part of this challenge you need load all data as JSON files. Make sure your submission running good on Desktop browsers.
Technology Stack
- NodeJS
- ReactJS
- HTML5
- CSS3
- Javascript
- JSON
Deployment environment requirements
- localhost
- Heroku
Challenge Assets:
Zeplin: https://zpl.io/aRPPK7v
Note: Request Zeplin access on challenge forum by providing your email address
ReactJS Requirements:
- You must use ReactJS for this challenge submission: https://reactjs.org
- You can choose some ReactJS library to help you build your submission. As long its open source
- ReactJS Components must be re-usable. Components data should be populated based on the configuration.
- You must use Redux as part of ReactJS app, store JSON data on related endpoints.
- Need support ESLint rules for JS code, nor StyleLint rules for SCSS.
- Make sure you submission support unit testings
- You can use Google map for map that used on the app.
- Right now you can set min-width for 1366px as storyboard screen, but application must support fluid width
REST API requirements
- We will be making use of json-server (https://www.npmjs.com/package/json-server) to populate data in the demo applications. Or you may come up with your own solution.
- Required API request based on original wireframe: https://docs.google.com/presentation/d/1cM3zJZ-zDhsZuLH4Sd3aENWWN_Pws68DVX1xPp7jNSs/edit?usp=sharing
- Important: We need use consistent structure and naming based on client suggested endpoints.
- You must follow JSON request and respons structure from the Swagger:
https://drive.google.com/file/d/1wZKoKuxpt7FEzjTjZGuH3K2ftzPs2Txj/view?usp=sharing
https://drive.google.com/open?id=1gPY7WyHI2lPWz_nymm-h4pPu4MqJsrkz
- The plan is we need keep use remain endpoints when swap with the actual REST API from client
- Let us if you need some clarifications related the Models/endpoints and JSON structure
General Submission Requirements
1). Login
Screenshot: 00_0-Login.png
- Display username and password
- Forgot My password can be dead link
- Password need use asterisk by default
- Click the eye icon need show the password
- Make sure background image covering all browser screen
- You need detect different role as explained below and take to different landing page. For admin role need take to Dashboard screen
- Some required roles:
-- Admin
-- Sales Person
-- Configuration Engineer
-- Customer
-- QA Engineer
-- Rigger
-- Shipping Carrier
-- Warehouse Employee
-- Device Management
-- Factory Engineer
2). Dashboard
Screenshot: 01_0 Dashboard.png
- This is dashboard initial look
- Set active state on the left sidebar
- Another column next to sidebar contains some box for current map viewport information and the life cycle state
- Notice there is donut chart indicator on the right side
- You can create simple animation when load all donut chart progress
- Click gear button need load flyout option and change to chart view (Screenshot: 01_0_ Dashboard.png)
- Map view display different color based on life cycle state
- Need able to zoom out/in the map
- Click on some life cycle box show the colored box also need display the label above the map (Screenshot: 01_1-Dashboard.png)
- Display percentage information on the selected life cycle
- Click Device Model need expand the Device Model (Screenshot: 01_2-Dashboard.png)
- This is expanded state of Device Model (Screenshot: 01_3_-Dashboard.png)
- Dropdown on Latest Life Cycle on the header bar (Screenshot: 01_3-Dashboard.png)
- When click the Region dropdown (Screenshot: 01_4-Dashboard.png)
- Search need support autocomplete (Screenshot: 01_5-Dashboard.png)
- Match the search result grouping
- Click Filter button need load the filter options (Screenshot: 01_6-Dashboard.png)
- Need able to expand more filters (Screenshot: 01_7-Dashboard.png)
- on your submission add new saved tab to see all Saved filter (Screenshot: 01_8_-Dashboard.png)
- When user click on the map marker (Screenshot: 01_8-Dashboard.png)
- Click on another marker (Screenshot: 01_9-Dashboard.png)
- Click drag button need allow user to drag and zoom in the selected area (Screenshot: 01_10-Dashboard.png)
- This is zoom in sample. Notice that the country information changed/auto detect (Screenshot: 01_11-Dashboard.png)
- Map markers displayed title on top
- User need able to collapse the column box (Screenshot: 01_12_-Dashboard.png)
- Slider show up after click the zoom out/in button (Screenshot: 01_12-Dashboard.png)
- Click the marker need load this (Screenshot: 01_13-Dashboard.png)
- Click lifecycle timeline need display the additional information also marker bigger (Screenshot: 01_14-Dashboard.png)
- Click followed link displayed message on top (Screenshot: 01_15-Dashboard.png)
3). My Tracking
Screenshot: 01_16-My-Tracking.png
- Hover need load the place info (Screenshot: 01_17-My-Tracking.png)
- Click on the row need auto-zoom the map (Screenshot: 01_18-My-Tracking.png)
4). Notification
Screenshot: 01_19-Notifications.png
- User see this flyout when click the notification button
- Click on gear button need load the Modul view and Chart view options (Screenshot: 01_20-Notifications.png)
- Click chart view need display the gradient chart (Screenshot: 01_21-Dashboard.png)
5). Landing page for Xerox Sales Person
Screenshot: 03_0-Xerox-Sales-Person.png
- User login with Sales Person role will take to this screen
- Change Manufacturing Pending need display this screen (Screenshot: 03_1-Xerox-Sales-Person.png)
- Click submit button need display the message on top (Screenshot: 03_2-Xerox-Sales-Person.png)
- Validation error message (Screenshot: 03_3-Xerox-Sales-Person.png)
Final Submission Guidelines
Web Browsers RequirementsYour submission must look and work consistently across these following browsers on the latest versions:
- Chrome,
- Edge,
- Safari,
- Firefox
What To Submit?
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md