Ivan Seliverstov
Winning proposalBudget: 1500 UAH Deadline: 3 days
Hello! I am ready to fix the cropping system and optimize media loading. I have 4 years of experience in React and TypeScript, and I have also worked with Django/DRF, so I can complete the tasks as a Fullstack developer.
How I will solve your tasks:
Frontend (Canvas Crop): I will configure react-easy-crop with the restrictPosition parameter to avoid empty areas. I will implement a function to generate the output file through the Canvas API based on your coordinates, so the backend receives a ready file instead of a set of numbers.
Optimization: I will integrate browser-image-compression to compress photos to < 1 MB without losing quality and set limits for GIFs.
Backend (Django): I will simplify models and serializers by removing unnecessary coordinate fields. I will use Pillow for image validation and cleaning EXIF data.
Result: Clean code and perfect display of covers without transform: translate, regardless of screen size.
I guarantee a systematic approach and adherence to all acceptance criteria. I am ready to start!
Budget: 3000 UAH Deadline: 2 days
Good evening, I work with Django + React, the tasks are interesting, I can complete all of them, including the backend. I only have a question about point 2 in the backend, do I need to check the library itself or your code where it is used? I can start from Monday.
Budget: 2000 UAH Deadline: 3 days
Hello,
I have experience working with React, TypeScript, and image processing on the client side using Canvas. I have also worked with Django + DRF, setting up file uploads, validation, and image optimization using Pillow.
I am ready to start after reviewing the repository. We can clarify the timelines and budget after a brief technical discussion.
Budget: 3000 UAH Deadline: 3 days
Hello!
The essence of the task as I see it:
Currently, the crop works "cosmetically" — the front end sends coordinates, and the backend tries to do something with them. Because of this, with every resize or device change, the image "shifts," as the CSS transforms are tied to a specific viewport. It is necessary to switch to physical cropping on the client side so that the server receives the final file and does not interpret anything.
Where such tasks usually break down:
1. react-easy-crop by default allows "detaching" the image from the edges of the container — restrictPosition only partially solves this; it is also necessary to control minZoom relative to the aspect ratio of the input image, otherwise, empty areas will reappear on vertical photos.
2. Canvas cropping often ignores EXIF orientation — and photos from mobile come rotated by 90°.
3. Compression of GIF animations — browser-image-compression does not work with GIFs; a separate approach is needed to avoid ruining the animation.
4. Transitioning from the old scheme (coordinates in the database) to the new one (only the file) — if existing records are not migrated, old avatars will break.
Approach:
Front end — complete cropping through Canvas considering EXIF, compression, and outputting one file. Backend — simplified endpoint, Pillow validation, removal of metadata. Result: cover — a regular one with object-cover, without any transform: translate.
Experience: implemented custom crop systems for profiles in a social project with support for GIF avatars and adaptive display.
A few questions that affect the estimate:
— How many existing profiles with coordinates are in the database? Is migration needed, or do we start "from scratch"?
— GIF avatars — do we keep the animation after cropping, or is the first frame enough?
Timeline: 3–4 days, 3000–4000 UAH (fullstack, including migration).
Budget: 2000 UAH Deadline: 3 days
Hello! Your project looks wonderful. I am ready to start working immediately and complete it at a high level.
