Apply Now View Instructions View Rubric

Exam

Please build a pixel-perfect interactive desktop and mobile browser front-end of the following design mockups.

  • Must use React.js, Flexbox, and a React UI component library framework.
  • Host as static pages (no back-end) on Firebase or alternative free solution.

Desktop UI

Mobile UI

Requirements

  1. RWD. Responsive Web Design for both mobile and web.
  2. Must use JavaScript.
  3. Must use React.js.
  4. Must use CSS Flexbox
  5. Must use a React UI framework from this list:
  6. Material UI
  7. Semantic UI
  8. React Bootstrap
  9. React Toolbox
  10. Elemental UI
  11. Must host your site as a live static page.
  12. Please use a free hosting service like Heroku, Firebase, ZEIT, or Netilfy to host your site as a live static page.
  13. This is a not a back-end exam. The web page interactions should all be client side.

Reminders

  • We’d rather you do a few features well, rather than all the features poorly.
  • Please be sure to upload code to GitHub/GitLab.
  • At the 2.5-hour mark:
    • Please submit however much you’ve completed, regardless of whether you’ve finished or not.
    • Make sure your site is live, and submit URL.
  • Make sure to complete Exam Submission Form.

Features Rubric

  1. Pixel perfect on:
  2. Desktop (Chrome)
  3. Mobile (Android, iOS)
  4. Fill in gaps not in the design mockups in a polished manner
  5. Effects
  6. Hover
  7. Selection
  8. Disable
  9. Keyboard and mouse events
Score Feature
50 Numbers Entry Box
50 Radial Chart and Stats Pane
60 Search Filters and Dropdown Menu (20 pts per type of selector)
40 Main Pane and Hashtags

View Exam Rubric

Features List

Choose any of the following features to implement. There are no required ordering.

1. Numbers Entry Box

  • Only numbers (0-9), period (.), and backslash (/) allowed in the numbers box.
  • Right and left arrows disable for numbers box.
  • Clicking disabled for numbers box.
  • Keyboard is automatically in focus on the numbers box on page load. No need to click on numbers box to bring it in focus.
  • “Press Enter” text and “Submit” button becomes enabled only when numbers are entered into numbers box.

2. Radial Chart and Stats Pane

  • Pixel perfect desktop and mobile
  • Not a static image, but real chart that could update if page is connected to server side.

Desktop UI

Mobile UI

3. Search Filters and Dropdown Menu

  • Pixel perfect desktop and mobile
  • 3 types of filters
    • Simple Selector
    • Multiple Selector
    • Checkboxes

Simple Selector

Multiple Selector

Checkbox Selector

4. Main Pane and Hashtags

  • Pixel perfect desktop and mobile

Destkop UI

Mobile UI


Introduction keyboard_arrow_right
Principles keyboard_arrow_right
People keyboard_arrow_right
Recruiting keyboard_arrow_right
Engineering keyboard_arrow_right
Product keyboard_arrow_right
Growth keyboard_arrow_right