Challenge Overview
Welcome to the "InvestLab - 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!
$200 bouns will be paid to 1st place winner as bouns with a score of 80+ .
Project background
In this challenge of the CP-InvestLab challenge series. We will be focusing on the Admin role. Prior to this, we ran a few design challenges to create the storyboard & a few Code challenges to build the UI application.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 requirements
Resources
- Exiting UI app, use this as the base for your submission.
- Marvel-app storyboard: https://marvelapp.com/aje60e7/screen/55117532
- Zeplin storyboard
- Storyboard source
- Topcoder Online Review Portal
0. General
0.1 All the marvelapp pages are in scope. Follow the navigations implemented in marvelapp storyboard.
0.2 For all the tables implement sorting, pagination, search & date range filter function
0.3 Go to page function should be added to all tables.
0.4 Clicking breadcrum links should take to the respective pages.
1. Login, OTP & Terms of Use
These pages have been created. Extend the login functions to support "Admin" user role. The username/pass for adim role should be 'admin/123'
2. Admin Dashboard
ref: https://marvelapp.com/aje60e7/screen/53354102
Route to this page should be 'http://.../admin'
In the topmost header section update the style of active launguage link.
Update the spacings of main menu elemts based on the storyboard
In main header section, update application name to "InvestLab portal", also update the logo
Match the storyboard layout.
All the square boxes should link to the respective pages.
All the top main-menu link should link to the respective pages.
3. Manage FP accounts
ref: https://marvelapp.com/aje60e7/screen/55117494
Route to this page should be 'http://.../admin/manage-fp-accounts'
Table should spport all the features listed in the above 0.2 section
Hover three dots in the table rows should show the Edit link & on clicking this, edit page should open
3.1 Edit page:
ref: https://marvelapp.com/aje60e7/screen/55117495
Implement autocomplete for the "Key account manager" field
Table should spport all the features listed in the above 0.2 section
Hovering three dots in the table rows should show the bell icons & on clicking bell icon, it should naviate to the notifications page https://marvelapp.com/aje60e7/screen/55117503
Implement the upload document feature (3.2)
3.2 Upload document
ref: https://marvelapp.com/aje60e7/screen/55117499
Add drag-drop feature to upload documents
Once document has been uploaded or uploading, add it to the table below the upload drag-drop section.
User should be able to select "Document Type" and "Period" for every document uploaded or document getting uploaded.
On clicking the "Save uploads" button implement empty field vatidations. If validation is successful user should be able to see this: https://marvelapp.com/aje60e7/screen/55117501
Clicking Cancel uploads should reset the page state to https://marvelapp.com/aje60e7/screen/55117501 Do not show the Success status comment.
From the uploaded documents table user should be able to remove a document (https://marvelapp.com/aje60e7/screen/55117497)
3.3 Manage document
ref: https://marvelapp.com/aje60e7/screen/55117502
This page is straight forward, follow the sotyboard to create this page.
4. Manage SD accounts
ref: https://marvelapp.com/aje60e7/screen/55117504
Route to this page should be 'http://.../admin/manage-sd-accounts'
Follow the storyboard to create this page.
Hovering three dots in table row should show the edit link, ckicking this should take to the eidt page
4.1 Edit page
ref: https://marvelapp.com/aje60e7/screen/55117507
The "Key Account Manager" field should support autocomplete
Implement "upload photo" feature to upload customer logo
In associated users table, hovering three dots should show the bell icon. On clicking this bell icon user should be taken to the notifications page (4.2) https://marvelapp.com/aje60e7/screen/55117513
Clickng the "Provider Mapping" button should navigate to the provider mapping page (4.3) https://marvelapp.com/aje60e7/screen/55117508
Clicking upload document link should navigate to the upload document page (4.4) https://marvelapp.com/aje60e7/screen/55117509
Clicking the "Manage document types" button should navigate to the "Manage document types" page (4.5) https://marvelapp.com/aje60e7/screen/55117511
4.2 Notifications page
ref: https://marvelapp.com/aje60e7/screen/55117513
Create this page by following the storyboard.
4.3 Provider Mapping
ref: https://marvelapp.com/aje60e7/screen/55117508
The table should support the common features listed in the above section 0.2
Clicking the 0...9, A, B ... All links should filter the table records
4.4 Upload document
ref: https://marvelapp.com/aje60e7/screen/55117499
Add drag-drop feature to upload documents
Once document has been uploaded or uploading, add it to the document list table. User should be able to select "Document Type" and "Period" for every document uploaded or document getting uploaded.
On clicking the "Save uploads" button implement empty field vatidations. If validation is successful user should be able to see this: https://marvelapp.com/aje60e7/screen/55117510
Clicking Cancel uploads should reset the page to this https://marvelapp.com/aje60e7/screen/55117510 Do not show the Success status comment.
From the uploaded documents table user should be able to remove a document
4.5 Manage document types
ref: https://marvelapp.com/aje60e7/screen/55117511
Follow the storyboard to create this page.
5. Manage KAMS
ref: https://marvelapp.com/aje60e7/screen/55117531
Route to this page should be 'http://.../admin/manage-kamas'
Follow the sotyboard to create this page.
The table should support common features listed in the above section 0.2
In table rows, hovering three dots should show the edit icon, on click this it should take to the edit page (5.1) https://marvelapp.com/aje60e7/screen/55117533
Clicking the "New KAM" buttion should show the "New KAM" page (5.2) https://marvelapp.com/aje60e7/screen/55117532
5.1 Edit page
Follow https://marvelapp.com/aje60e7/screen/55117533 to create this page.
5.2 New KAM page
Follow https://marvelapp.com/aje60e7/screen/55117532 to create this page.
Final Submission Guidelines
- 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.
- Submit all the files in a single zip container.
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.
Win challenge, earn TCO points along with the challnge prize & travel to any of these topcoder open 2019 regionals* in Japan, China, India or South America or even finals in the USA.
FAQs
After submission as a submitter what should be my next step?
Once the challenge submission phase is over the assigned reviewers are going to review all the submissions based on the challenge scorecard. They are expected to raise all issues found in the submissions they are reviewing. After the completion of review phase the Appeal phase statss. In this phase, the submitters should go to the Online Review page, select the project & have a look at the issues raised by the reviewers. If you disagree with the reviewer on any issue/comment, raise an appeal by clicking the 'Appeal' button associated with the section and entering the appeal comment.
When & where I can see the challenge results?
After the Appeal response phase is over the results are displayed on the challenge specification page as well as on the online reivew page.