Challenge Overview
Welcome to the "InvestLab - Credit Portal UI Prototype Challenge".
In this challenge, we are looking for your great development skills to quickly develop a user interface based on
the given storyboard using the AngularJS
framework.
The purpose of the portal is to replace a
manual process of sending various reports and invoices to providers via email by providing a UI where they can view
and download these reports. In accordance with regulations, sub-distributors will be able to access the total fund
universe CP has under an agreement and view 3rd party providers' funds based on filter criteria. Also, the
application goal will be to streamline the client relationship management and the exchange of information and
documentation between Admin, providers and Sub-distributors.
Let us know any question you have!
Project background
In this challenge of the CP-InvestLab challenge series. We will be focusing on the Provider role & some Sub-Distributor role updates. Prior to this, we ran a few design challenges to create the storyboard.Overall we have create only 4 New pages, & update/re-route the rest.
General requirements
Layout
- Layout: background should be fluid & content should be centred
- Minimun supported resulution is 1280x768 px & keep in mind that we are going to make this responsive in future.
- Focus on consistency. It's acceptable to do minor layout adjustment if storyboard isn't consistent.
Framework specific
- Use JSON format files for the application data.
- Create services to fetch data from JSON format files.
Code formatting
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Use appropriate linters to validate your code.
HTML Specific
- HTML should be valid HTML5 compliant.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
CSS Specific
- Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
- You may use SCSS in the project.
Platform
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
- Primary Browser: IE11
Zeplin
- For getting the access to the Zeplin based storyboard, apply in the challenge forum.
Application development requirements
Resources
- Marvel-app storyboard: https://marvelapp.com/1cj2hj6g/screen/53280978
- Source & design-images: https://drive.google.com/open?id=1m1qjyTlL0Es9OtWNgrusUchUT92V7HNM
- Zeplin: https://zpl.io/bld7QzD
- Existing UI-App: https://drive.google.com/open?id=1GB0kahY0T9gEGeAh8dCRbyzhFB64rWkp
Application workflow
Follow marvel app for application navigation.
Existing pages
We have already created the Sub-Distributor user-role pages. Please keep those pages unchanged!!. Some common pages are required to be updated. These are listed below.
All the marvel-aap pages are in scope. The layout of pages in scope should match the storyboard. It's your responsibility to match the layout with storyboard even if the implementation in existing UI-app is incorrect.
1. Login, OTP & Terms of Use
These pages have been created. Extend the login functions to support "Provider" user role along with the existing
user role.
The username/pass for provider role should be 'provider/123'
2. Provider Dashboard
Route to this page should be 'http://.../provider'
Match the layout as in storyboard.
3. Trailer Fee
Route to this page should be 'http://.../provider/trailer-fee'
Follow https://marvelapp.com/1cj2hj6g/screen/53252655 to implement this page.
The table should support sorting, searching & Go To Page functions
The table should also support filtering based on date range.
4. My Profile
ref: https://marvelapp.com/1cj2hj6g/screen/53280992
This page has been created in the existing UI-Application.
Do not create a new page for this instead use the existing component & add a new route using the route-path 'http://.../provider/my-profile'.
Make sure the layout matches the storyboard.
Existing UI-App updates
5. Notification popup
Update the exiting application header by adding notification popup: https://marvelapp.com/4e9e98c/screen/53340239
6. Fund Comparision
ref: https://marvelapp.com/4e9e98c/screen/53340240
Create this new page by following the storyboard
7. Fund Comparision: Historical Performance
ref: https://marvelapp.com/4e9e98c/screen/53340241
Create this new page by following the storyboard
The chart tab "1D", "1M", "6M"... should work. Clicking them should change the time-range. Make sure to update the range selection area below the chart as well.
Use dummy data for these.
On hovering the chart the chart-popup shoud appear
Add chart legend below the chart.
User should be able to adjust the chart range by dragging the range selection button in the range selection area.
For chart minor devation from storyboard is allowed.
"A Simple TimeSeries" here listed here: https://www.fusioncharts.com/angular2-js-charts can be used.
Deployment & maintainability
Include a README.md in your submission based on this template. This should list all the steps necessary to configure and run the submitted application.
Licenses & attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok. If a library is not commercial friendly you will need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Happy coding!!
Final Submission Guidelines
Deliverables
- Submit all your files, icons & images in a zip container.