React Test Project

Project brief

Convert the following designs to a React app.

Thumbnails

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:

• Image 1
• Image 2
• Image 3
• Image 4

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.