/react-test

React test - job openings at https://xfive.recruitee.com

React Test Project

Project brief

Convert the following designs to a React app.

Thumbnails

Xfive Gallery Test Thumbnails

Overlay

Xfive Gallery Test Overlay

Requirements

  1. Create project using Create React App.
  2. Use TypeScript.
  3. Use your preferred way of writing CSS for a React app
  4. Make it responsive according your best judgement. The 1920px resolution of the design is a reference resolution we compare your conversion to.
  5. Create a hover effect for the image thumbnails.
  6. Create a simple custom overlay for photos.
  7. Create a transition for opening the overlay like shown in this prototype.

Design

  • Design is available in Figma. If you haven't already, sign up for a free Figma account, so you can inspect the design.
  • Prototype

The following images are used in the design:

Supported browsers

Ensure that the app works and displays correctly in the following browsers:

  • Google Chrome (latest version)
  • Firefox (latest version)
  • Microsoft Edge

Project Deadline

Deliver project within 1 week time.