Front-end Developer Test

This front-end developer test is aimed to primarily test developer's fluency in preparing a web page from a given image file and to asses fluency in using JavaScript and designing user interfaces. Moreover, we're interested in your little technical choices and judgements, reasoning and ability to understand and explain the trade-offs behind them.

The test has limited time of two to three hours. Please try to finish as much as possible in this time. The aim is not to complete some production-ready finished software. Just to see some code that you've written that will give us a starting point for discussion in the interview. Being able to tell us about the code that you would have written next is just as interesting as what you submit.

We would like to see markup, styles and script that you've written, the way you have structured you have taken decision on selectors, class names and so on.

Story:

As a user,

I'd like to view menu-bar options available to me, accessible from the ellipsis icon in the right side of the top menu-bar,

So that I can perform essential actions in the webapp.

• Consider the menubar.png for reference.
• The menu should show some dummy actions and some submenu items that user can navigate.

Here is the checklist that can be handy when you approach the test

• You are free to use jQuery
• Using Bootstrap or similar frameworks is not okay to achieve responsiveness
• Using templating framework like Mustache or AngularJS is not okay
• The webpage look the same in all four major browsers as much as possible - Chrome, Firefox, Safari and Edge
• Make it responsive using your best judgement. Fonts should be responsive as well.
• When working on the project use consistent coding style
• Try to use SASS effectively with reusability where applicable

Hint: Consider edge cases of data and make sure the UI components give acceptable user experience.

We've also included potentially required images and code skeleton.

To submit your exercise, you can either send us a link to a Git repo, or archive your repo (ideally including the Git history).

All the best and happy coding!

Steps to get started

1. Go to project home directory
2. npm install
3. npm run watch-css

JavaScript Assignment

• js/menudata.js file is added. This js file contains data about which menu items & action icons should be shown in the menu popover.
• Your task is to use this menuData json to render all the action icons & menu items in the popover.
• If menu has submenu, it will have "items" array. See "My Account" in menuData.items array.
• If item object has display: false, the menu item should not be displayed.
• If item has clickable: false, item should be shown disabled.

##IMPORTANT Please make this menubar fully functional with all parts including UI Design, interaction with menubars as outlined above. Think of browser compatibility, responsiveness. In submission, please list down any assumptions if you have made and in which all browser it is expected to work fine.

We also prefer you to develop this using "ReactJS" to demonstrate your code organization and showing modularity of code. If you still want to skip any part, "ReactJS" is the only option. In that case, you will do it with native javascript.

All the best!