Build a photo wall

The photo wall is built and live at /photos. Visitors can pin a photo with a caption, everyone sees the newest ones first, and three reports from different visitors take a photo down. npm run check, npm test (65 tests, all passing) and npm run build all pass. I also ran the built server locally: / and /photos load, upload and report requests with bad input are refused with the right errors, and bad photo ids get a 404. It hasn't run against a real database; nothing here has one.

What visitors get

• /photos: an upload form, then a grid of photos styled like Polaroids taped to a board, each slightly and consistently tilted. Each card shows the caption, the date and a Report button. Older photos are paged 36 at a time.
• /photos/:id: one photo shown whole (the wall crops to squares), with its caption and a Report button. If a photo is taken down while someone is viewing it, they're sent back to the wall.
• Home page: a new "Explore" section above the changelog links to the wall. The changelog is unchanged.

How uploads work

• In the browser: with JavaScript on, the chosen photo is shrunk and re-saved as a JPEG of 800 KB or less, and a preview appears. So PNG, WebP and big phone photos all work. Without JavaScript the form still submits, but only JPEGs under 1 MB are accepted.
• On the server: a small JPEG checker I wrote (app/lib/jpeg.ts, no new dependencies) checks every upload and rebuilds it without location data, camera details, comments or anything hidden after the image. Only the rotation setting is kept, so sideways phone photos still show upright.
• Visitor-content rules: captions are required (1–140 characters), cleaned with cleanText, and used as the image's alt text. Uploads are limited per IP (4 at once, then 1 every 5 minutes) and there's a site-wide cap of 60 photos an hour. Reports follow the standard report-to-hide pattern using reporterKey. Hidden photos are kept in the database, just no longer shown.
• Serving images: /photos/:id/image.jpg sends the bytes with strict security headers and a 5-minute cache, so a taken-down photo can still show for up to 5 minutes where it was already loaded.

Files

• Routes: app/routes/photos.tsx, app/routes/photo.tsx, app/routes/photo-image.ts, registered in app/routes.ts.
• Logic: app/lib/jpeg.ts, app/lib/photo-wall.ts, app/lib/photo-wall.server.ts, app/lib/shrink-photo.ts.
• Components: app/components/photo-upload-form.tsx, app/components/photo-report-button.tsx.
• Tests: jpeg.test.ts, photo-wall.test.ts, photo-wall.server.test.ts.
• Edited: app/db/schema.ts, app/routes/home.tsx.

Migration: drizzle/0001_photo_wall.sql adds only two tables (photo_wall_photos, which stores the image bytes, and photo_wall_reports), a foreign key and an index on upload time.

Worth knowing

• The JPEG checker was only tested against JPEGs I built by hand for the tests; there were no real photo files available here.
• Uploads over 1 MB without JavaScript are refused before the body is read. Some browsers may then show a connection error instead of the "too big" message.