Challenge Overview
Welcome to the Hestia Control Center Front-End Dev Challenge. In this challenge, we are looking for you to develop an Angular 2+ web application based on the provided storyboard design.
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!
Prize of this challenge has been raised from $1200/$600 to $1600/$800 & scope is reduced to "Hot Deals" section requirements only
General requirements
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 they will only be using Chrome
Zeplin
- For access to the Zeplin based storyboard, apply in the challenge forum.
Application requirements
Resources & links
- 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 Hestia Control Center UI-Prototype - I are in scope.
- Storyboard source
- Topcoder Online Review Portal
0. General
0.1 Follow the navigations/workflow implemented in the marvelapp storyboard.
0.2 For all the tables implement sorting, pagination, search & filter function. Ref: common table functions
0.3 Pagination section is not present in the storyboard. Please use the 'Basic pagination' layout from here https://ng-bootstrap.github.io/#/components/pagination/examples
0.4 !imp: All table columns should be dynamic i.e. the table data including the table header labels should come from JSON data files.
1. Hot Deals & Hot Deals section tables with several functions
The route to this page should be 'http://.../associate/hot-deals'
ref: https://marvelapp.com/888978d/screen/54568734
Header section
Backlink should be a dead link.
- The centered search section should filter the records in the table below based on the entered search
text.
- Follow this https://marvelapp.com/888978d/screen/54568740 for the
active search state layout.
- Ignore the table area selected cell layout in the link, select the entire row with matching value NOT just the
matching value cell. Ref section 3.4 for more.
Clicking the user-icon on the right side should log out the user.
1.1 Settings
ref: https://marvelapp.com/888978d/screen/54568733
Clicking the setting icon should show the column settings panel.
The user should be able to select/unselect checkboxes to show/hide table columns. On clicking 'Apply' only the selected column should appear on the table.
When opening the setting panel, the Apply link stays disabled. Once the user checks/unchecks any checkbox the 'Apply' button becomes active.
Implement custom scrollbar or browser default scrollbar for the setting panel.
1.2 Hot Deals menu
ref: https://marvelapp.com/888978d/screen/54568738
Clicking the hot deals menu should show the links as in storyboard.
Links except "Hot Deals" should be dead for now
1.3 Table column function
ref: https://marvelapp.com/888978d/screen/54568737
Implement the functions listed in the above 0.2 section
The 'filter' section https://d.pr/free/i/mJakFT should only be added to the "Record Status" & "Display_Type" columns. For other columns, it's not required.
In 'filer' section https://d.pr/free/i/mJakFT, if all values are unchecked then don't filter anything (show all records) else filter records based on the options checked.
1.4 Selecting table row
ref: https://marvelapp.com/888978d/screen/54568739
Checking unchecking checkboxes in the row should select/unselect that row.
If the user has selected at least one row, make the table header section links "Edit Records", "Set Invalid" & "End Records" active, otherwise, these should stay disabled.
1.5 Set Invalid & End Records options
ref pages: from https://marvelapp.com/888978d/screen/54568742 to https://marvelapp.com/888978d/screen/54568743
Clicking 'Set Invalid & End Records' when active should mark the selected row with 'Invalid' and 'End Records' styles & selected rows should become unselected.
1.6 Show/hide history
ref: https://marvelapp.com/888978d/screen/54568746
On clicking the "Show History" button, prepend the text 'ACTIVE' to the 'Record status' column cell values & add a clock icon in the end. Only rows those were updated should be updated with these changes. Ref: https://marvelapp.com/888978d/screen/54568745 .
Cking "Show History" button also updates the button text to "Hide History" & vice-versa.
1.7 Edit Records
ref: https://marvelapp.com/888978d/screen/54568748
Selecting table rows and clicking the 'Edit Records' link from the table header section. Should open a new "Edit Records" page https://marvelapp.com/888978d/screen/54568747
For now, only show thee columns on "Edit Records" page.
The user should be able to select multiple cells in a column.
Right-clicking selected cells should show the "Cut, copy & paste" options https://marvelapp.com/888978d/screen/54568750
Paste Should update the value of the selected cell with previously copied text. If no text is copied previously then don't update selected cell text.
The Display_Type column cell should support autocomplete. Use any random text to populate autocomplete options.
Apply/Cancel actions: Apply stays disabled by default. It becomes active if some changes are
made.
- Clicking 'Apply' in the active state commits the changes & navigates back to the "Hot
Deals" page. https://marvelapp.com/888978d/screen/54568726
- Clicking 'Cancel' should also navigate to "Hot Deals" page without committing any change.
On "hot deals" page https://marvelapp.com/888978d/screen/54568726 , notice on the edited rows, the 'ACTIVE' text is prepended in the 'record status' column cell & 'clock' icon appears in the end.
1.8 Undo/Redo
Implement undo and redo functions.
1.9 Pagination
Pagination section is not present is the storyboard. Please use the 'Basic pagination' layout from here https://ng-bootstrap.github.io/#/components/pagination/examples to implement the table pagination.
1.10 Add Records (Out of scope)
Implement the table layout as in the storyboard.
Undo / Redo functions should work.
Clicking the import link should open the import modal.
User should be able to drag drop CSV format file to upload.
After uploading show the "sample.xls" imported modal https://marvelapp.com/888978d/screen/54824306
Datepicker in the lower left corner should be implemented.
Demonstrate error state for failed filed upload.
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.