© Made by Adam Bellanger
← ProjectsPersonal

Upload an image and get a QR code pointing to a public URL that serves it.

Preview

qrdrop.online
QR Drop: QR code generated for a URL, with download and A4 print
qrdrop.online
QR Drop: uploading a file to share
QR Drop on mobile

Stack

Languages
  • TypeScript
Front-end
  • React
Back-end
  • Express
  • Node.js
Infra
  • Docker

Context

Sharing an image through a simple QR code without a third-party service: the image is stored on my server and served directly.

Role

Full-stack development and containerisation.

Architecture

  1. Browser

    File or URL

  2. Reverse proxy

    HTTPS, 110 MB upload limit

  3. Express + TypeScript

    API, QR generation, static front end

  4. /data volume

    Files named by UUID

Scanning the QR code opens GET /i/:uuid, which serves the file directly.

Challenges

Handling uploads of up to 100 MB behind a reverse proxy (size limits on the nginx/Caddy side), honouring X-Forwarded-* headers and exposing a health check endpoint for Docker.

Outcome

A single-container app (compiled React front end served by Express), images persisted on a volume, running in production on its own domain, qrdrop.online.

Highlights

  • TypeScript front end + API
  • One container, one volume
  • Built-in health check
Next projectStudioLandingPages →