Prismock

Prismock is a self-hosted dynamic asset delivery network built for developers and teams who need full control over their media pipeline. It accepts raw file uploads, stores them securely in Cloudflare R2 edge storage, and serves them with on-the-fly image processing, CDN-level caching, and enterprise-grade SSO authentication.

Fun fact: Every image on this page is served by Prismock itself. This project page is dogfooding its own infrastructure — the screenshots you see below are hosted on the same Prismock instance that powers my personal servers.

Features

• Multi-file drag-and-drop upload with real-time progress indicators and per-file status tracking
• Just-In-Time WebP conversion — derivatives are generated on first request and cached in R2 for subsequent hits
• Asset library with paginated grid view, bulk selection, and one-click delete
• Copy link dropdown — copy direct link or WebP variant URL instantly
• Public/private visibility — toggle asset access control per file
• View count tracking — atomic per-asset view counters stored in MongoDB
• SSO authentication via Authentik (OpenID Connect with PKCE) — no passwords, no user table
• CDN caching — immutable Cache-Control headers for public assets, no-store for private
• Smart Content-Disposition — inline display for images, video, audio, and PDFs; download for everything else
• SEO-optimized — Open Graph, Twitter Cards, JSON-LD structured data, dynamic sitemap, and robots.txt
• Accessibility-first — ARIA landmarks, skip-to-content navigation, focus-visible outlines, screen reader support
• PWA-ready — web manifest and SVG favicon for installable experience

The Dashboard

Once authenticated, users land on the main dashboard — a clean, minimal interface for uploading and managing assets. The upload zone supports drag-and-drop for multiple files at once, and the asset library below shows everything that's been uploaded with pagination controls.

Hovering over any asset card reveals its details at a glance: file name, size, visibility status, and view count. Public assets get a green badge; private ones stay locked behind authentication.

Need a web-optimized version? The copy dropdown lets you grab a direct link or a WebP variant URL — one click and it's on your clipboard, ready to embed anywhere.

Authentication with Authentik

Prismock doesn't manage its own user accounts or passwords. Instead, it delegates authentication entirely to Authentik — a self-hosted open-source identity provider. Users sign in through Authentik's OpenID Connect (OIDC) flow with PKCE, which means Prismock never sees or stores credentials. The backend validates JWTs against Authentik's JWKS endpoint, and the frontend uses Auth.js (next-auth v5) to handle the authorization code flow. This gives you centralized user management, MFA support, and audit logging — all without writing a single line of auth code in the application itself. If you already run Authentik for your infrastructure, Prismock plugs right in.

In Production

I run Prismock on my own infrastructure to serve assets across my personal projects and websites. The backend sits on a self-hosted server behind Cloudflare Tunnels, and the frontend is deployed on Vercel. It handles all the images, documents, and media files I need — including the screenshots on this very page. It's not a demo; it's the real thing, running in production every day.

Architecture

Browser → Next.js (Vercel) → FastAPI (self-hosted) → Cloudflare R2 + MongoDB Atlas

The frontend is a server-side rendered Next.js application deployed on Vercel. It handles the dashboard UI, authentication flows via Auth.js, and communicates with the backend over a REST API.

The backend is a Python FastAPI service running on a self-hosted server, exposed via Cloudflare Tunnels. It manages file uploads to Cloudflare R2, stores metadata in MongoDB Atlas, validates JWTs from the OIDC provider, and handles on-the-fly image transformation.

Upload Flow

1. User drags files onto the upload zone
2. Frontend sends POST /api/v1/assets/upload with multipart form data and a Bearer token
3. FastAPI validates the JWT, uploads the raw file to R2, and stores metadata in MongoDB
4. Response returns the asset record with a shareable delivery URL

Delivery Flow

1. Client requests GET /api/v1/assets/{id} with optional ?fmt=webp
2. For WebP requests: checks R2 for a cached derivative → cache miss triggers Pillow conversion → derivative is stored back in R2 for future hits
3. Response streams the file with appropriate Cache-Control and Content-Disposition headers