date: 2025-07-18
topics: [frontend, nextjs, images, optimization, sharp, typescript]
day: 3
📘 Day 3 – Real-World Image Compressor (Built from Internship Need)
✅ What I Worked On
- Built a blazing-fast, in-browser Image Compressor
- Used
Next.js (App Router) with server-side image optimization via sharp
- Added live compression preview with a slider for user control
- Ensured mobile & desktop support with responsive UI
- Deployed on custom domain: compressit.sangammundhe.site
📚 What I Learned
- Real impact of large image uploads on dashboard performance
- How to use
sharp in Next.js API routes for efficient server-side image compression
- S3-like optimizations in small-scale projects
- Tailwind + TypeScript patterns for building clean UI quickly
❌ Blockers
- Sharp’s memory usage under heavy compression loads
- mobile image preview bugs
🧠 Reflection
This wasn’t just another tool — I built it to solve a real pain point during my internship. Banners were taking ~4MB and tanking UX. Now with this, images go from 3MB → 60KB without loss of quality. Feels amazing to ship something useful 🚀
🔗 References / Code