Avatar Uploader
A React component to upload and crop avatars.

Challenge

This challenge consists of creating a React component using Typescript to let users upload and crop avatars.

Croct

View Demo View Github

Requirements

The <AvatarUpload /> component should allow users to upload images to make it easier for them to recognize key interface elements related to an organization.

  • It should allow uploading an image by dragging it into the dashed area or clicking on it.
  • Throughout the entire process, the user can click on the “X” icon to cancel and return to the initial state
  • After upload, the user can adjust the image to better fit the circular format. Using a slider, the user can zoom in and out on the image cut out by the circular mask to preview the final result.
  • Clicking on save, the component should display the cropped logo and a button to restart the process. It must also provide some way for parent components to access the resulting image’s raw data.

We are very focused on code quality, so we expect you to include tests to ensure all requirements are covered.

Feel free to extract out subcomponents, like the slider, as you find necessary. You can also use open-source components available in the community – why reinvent the wheel, right? ?

Design

You can find the component’s design here.

Technologies

Technologies that I have used to develop this project!

Getting started

Requirements

Clone the project and access the folder

$ git clone https://github.com/joao-pedrozo/react-zoom.git && cd react-zoom

Follow the steps below

# Install the dependencies
$ yarn

# Start the client
$ yarn start

</> with ❤️ by João Pedrozo