Challenge Overview
Challenge Objectives
-
Develop Angular web app and integrate with the API
Project Background
-
Our client has a tool with complex calculations implemented in excel. Calculations take a few seconds to complete so we’d like to save the calculation outputs for all possible input values and implement an API to search those records.
-
We have built an API that returns these calculations
-
In this challenge we will build the UI that visualizes various properties of the output results
Technology Stack
-
Angular/Typescript
-
SCSS
-
HTML
Code access
We’re starting a new project so you should create the base code in this challenge.
Marvel app designs are available at https://marvelapp.com/c9050i1/screen/59978248 . Design resources are available in project forums.
Individual requirements
-
Base code setup
The first task is to create the base code and configure build process for the web app. It should be hosted on Heroku as a demo and include build instructions in a top level README.md file. Configure lint tool to check the source code errors.
-
Inputs
There are 3 sections of inputs that are set by the user
-
Price shift (for alpha,beta,....kappa)
-
High data tarif
-
Unlimited data tarif (for alpha, beta,...kappa)
Alpha price shift values are (-40 - +40%) with 10% increments. Beta-Kappa are considered competitors and all of them set the price shift to the same value, except for one of them (called outlier). For each of the competitors, allowed values for price shift are -40% - 0%. Unlimited data tariff has 2 options - not available and available at 100$. Similarly, for unlimited data tarif, alpha can set the value at “not available”, 5, 10, 15; beta and gamma can only use values 5 and 10; delta and epsilon can have not available, 5, 10; Theta-Kapa always have “not available” for unlimited data so those options aren’t shown in the UI.
To get the calculation values for a particular value of inputs, call the GET /search endpoint and set the values for each of the inputs. Sample call is available in the Postman collection shared in the forums.
Screens in scope
-
Output, Curve and Brand tabs
These screens contain only chart elements. Mapping of the api response values to the chart elements is provided in a document shared in the forums. Pay attention to the styling of the charts (lines, bars, labels, tooltips).
Screens in scope-
Essentially all the screens shown in marvel app
General for all requirements
Follow the required code style and make sure there are no lint errors. Create and use data model classes for data/state management - using “any” data type is not acceptable. All API actions should display user feedback (loading indicator) and debounce should be implemented on changes to the slider inputs.
What To Submit
Submit a the full source code with Readme for application configuration, build, run, debug steps
Submit a short video overview and a link to Heroku demo