joao-pedrozo/react-zoom

🖼 Upload images and zoom-in and out with an interactive slider developed with React and Typescript.

Avatar Uploader
A React component to upload and crop avatars.

You can acess the LIVE version on the project here

Challenge

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

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

Production techs

• ReactJS
• Styled Components

Quality ensurance/documentation techs

• Husky
• TypeScript
• Lint-staged
• Commitzen
• Prettier
• ESLint
• Jest
• Testing Library
• Storybook

Getting started

Requirements

• Node.js
• Yarn or npm

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

Great! Now you can see the project on your browser by acessing http://localhost:3000.

Commands

• start: runs the main application at localhost:3000
• build: creates the production build version
• storybook: runs the storybook project at localhost:6006
• build-storybook: generates the build version of the storybook project
• test: executes all tests
• test:watch: executes all tests in --watch mode
• commit: runs commitzen to ensure that your commit messages are following the expected standarts

</> with ❤️ by João Pedrozo