DEV Community: skyler

How I Built an AI Photo Restoration App with Next.js, Supabase, and Replicate

skyler — Thu, 03 Sep 2026 04:36:10 +0000

A few months ago I dug out a box of family photos from the 80s. Most were faded,
scratched, or had those crease marks where they'd been folded for decades. I tried
fixing them in Photoshop, but I had dozens of them and gave up after the second one.

So I did what any developer would do: I built a tool for it.

This post is a technical walkthrough of what I learned building PixRestorer —
an AI photo restoration web app that repairs damaged, blurry, and black-and-white
photos in under 30 seconds. Hopefully the architecture decisions, the edge cases,
and the failure-handling patterns are useful if you're building something similar.

The stack

Next.js 16 (App Router, TypeScript)
Supabase — Postgres + Auth
Cloudflare R2 — image storage
Replicate — the AI models
Cloudflare Workers — deployment via @opennextjs/cloudflare
Waffo / Creem — payments

The app itself is completely stateless: every dependency (database, auth, AI,
storage, payments) lives outside the app. That's the single most important
architecture decision, and it made deployment trivial.

Why serverless, and what it cost me

Initially the app ran on a VPS with PM2. Moving to Cloudflare Workers with OpenNext
removed the server entirely — there is no Node runtime to manage, no sharp image
processing on the origin (Cloudflare Image Resizing handles it), and rollbacks are
just a DNS change.

It wasn't free, though. Three things bit me:

Middleware naming. In Next 16, proxy.ts only runs on the Node runtime, but Workers only support Edge middleware. I had to keep the old middleware.ts filename for the Supabase session-refresh logic to work on Workers.
Request body limits. A 12MB image upload has to make it through the middleware untouched — worth testing early.
Rate limiting. In-memory rate limiting is unreliable on Workers. I dropped it entirely: every image already costs credits via an atomic Postgres RPC, so the credit balance is the rate limit.

The restore pipeline

Here's what happens when a user uploads a photo. It looks simple, but each step
exists to solve a real problem I hit along the way:

1. Input validation, including SSRF protection

The API accepts either a data URL (base64 from the browser) or an HTTPS URL. The
URL case was the sneaky one: accepting arbitrary URLs from users is an SSRF hole.
The rule I enforce is that any URL must come from our own R2 bucket — a pre-
signed upload URL the client got from us moments earlier. Anything else is
rejected outright:

if (isHttpUrl) {
  if (!hasConfiguredR2PublicUrl()) {
    return NextResponse.json({ error: "R2 public URL is not configured." }, { status: 500 });
  }
  uploadedFileKey = extractKeyFromUrl(image);
  if (!uploadedFileKey) {
    return NextResponse.json({ error: "Invalid image source." }, { status: 400 });
  }
}

2. Credits: the atomic deduction
Each user has a credit balance. Before running a model, the app deducts the cost atomically in the database — this is the part I'm most proud of. Instead of read-check-then-write (which races under concurrency), the deduction is a single SQL update that only succeeds if the balance is sufficient:


sql
UPDATE public.users
SET credits = credits - p_amount, updated_at = NOW()
WHERE id = p_user_id AND credits >= p_amount
RETURNING credits INTO v_remaining;

IF v_remaining IS NULL THEN
  RETURN NULL;  -- insufficient credits
END IF;
Retrying the RPC on transient errors (max 3 attempts, 100ms backoff) made the system resilient against flaky network calls, and NULL cleanly signals "insufficient credits" to the API.

3. Never charge for a failure
The model call happens after deduction. If the model errors, the app refunds the credit immediately — because the user paid for a restored image, not for an error message:


ts
} catch (modelError) {
  await supabase.rpc("refund_credits", { p_user_id: user.id, p_amount: RESTORE_CREDIT_COST });
  throw modelError;
}

Clean up after yourself Uploaded originals are kept temporarily in R2, and the finally block deletes them regardless of what happened. Temp files that pile up are a slow, invisible cost leak.

Moderation before the model
AI image APIs will happily spend your money on anything. I put a moderation gate in front of the restore calls — the prompt and filename are checked before the model runs, so policy violations return a clean 4xx instead of a bill.

What this costs to run
The restore model runs on Replicate, and costs are per-call. The credit-pricing model (prepaid credits, deducted atomically, refunded on failure) keeps the economics honest: users never pay for a failed request, and I never eat the cost of a successful one.

Wrapping up
The interesting part of this project wasn't the AI — it was all the boring engineering around it: stateless serverless deployment, atomic money-like arithmetic, SSRF defense, and making sure failures never cost the user anything.

If you're curious, PixRestorer is live at pixrestorer.com .

You can upload one of your own faded photos and see the whole thing end-to-end. I'd love to hear what you think — and if you're building something similar, I'm happy to answer questions about the details I didn't cover here.

Meccha Chameleon Online — A Camouflage Hide-and-Seek Game for Devs' Coffee Breaks

skyler — Tue, 28 Jul 2026 06:20:09 +0000

Every developer knows the feeling: you've been staring at a bug for 45 minutes, your brain is fried, and you need a complete context switch to reset. Not doom-scrolling Twitter, not another cup of coffee — something that actually engages a different part of your brain for 90 seconds, then lets you get back to work.

I recently stumbled onto a game that fills this niche perfectly: Meccha Chameleon Online.

It's a free, browser-based hide-and-seek game where you play as a chameleon that can shift its color to blend into props. An AI hunter patrols the room. You have 90 seconds to survive.

No download. No account. No Steam client. Open the site, hit play, and you're in.

The Core Loop (90 Seconds of Pure Focus)

The game follows a tight two-phase structure:

Prepare Phase (18 seconds)

The hunter patrols passively. You explore the room, find a colored prop (sofa, plant, bookshelf, wall), and sample its color by pressing [E] on desktop or tapping the sample button on mobile. Your chameleon gradually shifts to match the prop, and a camouflage percentage bar fills up in the HUD.

Hunt Phase (90 seconds)

The AI hunter starts actively chasing you. Your camouflage is your only defense:

≥ 50% camouflage + standing still → The hunter's vision is completely blocked. It can walk right past you and not see you.
Moving caps your camouflage at 25%, making you visible.
Below 50% while in the hunter's cone of vision → ⚠ SPOTTED alert flashes red. Run or freeze.

The round ends when either you survive the timer (win) or the hunter touches you (loss).

Why This Works for Developers

I've been playing this between coding sessions for a week, and here's what makes it click for me:

1. Zero Friction Entry

There's no "let me install this 20GB game real quick." The site loads in under 2 seconds. I can play one round in 90 seconds and close the tab. It's the same mental model as opening a terminal — fast, focused, disposable.

2. The Camouflage Mechanic is Surprisingly Strategic

At first glance it looks like a simple hide-and-seek. But the camouflage system adds real depth:

You need to read the room during the prepare phase and identify props that offer good cover.
Color matching matters. Sampling a bright red sofa when the room is mostly blue means you'll stand out.
Movement vs. stillness is a real trade-off. Run to reposition and you lose camouflage; stay still and the hunter might walk right past you.

This is the kind of lightweight systems-thinking that engages the same part of my brain that enjoys architecture decisions — but without the stakes.

3. The AI Hunter Has Clever Design

The hunter isn't just a random walker. It patrols waypoints, switches to chase mode when it spots you, and has a stuck detection system that prevents you from cheesing it by hiding behind obstacles. It also has a "lost target" mechanic — if it doesn't see you for a few seconds, it returns to patrol and you get a green ✓ SAFE indicator.

From a game development perspective, the hunter AI is a neat example of a finite state machine with smooth transitions:

Patrol → Chase (triggered by line-of-sight + low camouflage)
Chase → Patrol (triggered by distance or time since last sighting)
Stuck state → Sidestep and retry (prevents wall-hugging exploits)

Controls That Feel Natural

On desktop, the controls are what you'd expect from a browser 3D game:

Key	Action
`W A S D`	Move
Mouse (click to lock)	Look / aim
`A` / `D`	Turn (without mouse)
`E`	Sample prop color
`Ctrl`	Crouch

On mobile, there's a left joystick for movement and a sample button. The game works surprisingly well on a phone — the rounds are short enough that touch controls don't get fatiguing.

The Tech Behind the Fan Site

The game itself is the official browser build embedded via iframe. The fan site at mecchachameleonplay.com is built with:

React Router 8 (with SSR for fast initial loads)
React 19 + TypeScript
TailwindCSS v4 for styling
Vite 8 as the build tool
Deployed on Cloudflare Pages

The site serves as a landing page with gameplay instructions, FAQs, SEO metadata, and a mobile-optimized entry point. The game iframe handles the actual rendering, physics, AI, and audio.

If you're curious about how the route config and SEO setup work for a single-page game hub, the project structure is refreshingly minimal — no massive monorepo, no complex state management. Just routes, copy content, and a few components.

Tips for New Players

After a week of playing, here's what I've learned:

Use the prepare phase actively. Run around and sample 2–3 different props. Find the one that blends best with the room's dominant color scheme.
Full camouflage + stillness = invisibility. Once you hit 50%+ camouflage, stop moving. The hunter can walk right past you.
If spotted, don't panic-run. Sprinting away caps your camouflage at 25%, so the hunter can still see you at close range. Instead, sprint to break line-of-sight, then find a new prop and re-sample.
Crouch is useful. It lowers the camera slightly, helping you hide behind low obstacles like desks or small walls.
Read the HUD carefully. The ⚠ SPOTTED and ✓ SAFE indicators give you real-time feedback on whether the hunter is onto you.

Summary

Meccha Chameleon Online is exactly what I want from a coffee-break game: round times measured in seconds, a mechanic that rewards thinking over grinding, and zero commitment.

If you're a developer looking for a quick mental reset between debugging sessions, or just curious about how a camouflage hide-and-seek mechanic works in a browser game, give it a shot. One round takes 90 seconds — which is about how long your next npm install will take anyway.

This is an unofficial fan page for the MECCHA CHAMELEON game. For the full paid PC version on Steam, visit the official Steam page.

frontend devs

skyler — Mon, 13 Jan 2025 06:15:48 +0000