Contributing to open-source projects is one of the best ways to learn, grow, and connect with the developer community. Recently, I had the opportunity to work on an interesting issue in the Open-Tacos project — implementing client-side image compression. In this post, I’ll walk you through how I tackled the problem, handled feedback, and finally got my pull request merged. 🙌

The Problem

The issue seemed simple on the surface: compress uploaded images on the client before sending them to the server. This would help optimize upload speeds and reduce bandwidth usage, especially useful for high-res climbing photos.

The Approach

After some research and community discussion, I chose to use compressorjs — a lightweight library that does exactly what I needed with minimal fuss.

I created a utility function that:

Took a file input from the user
Compressed it based on the desired size/quality
Returned the new compressed file to be used in the upload workflow

The initial code looked like this:

import Compressor from 'compressorjs';

export const compressImage = (file: File): Promise<File> => {
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.6,
      maxWidth: 2000,
      success(result) {
        resolve(result as File);
      },
      error(err) {
        reject(err);
      }
    });
  });
};

Then I integrated this logic into the photo upload flow so that every image would be compressed automatically before upload.

Reviewer Feedback and Revisions

When I raised the PR, the maintainers appreciated the effort, but also had constructive feedback. Here are a few things they asked me to revise:

1. Error Handling Edge Cases

The reviewer reminded that compression must cover an important edge case — like images larger than 30 MB must not be compressed, instead throw an error.

✅ I added specific file size validation logic before initiating compression.

2. Improving File Type Checks

I was initially compressing any file that came through. The reviewer asked me to limit compression to image file types only.

✅ I updated the logic to skip non-image files using simple MIME type checks.

3. Linting & Formatting

My pre-commit hook failed due to some ESLint rules. I also had to align with the project’s usage of ts-standard.

✅ I fixed all lint issues and even contributed to the .lintstagedrc setup discussion.

The Final PR

After addressing the feedback and thoroughly testing the changes, a reviewer suggested optimised code, which not only reduced the number of lines in the code but also made so much sense regarding how clean the code must look. I pushed the updates and waited. A few hours later... 🎉

My pull request was merged!

This small win meant a lot. Not only did I contribute meaningful code, but I also learned:

How to accept and implement technical feedback
How to use image compression libraries
How to work with linting tools and pre-commit hooks
How to write cleaner and optimised code

Key Takeaways

I learned how to write clean, optimised, and better code that avoids side effects.
Open source is a collaborative process — reviewers are there to help us improve.
Contributing to real-world projects teaches you what tutorials can't.

If you're thinking about contributing to open source — do it. You’ll learn more than you expect, and your confidence as a developer will grow with every line of code you contribute.

Happy coding! 💻✨

How I Solved an Image Compression Issue in the Open-Tacos Project and Got My PR Merged