CropScore

If you are a content creator, the chances are you have come across stretched, shrank, non-centered or pixelated images after the posting of your material. Those are mostly caused due to uploading images with a low resolution or inappropriate aspect ratio.

I came up with a solution, that allows you to forget about all the technical issues with resolutions and aspect ratios.

Features

1. Image upload - Supported formats .JPG and .PNG
2. Presets - Currently there are 33 presets from 10 commonly used platforms
3. Custom mode - User is allowed to switch to custom resolutions
4. Ratio lock - User can lock any custom aspect ratio
5. Input validation - Informative warning messages for invalid inputs
6. Move tools - User can move the image around
7. Zoom tools - Zoom the image in or out to get the precise crops
8. Rotate tools - Rotate image clockwise or counter-clockwise by 45-degree increments
9. Transform image - Swap image on X or Y axis
10. Helper grid - Providing help for centering
11. Resolution data - Updated in real-time as you resize the crop window
12. Crop score - Real-time crop score of the fit for the target use
13. Image preview - The user is allowed to preview the crop
14. Reset - Reset image and crop windows as they were when the image was uploaded
15. Download - Download the image in .PNG and .JPG
16. Responsive - Use it on any device

Tech stack

The project is created using NextJS and Chakra-UI.

The project is under the MIT licence and the code is available on GitHub.

Final notes

The full article on the making of the app can be read here.