https://github.com/xfiveco/react-test

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

figma front-end react recruitment-task recruitment-test

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/xfiveco/react-test
• Owner: xfiveco
• Created: 2021-03-25T08:18:03.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-05-11T12:44:44.000Z (almost 3 years ago)
• Last Synced: 2024-11-06T19:12:11.397Z (3 months ago)
• Topics: figma, front-end, react, recruitment-task, recruitment-test
• Homepage:
• Size: 311 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React Test Project

======================

## Project brief

Convert the following designs to a React app.

### Thumbnails

![Xfive Gallery Test Thumbnails](xfive-front-end-test-thumbs.jpg)

### Overlay

![Xfive Gallery Test Overlay](xfive-front-end-test-overlay.jpg)

## Requirements

1. Create project using _Create React App_.

1. Use TypeScript.

1. Use your preferred way of writing CSS for a React app

1. Make it responsive according your best judgement. The 1920px resolution of the design is a reference resolution we compare your conversion to.

1. Create a hover effect for the image thumbnails.

1. Create a simple custom overlay for photos.

1. Create a transition for opening the overlay like shown in this [prototype](https://www.figma.com/proto/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-Test?node-id=1%3A2&viewport=73%2C86%2C0.5&scaling=min-zoom).

## Design

- [Design](https://www.figma.com/file/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-Test) is available in Figma. If you haven't already, sign up for a free Figma account, so you can inspect the design.

- [Prototype](https://www.figma.com/proto/XmLxW928QcDblZul5dGpLM/Xfive-Gallery-Test?node-id=1%3A2&viewport=73%2C86%2C0.5&scaling=min-zoom)

The following images are used in the design:

 - [Image 1](https://pixabay.com/en/new-zealand-lake-mountain-landscape-679068/)

 - [Image 2](https://pixabay.com/en/new-zealand-lake-web-kai-dock-583176/)

 - [Image 3](https://pixabay.com/en/new-zealand-doubtful-sound-fjord-583181/)

 - [Image 4](https://pixabay.com/en/sun-rise-beach-new-zealand-auckland-661541/)

## 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.