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

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](https://github.com/OpenBeta/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`](https://github.com/fengyuanchen/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:

```ts
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**](https://github.com/OpenBeta/open-tacos/pull/1290) **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! 💻✨