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
- RWD. Responsive Web Design for both mobile and web.
- Must use JavaScript.
- Must use React.js.
- Must use CSS Flexbox
- Must use a React UI framework from this list:
- Material UI
- Semantic UI
- React Bootstrap
- React Toolbox
- Elemental UI
- Must host your site as a live static page.
- Please use a free hosting service like Heroku, Firebase, ZEIT, or Netilfy to host your site as a live static page.
- 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
- Pixel perfect on:
- Desktop (Chrome)
- Mobile (Android, iOS)
- Fill in gaps not in the design mockups in a polished manner
- Effects
- Hover
- Selection
- Disable
- 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 |
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