📦 App 🔨 NextJS and Chakra-UI 🙎‍♂️ by Madza

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.


  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.