Answer To Questions:

This is your chance to talk about the prompt! Please provide these answers on your README.

Please share your screen resolution, OS, browser version (best if you're using latest) you used to test in so we can look at it in:

To Test application used Chrome on macOS 77.0.3865.90 and tested screen resolutions: 1440px, 1200px, 1024px, 768px, 425px, 375px

What part of the design did you get stuck on? What took the most time? Similarly, what was the easiest part?

-The part of the design that I was stuck on and took the longest was building the the charts(Site Visits and Revenue) specifically picking the chart type. The easiest part was the navigation and its animation.

What part of the design didn't make sense? Did you change anything?

-The design made sense to me having built dashboards before.

If you had more time, what would you have liked to implement?

-If I had more time I would have used a mixture of 2 different colors to match with the blue and I would have add more interaction with the dashboard. For instance hover effects, notifications and more ..

What did you have to research or lookup while working on this?

-I researched which type of chart would be best for this type of application

frontend-interview-prompt

This is the homework assignment given to prospective frontend engineers. This task should not take more than 4 hours of your time. This prompt itself should last 3.5 hours, with half an hour to fill out the remaining questions on this README.

Task

Create a dashboard as close as possible to the following image:

The graphs underneath Site Visits and Revenue can be placeholder images and any image that you see fit.

Getting started

Fork this project and clone it into your own repository.

Please use any front-end framework you are comfortable with. We suggest getting started with material-ui as they have many of the the components pre-built. If you are using a different framework, there are usually equivalent libraries for material design.

If you choose to start from scratch the font-type is: Roboto,

Things we are looking for

Are the margins and padding similar to the image? Were the colors close?
Were clickable items accounted for with the right elements? e.g. (was a button or dropdown element used where it should have been used)
How was the project set up?
If deviations to the design were made, were they justified?

Going above and beyond

Before moving onto these, please make sure you are happy with the overall look of your dashboard already!

Use your best judgement to make the dashboard responsive and collapsible at 1200px breakpoint. - The lefthand drawer should collapse at 1200px.
- The "Totals" Section should collapse to a 2x2 block - The two graph blocks should stack.
If you have extra time, replace the placeholder images with dummy data and graphs from a visualization library like C3, D3, or React Vis. The filters on the graph do not have to work, but please share below if you had more time what you would filter on.
Replace the Totals section with data from the following endpoint with a new request being made each refresh: http://www.mocky.io/v2/5d018fbd3100005400ab2968, use your best judgement how to handle this new data.

Questions To Answer: