Project EPM UI Prototype | Warm up with Vuejs

We have assigned $300 for the first two winners for this contest. Note that in case of a tie, the first to submit wins. There’s ONLY ONE SCREEN in scope for this contest.

 

Challenge Objectives

• Create a user interface using Vuejs for the web

• This is just a warm up contest and there is only one screen. This contest is to make the community familiar with Vuejs and get them comfortable to develop more user interfaces using it

 

Project Background

• Project EPM is to rewrite our client’s existing Enterprise Performance Management tool in Vuejs. Their old user interface was written using Flash, which is now at its end of life and will soon be out of support.

• The tool allows our client to view (and generate) various reports on the performance of their different departments

 

Technology Stack

• Vuejs (v2.6.10)

    

General requirements

• We have just one screen in scope for this contest. You need to recreate the Topcoder’s Dashboard page in Vuejs. We will share a screenshot of my dashboard that you need to look at creating. For the actual asset, you could check out your own dashboard page. But you need to have the content look like the screenshot shared, to keep it consistent during review.

• Use icons and images where appropriate, as used currently.

• You have to implement:

  • The banner at the top about the 50th Anniversary of the Moon landing. Note that it collapses and expands.

  • The toggle button to show earnings. Display the earnings section too with dummy data (this is not present in the screenshot but you need to provide it).

  • Hover effects

• You don’t have to implement:

  • The other two tabs. Only My Active Challenges tab will be having content. The other tabs will be dummy.

  • All links and buttons will be dummy.

 

Important Notes

• Use vue-cli to scaffold your app. In this, you will work with babel, sass (dart sass) and eslint with prettier. Use dedicated config files and ensure that you lint on save.

• Use single file components

• You will NOT be using state management (such as vuex).

• You need to support a minimum width of 1366px

• Browsers in scope are Google Chrome Desktop (latest) only

• All buttons, dropdowns are dummy. You don’t have to display any confirmation or popup indicating that the click works. Only provide hover effect for the elements as applicable.

• You can make use of third party libraries that work with vuejs as long as they have an acceptable license

• You can make use of bootstrap, bulma or other css based front end component libraries as long as they have a license allowed by topcoder.

• You are required to follow the Vuejs style guide. This may be a warm up contest but we still want you to create the user interface the right way and get familiar with the style guide.

• REVIEWERS: Kindly note. You need to review the submissions by not only checking if they match the required design but also verifying that the code is valid. Please familiarize yourself with Vuejs’s styleguide and Vuejs’ best practices.

Final Submission Guidelines

Provide a zip file containing the files and folders for your solution and upload it to Topcoder.