Skip to content

README.md

Latest commit

 

History

History
157 lines (111 loc) · 4.35 KB

README.md

File metadata and controls

157 lines (111 loc) · 4.35 KB

OnFly Image Optimization

GitHub commit activity GitHub last commit GitHub issues License
Vercel Kubernetes

image

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
  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:

  1. Fork the project
  2. Create your feature branch (git checkout -b feat/YourFeature)
  3. Commit your changes (git commit -m 'feat: add amazing feature')
  4. Push to the branch (git push origin feat/YourFeature)
  5. 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!