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 CS 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 CS and providers and Sub-distributors.
Let us know any question you have!
Project background
This is the first development challenge of the CS-InvestLab challenge series. We will be focusing on the Sub-Distributor role only. Prior to this, we ran a few design challenges to create the storyboard.
General requirements
Common
- 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 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
Application development requirements
- MarvelApp workflow: https://marvelapp.com/3d4f65c/screen/53191992
- Implement the applicaion navigation by following the marvelapp workflow
- https://drive.google.com/file/d/1l88q57F_kn38V9wA5f6CfQzZJwsVb2m_/view?usp=sharing
- There are some updates in a few storyboard screens please re-download the v2 from here https://drive.google.com/file/d/1cXd_N4WFPgXZmg2fKXZznKQfD1tcJNmF/view?usp=sharing
- This application is only for Desktop screens & the min supported resolution is 1280x900 px
- In future we are going to make this application responsive. So keep this in mind while creating your application.
Scope reduced: Follow the marvelapp workflow to create the web-pages. Page 1 to 9 listed below are mandatory to pass the review. Only the pages listed below are in scope.
1. Login Screen/ Error Screen
ref: https://marvelapp.com/3d4f65c/screen/53191992 & https://marvelapp.com/3d4f65c/screen/53252579
Create the login screens as in the marvel app and also demonstrate the error case.
2. Forgot Password Page / Confirmation
ref: https://marvelapp.com/3d4f65c/screen/53252580 & https://marvelapp.com/3d4f65c/screen/53252581
User should be able to recover his password. Implement this function & layout by following the marvelapp workflow
3. OTP Screen
ref: https://marvelapp.com/3d4f65c/screen/53258080
Implement this as in storyboard.
4. Terms and Conditions
https://marvelapp.com/3d4f65c/screen/53258082 & https://marvelapp.com/3d4f65c/screen/53252589
Once the user submits the OTP, the T&C screen should appear.
5. Dashboard - Credit Notes
https://marvelapp.com/3d4f65c/screen/53252592 , https://marvelapp.com/3d4f65c/screen/53259496, https://marvelapp.com/3d4f65c/screen/53262119 & https://marvelapp.com/3d4f65c/screen/53259499
Implement this as in the storyboard.
Implement sorting for the table columns
Implement table search function.
Implement pagination function
6. My Contact
ref: https://marvelapp.com/3d4f65c/screen/53252617
Follow the storyboard to implement this
7. My User Area - Notification
ref: https://marvelapp.com/3d4f65c/screen/53252618
Follow the storyboard to implement this
8. Trailer Fee Report
ref: https://marvelapp.com/3d4f65c/screen/53252599
Follow storyboard to implement this page. Search, sorting & pagination functions are in scope.
9. Fund report
ref: https://marvelapp.com/3d4f65c/screen/53252600 & https://marvelapp.com/3d4f65c/screen/53252603
Implement the UI only for the "Refine By" section.
Implement autocomple for the "Fun Report" search textbox
Implement table as displayed in the storyboard.
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.
Best of luck to all the competitors!!
Final Submission Guidelines
Deliverables
- Submit all your files, icons & images in a zip container.