Skip to content

Latest commit

 

History

History
43 lines (34 loc) · 2.8 KB

readme.md

File metadata and controls

43 lines (34 loc) · 2.8 KB

WHCC Interaction/Front-End Engineer Case Study

Create a private mirror copy of this repo in your own Github account.

Please add your WHCC contact to that repo as a collaborator when you're done.

The purpose of this case study is for us to better understand where your technical expertise is at.

Description

Make this scaffolded app look and behave as described in the screenshots and video described in the Resources section below.

Some work has already been done in the index.html file. You can open it directly in a web browser to see it and get started. Please do not use a framework, just vanilla javascript or typescript. You may use webpack, babel, or any other compiler you're comfortable with. You may also use ES6, do not worry about supporting ES5. Assume you're targeting only greenfield browsers. Try to timebox your work to approximately 1-2 hours.

You may change anything provided to fit your needs, be it DOM structure, CSS, or javascript.

Requirements (in order of priority)

  1. The app should look and behave as close to the included screenshots/video as possible.
  2. Clicking on a gallery photo will display it in the main content area.
  3. The sidebar should have the same styles and interactions as demonstrated in the screenshots/video.
  4. The sidebar area should apply clips and filters (provided in the CSS) to the image in the main content area with the styling demonstrated in the video/screenshots.
  5. The selected photo in the gallery should have a gray border when selected with a blue border when hovered.
  6. The selected photo should display some metadata about it in the sidebar content area, including the file name, mime-type, and human-readable size of the image.
  7. Each section on the sidebar should have a subtitle to describe what it does with the styling demonstrated in the video/screenshots.
  8. When dragging files onto the gallery drop zone, the dashed line should change color.
  9. Non-image files should be rejected when dropping on the gallery area at the bottom of the page.

Resources

  1. Watch an interaction demo online.
  2. There are screenshots of the initial and populated state available in the /screenshots directory.
  3. There are test images available in the /images directory.

Core Values of Design

  1. Polished simplicity in the user experience and aesthetic.
  2. Focus on empathy for the user’s experience.

Discussion Notes

  1. What decisions did you make before you began development?
  2. How did you decide what to work on in order to meet the time constraint?
  3. What was your decision making process for your code organization?
  4. If you had more time, what would you have implemented?