Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Challenge Objectives

  • In this challenge, we are looking to update existing functionality at device setting page, where user can add their device information by selecting required information in cascading way.

Individual requirements

In this challenge, we target to do enhancements to Devices Page for Member Profile.

 For Type :

https://api.topcoder-dev.com/v5/lookups/devices/types

 For Manufacture based on device type:

https://api.topcoder-dev.com/v5/lookups/devices/manufacturers?type=Laptop

For Model, based on selected device type and Manufacturer: 

https://api.topcoder-dev.com/v5/lookups/devices?type=Mobile&manufacturer=Apple

For Operating system  based on selected Type, Manufacturer and Model

https://api.topcoder-dev.com/v5/lookups/devices?type=Laptop&manufacturer=Apple&model=Macbook%20Pro

  • As we start filling fields, we need to filter next dropdowns, for example: if we select Type as Mobile, it will show Manufacturer. Based on the selected device type and Manufacture , Model will be loaded.  And finally based on the Type, Manufacturer and Model, OS will be loaded.  

  • We do need to support type ahead for all dropdown (Refer how we do it for Type in Production). 

  • All dropdown value should be listed in ascending order.

  • API can return max 100 rows at time. User should get that next data by scrolling it on UI Section. Mainly for Model Dropdown

  •  Dropdown will be reset while changing the value of the respective parent dropdown. 

  • Since scope is not so big, everything here is MAJOR. 

  • Make sure Add/Edit/Delete flow works fine.

  • If there is any fixation required on lookup API to achieve above goal, please fix it.  

 Note: Use the react best practice to cache the response of lookups for reuse

Technology Stack

  • Nodejs 

  • Javascript

  • React.js

Assets

Repo : https://github.com/topcoder-platform/community-app/

Branch : feature-devices-lookup

Repo :  https://github.com/topcoder-platform/lookups-api

Branch : develop

Important Notes

  • You should follow the best practices established in the repository:

  • We use this stand-alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app. 

  • As part of this challenge submission, you also might need to improve https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates

  • Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;

  • Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;

  • Properly use babel-plugin-react-css-modules and / or react-css-themr for styling;

  • Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;

  • Do not break existing unit tests.



Final Submission Guidelines

  • Submit a git patch for each repo which should pass with npm test  

  • A guide on how to apply patch and verification document.

  • The winner must create a PR against our repos.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30113988