Challenge Overview
Welcome to the [Fast 96 hrs] Hestia control center UI-Prototype - II (login & dashboard) Challenge. In this challenge, we are looking for you to update the existing Angular 2+ web application based on the provided storyboard design & the requirements listed in the challenge specifications.
Project Overview
Hestia is a wholesale distributor of a variety of plumbing and building-related products. Hestia Control Center will be an internal application that will help Hestia modernize their current spreadsheet process and allow their employees better access to data for reporting and analysis.
Let us know any question you have!
General requirements
Code Quality
Important!! Reuse the existing code, components, css etc as much as possbile instead of duplicating the code.
Layout
- Layout: Page should be fluid beyond 1366px width. Below 1366px width horizontal scrollbar should appear.
- Minimum supported resolution is 1366x768 px
- Focus on consistency. It's acceptable to do minor layout adjustment if storyboard isn't consistent.
- The application is Chrome specific.
- Pages should be Desktop Responsive (to grow/fit larger monitors).
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: Chrome Browsers (Mac & Windows).
- All other browsers are out of scope. This is an internal application and client will only be using Chrome
Zeplin
- For access to the Zeplin based storyboard, apply in the challenge forum.
Application requirements
Resources & links
- Existing application to be used as the base for your submission.
- Marvel-app storyboard: https://marvelapp.com/888978d. Only the pages listed in this spec. are in scope.
- Zeplin storyboard. Only the pages listed under the heading [Fast 96 hrs] Hestia Control Center UI-Prototype - II (Login & Dashboard) are in scope.
- Storyboard source
- Topcoder Online Review Portal
0. General
0.1 Follow the navigations/workflow implemented in the marvelapp storyboard.
1. Login
ref: https://marvelapp.com/888978d/screen/54568732
Follow the design to create this page.
The login should support three user roles:
Associate: Username/pass should be associate@abc.com/123
Approver: Username/pass should be approver@abc.com/123
Admin: Username/pass should be admin@abc.com/123
Clicking the sign button should:
- Show validation error: for invalid credentials. To show the error state style, make the text-box background red
"#fff5f2" with border color "ff5722"
- Navigate to user dashboard: for valid credentials.
Associate role
2.1 Associate Dashboard
ref: https://marvelapp.com/888978d/screen/54568731
The route to this page should be 'http://.../associate'
Follow the storyboard to create this page
In the main area, show five records in each of the four boxes.
In the four boxes, make the header title & icon clickable
Clicking "Hot Deals" or associated icon in the box header area should navigate to the existing hot deal details page (This page has already been implemented in the given submission)
Header links in other boxes can be dead links
2.2 Add Records
ref: https://marvelapp.com/888978d/screen/54568727
Implement the table layout as in the storyboard.
Clicking the import link should open the import modal.
User should be allowed to drag drop CSV & excel (xls, xlsx) format files to upload.
After uploading show the "sample.xls" imported modal https://marvelapp.com/888978d/screen/54824306
User browser default scrollbar, in the modal list
Datepicker in the lower left corner should be implemented.
Demonstrate error state for failed file upload.
When upload is successful the 'Import' button should be enabled.
2.3 Adding records to the Add Records table?
ref: https://marvelapp.com/888978d/screen/54568727
- The table should allow entering data in the first-row cell of each column i.e. "Enter Effective Date, Enter PRODUCT_NK & Enter DISPLAY_TYPE".
- Activate the "Apply" button when all three fields have some data.
- On clicking "Apply" a new record should be added to the table & the first row input controls should return to the default initial state.
Only after adding one or more new records, the Undo / Redo buttons should be activated to undo/redo the adding/removing of new record(s).
Approver Role
3 Approver Dashboard
ref: https://marvelapp.com/888978d/screen/54568722
The route to this page should be 'http://.../approver'
Follow the storyboard to create this page
In the main area, show five records in each of the four boxes.
In the four boxes, make the header title & icon clickable
Clicking "Hot Deals" or associated icon in the box header area should do nothing.
Header links in other boxes can also be dead links
Admin Role
4. Admin Dashboard
ref: https://marvelapp.com/888978d/screen/54568730
The route to this page should be 'http://.../admin'
Follow the storyboard to create this page
In the main area, show five records in each of the four boxes.
In the four boxes, make the header title & icon clickable
Clicking "Hot Deals" or associated icon in the box header area should do nothing.
Header links in other boxes can also be dead links
5. Fix review issues from previous challenge
5.1 Layout related
-
## /hot-deals-page
- ref https://d.pr/free/i/zKY974
- 1. Placement of title text don't match.
- 2. The table should have more upper spacing.
- 3. Position of the "Show History" button should match. -
- ref: https://d.pr/free/i/NKbadf
- 1. Height of the first row should match.
- 2. Height/top position of the 2nd row should match. -
## Edit records
- ref: https://d.pr/free/i/6HltTt
- Height of the first row should match.
- Text upper spacing should also match. - "Column Settings" popup: the scrollable area should be bigger.
5.2 Functional issues
-
- Pagination not working.
- 'Select All' should toggle the checked checkboxes.
- "Sort by last modified date" not working. https://d.pr/free/i/FHEeAy -
## Edit records
-!! Copy paste in multiple rows of the same column not working as expected. It should update the values as it happens in MS Excel.
- Autocomplete in "DISPLAY_TYPE" column not working as expected. If I enter 'a' then both the list options 'Endcap' & 'Merchandise Bin' should appear in autosuggest list becuase both contains the text 'a'.
- After editing the bg color of edited rows should be gray. ref: https://d.pr/free/i/Wp01KC -
## Default table view
- when "show History" is active only the edited rows should show the 'clock' icon. Here all the rows are showing the clock icon. https://d.pr/free/i/6ejOpJ - "Set Invalid","End Records" actions, should show the changes when clicking "Show History".
- "Table column filter" popup,
a."Sort Last Modified" option does not work.
b."Record Status" column select "INVALID","DISPLAY_TYPE" column select "ENDCAP",
the row with value "ACTIVE" in "Record Status" column is be shown.
c.click outside should close the popup. - Change rows in main table,should show "N Records Edited" in the top right of table.
- "Edit Records" screen:
- Rows should show red and yellow background color different value of "Record Status" column. for now,all are white.
5.2 Typographical issues
- In the main-header section the font-size of the 'Search records' text should be 12px.
5.3 Docs
- Update the readme based on the format listed in Final Submission Guidelines section.
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.