OnFly Image Optimization

A Next.js + Supabase image-optimization service that dynamically compresses and serves your images on the fly.

Live demo: supabase-onfly.vercel.app

---

📖 Table of Contents

1. About
2. Features
3. Tech Stack
4. Getting Started
   • Prerequisites
   • Installation
   • Running Locally
5. Usage
6. Deployment
7. Contributing
8. Commits & Changelog
9. License
10. Contact

---

📌 About

This project hooks into Supabase Storage and intercepts image requests to automatically optimize (resize/compress/format-convert) images at request time. Perfect for blogs, storefronts, or any site that needs on-the-fly image performance gains.

---

✨ Features

• Automatic resize, compression, WebP/AVIF conversion
• Caching with edge headers (via Vercel)
• Supabase Storage integration (S3-compatible)
• Zero-configuration for most use cases
• Extensible middleware for custom processing

---

🛠 Tech Stack

• Next.js – Server-Side Rendering & API routes
• TypeScript – Static types
• Supabase – Storage & Auth
• Tailwind CSS – Utility-first styling
• Node.js – Server runtime

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 16
• A Supabase project (free tier works)

Installation

1. Clone the repo

   git clone https://github.com/gambhirsharma/OnFly-Image-Optimization.git
   cd OnFly-Image-Optimization

2. Install dependencies

   npm install
   # or
   pnpm install

3. Configure environment Create a Supabase project and add the API keys

   Copy .env.example → .env.local and fill in your Supabase URL/Key:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Running Locally

npm run dev
# or
pnpm dev

Open http://localhost:3000 to see it in action.

💡 Usage

Once deployed, request any image via:

https://your-deploy-url/api/optimize?url=https://your-bucket.s3.supabase.co/path/to/image.jpg&width=800

The middleware will:

1. Fetch the original from Supabase Storage
2. Resize & compress (using Sharp)
3. Respond with optimized image + cache headers

For full API details, see API_REFERENCE.md

📦 Deployment

Hosted on Vercel (automatic GitHub integration)

Branch: main → auto-deploy on push

Current Deploy: https://supabase-onfly.vercel.app

🤝 Contributing

Contributions are welcome! Please read below:

0. Fork the project
1. Create your feature branch (git checkout -b feat/YourFeature)
2. Commit your changes (git commit -m 'feat: add amazing feature')
3. Push to the branch (git push origin feat/YourFeature)
4. Open a Pull Request

Check CONTRIBUTING.md for full guidelines on commit messages, code style, and issue templates.

📝 Commits & Changelog

We use Conventional Commits. See CHANGELOG.md for a full history.

📄 License

Distributed under the MIT License. See LICENSE for details.

📬 Contact

Created by Gambhir Sharma – feel free to reach out!

• Email: gambhir786191ss@gmail[dot]com
• Twitter: @gambhir_sharma
• Website: https://gambhir.dev