Boilerplate

A full boilerplate showing client-side cropping with react-image-crop and secure uploads to a local S3-compatible MinIO bucket. The flow is: upload → crop → export → PUT via pre-signed URL. Built on Next.js App Router with TypeScript and shadcn/ui.

Features

• Next.js App Router + TypeScript.
• react-image-crop for intuitive crop UX (aspect ratio, zoom, keyboard/touch).
• High-quality canvas export to Blob (exact pixel crop).
• S3-compatible uploads using pre-signed PUT URLs (no credentials in the browser).
• Local MinIO via Docker (S3 API), easy to swap to AWS S3 in prod.
• Simple object key strategy (content hash / ULID) and MIME/size validation.
• Clean UI using shadcn/ui.

Use Case

Great for apps that need avatar/banner upload with client-side crop and S3-compatible storage without exposing secrets. Works locally with MinIO and moves to AWS S3 by switching envs. 🚀