Challenge Overview
Welcome to the "InvestLab-UI Prototype-Responsive-V ( Landscape layout update )". In this challenge,
we
are looking for your great development skills to quickly develop a responsive version of the existing
Angular 2+ application based on the given storyboard.
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!
General requirements
Layout
- Layout: use the following breackpoints:
Mobile Landscape view: 640px to 767px
Keep other resolution layout unchanged. - Minimum supported width is 375px
- 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 a 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 access to the Zeplin based storyboard, apply in the challenge forum.
Resources & links
- Ref. forum for for the existing application to be used as the base of you submission.
- Zeplin storyboard.
- Topcoder Online Review Portal
0. General
0.1 The existing workflow in the given app should not be changed.
0.2 Reuse existing data, it's acceptable if they don't match the new responsive storyboard data.
0.3 In the header section keep using the existing logo. Do NOT use the logo from the storyboard
0.4 Keep using the existing footer icons. Do NOT use the footer icons as in the storyboard
-
Login Landscape
ref: https://zpl.io/blDM1Qk and other Login Landscape section screens of the zeplin storyboard.
Follow the design to update the login page layout.
The login pages are common for all three user roles.
-
SD Landscape Updates
ref: https://zpl.io/awJ6nEN and other SD Landscape Updates section screens of the zeplin storyboard.
Follow the storyboard to make the existing pages responsive on mobile.
Do NOT use the gradient background as in the storybard instead use existing the gray colour in the given application.
.
-
Provider Landscape Updates
ref: https://zpl.io/awJ6K5d and other Provider Landscape Updates section screens of the zeplin storyboard.
Follow the storyboard to make the existing pages responsive on mobile.
Do NOT use the gradient background as in the storybard instead use existing the gray colour in the given application.
-
Admin Mobile Landscape Updates
ref: https://zpl.io/aMWpOXR and other Admin Mobile Portrait Updates section screens of the zeplin storyboard.
-
Fixes
- By default, the calendar should show the current date & NOT date-range selected. https://d.pr/free/i/feaSNg
- In mobile view ( width < 768px), for fund universe page table , show the first column & the last with 3 dots. On clicking the three dot the record details should appear.
- In mobile view, on Fund comparison page after deleting a record the table row should not display a blank section. It shold automatically adjuct the layot gracefully.
- Fund comparison typo shold be fixed "Preformance should be Performance"
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.