Register
Submit a solution
The challenge is finished.

Challenge Overview

Welcome to the Hestia control center UI-Prototype - III (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

  1. Get access to the repo using this link: https://x.topcoder.com/api/v1/gitlab/groups/registration/593b4bda-66a2-4450-beb3-fd2a9f86b042-1555910519681
  2. Use the sprint-2 branch as the base of your submission.
  3. Marvel-app storyboard: https://marvelapp.com/888978d/screen/54568722. Only the pages listed in this spec. are in scope.
  4. Zeplin storyboard. Only the pages listed under the heading Hestia control center UI-Prototype - III (login & dashboard) are in scope.
  5. Storyboard source
  6. Topcoder Online Review Portal

0. General

0.1 Follow the navigations/workflow implemented in the marvelapp storyboard.

1. Approver role pages


2. Admin role pages

  • Login to the application using the credentials admin@abc.com/123
  • After login user lands on the admin dashboard page. https://marvelapp.com/888978d/screen/54568730 (Already built)

    • 2.1 Hot Deals (Details page)

  • Click on the 'hot deals' links should navigate to the 'hot deals' details page: https://marvelapp.com/888978d/screen/54568752
    On the upper right side by the the "Hide History" buttons should be "Show History" & clicking this should the history view.
  • Clicking the "Approve" button should approve the deals. https://marvelapp.com/888978d/screen/54568729
    Notice that buttons on right side disappears.
  • Ref: https://marvelapp.com/888978d/screen/54839625
    Clicking the "history clock icon" under the setting column should show the "Record history" modal for that record.

    • 2.2 Search & pagination

  • Search in the header section should be implemented & it should filter the table records.
  • Add Pagination along with page size section below the table by following this page: https://tc-hestia.herokuapp.com/hot-deals-page
  • The page size drop-down options should be 10, 20, 50 & 100
  • Implement the sorting options for the header links by following this https://tc-hestia.herokuapp.com/hot-deals-page
    The header fields "Record Status & DISPLAY_TYPE" should have filter section. https://d.pr/free/i/VQBJES

    • 2.3 Manage Approvers

  • Clicking 'Manage Approvers' link should navigate to "Approver Management" page https://marvelapp.com/888978d/screen/54568751
  • The approver table sould support sorting on clicking the table header.
  • Clicking the "Add Approver" button should reveal the "Add Approver panel" https://marvelapp.com/888978d/screen/54568753
  • Implement the 'Search by name or email..." feature.
  • Checking a check box should enable the "Apply" button
  • On clicking the "Apply" button show the "Loading more approvers" progress for few seconds/milliseconds https://d.pr/free/i/9M7c1R after this the table is appended with new approver row(s)
  • Clicking delete in the table rows should delete the approver record
  • Edit is a dead link.
  • Search in the header section should be implemented & it should filter the table records.

3. Fixes from previous challenge

Previous challenge: https://www.topcoder.com/challenges/30088500/?type=develop

  1. Login

    Textbox width should be fixed.

    After showing the error state if user focuses on an error state textbox then it's style should reset to default.

    When entering text in text boxes the text color should be darker (#333333)

  2. Dashboard landing page

    the hover effect on different boxes should have some easing effect.

    Text in the "Manage Approvers" & "Approve" buttons should be vertically centered.

  3. Functional issues

    On Add Records page: https://d.pr/free/i/wa07gV Drag & drop, Browse should allow to upload multiple files.



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.

ELIGIBLE EVENTS:

Topcoder Open 2019

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30089126