typescript
CWAD Image Resizer
CWAD Image Resizer is a full-stack image processing application built with Next.js, TypeScript, Sharp, Cloudinary, and Upstash Redis. Users can upload images through file selection or drag and drop, resize them to custom dimensions, control output quality, convert images between PNG, JPEG, WebP, and AVIF formats, download the processed result, or optionally generate a permanent Cloudinary-hosted URL. The application also includes server-side validation with Zod and IP-based API rate limiting with Upstash Redis and Upstash Ratelimit.
Features
What it does
- Image upload
- Drag-and-drop image upload
- Instant image preview
- Automatic original image dimension detection
- Client-side image validation
- Custom image width
- Custom image height
- Aspect-ratio locking
- Automatic aspect-ratio calculation
- Image quality control from 1% to 100%
- PNG conversion
- JPEG conversion
- WebP conversion
- AVIF conversion
- Processed image download
- Optional Cloudinary image hosting
- Permanent shareable image URLs
- Server-side Zod validation
- IP-based API rate limiting
- Rate-limit response headers
- Image metadata inspection
- Responsive image processing workflow
Challenges
Designing a reliable server-side image processing pipeline, handling different image formats and quality settings, validating uploaded files and processing parameters, managing image transformations with Sharp, integrating optional Cloudinary hosting, and protecting the processing API with IP-based rate limiting.
