Hey everyone! I recently developed an image compressor using NextJS, Tailwind CSS, and AWS S3 for temporary image storage.

During this project, 🚀 I utilized a robust tech stack including NextJS, TypeScript, Tailwind CSS, AWS S3, Sharp, JSZip, and React Drop Zone. The initial phase involved dedicating around 4-5 days to meticulously designing the user interface, ensuring both visual appeal and responsiveness across various devices.

One of the main challenges I faced was managing file uploads to AWS S3 and ensuring seamless data transfer between front-end and back-end components. To overcome this, I conducted thorough research and experimentation. Ultimately, I found an effective solution: transmitting files as form data from the front-end to the back-end. From there, I processed these files into buffers using Sharp for compression, and finally stored the compressed images in an AWS S3 bucket.

This project provided invaluable learning experiences, enhancing my problem-solving skills and deepening my understanding of full-stack development. It underscored the importance of perseverance and resourcefulness when tackling complex technical challenges.

Check out the project on GitHub: GitHub Link Live Demo: Live Demo Link

Key Technologies Used:

• NextJS

• TypeScript

• Tailwind CSS

• AWS S3

• Sharp

• JSZip

• React Drop Zone