327 Photo Dump

Live: https://327photodump.vercel.app/

A mobile-first disposable camera app for weddings. Guests scan a QR code, type their name, and get 30 shots — photos or short videos — that upload straight from their phone to a shared Google Drive folder. No accounts, no app install, no friction.

Each guest gets their own subfolder. The couple gets everything in one place.

---

How it works

1. Guest scans the QR code at the venue (the link carries the guest access code)
2. Types their name or nickname
3. Taps Take Photo or Record Video — the phone's native camera opens
4. Previews the shot, taps Upload (with a progress bar)
5. Repeats up to 30 times — or taps "I'm done — end film early"
6. The app shows "You're out of film!" — just like a disposable camera

When the film is finished, the guest gets a gallery:

• My Shots — a grid of everything they uploaded
• Feed — swipe through other guests' shots, one guest at a time, most recently active first
• Lightbox — full-screen viewer with swipe, arrow keys and Escape; videos play natively, streamed straight from Google Drive (Drive's player as a fallback; see iOS quirks)

Shot count is tracked in localStorage so it survives page refreshes. No accounts and no server-side session.

Names, sharing and limits

• A name is the guest's identity. Guests who type the same name share one Drive folder and one "My Shots" gallery. If two phones create the same name at the exact same moment and Drive ends up with two same-name folders, the app treats them as one: new uploads always go to the oldest folder, "My Shots" lists files from all of them, and the feed shows the name once.
• The feed hides guests whose name matches your own (your shots are under "My Shots").
• Names are trimmed and limited to 50 characters. Photos are limited to 50 MB and videos to 100 MB. The app checks before uploading and the server enforces the same limits — both read src/lib/upload-limits.ts.
• The 30-shot limit is enforced on the phone only (in localStorage), not on the server.

---

Tech

• Next.js 16 (App Router) + TypeScript + React 19
• shadcn/ui + Tailwind CSS v4
• Google Drive API v3 — resumable uploads, OAuth2 refresh token
• Jest + React Testing Library, ESLint (eslint-config-next)
• GitHub Actions CI, Vercel hosting

Project structure

src/
  app/
    page.tsx                  # NameEntry → CameraCapture → Gallery
    locked/page.tsx           # "scan the QR code" screen (proxy rewrite target)
    api/
      upload-session/         # POST: create a resumable Drive upload session
      gallery/guest/          # GET: one guest's files (all same-name folders)
      gallery/feed/           # GET: guests ordered by most recent shot
      debug/                  # GET: auth-chain diagnostics (locked in production)
      _lib/validation.ts      # request validation (private folder, not a route)
  components/                 # NameEntry, CameraCapture, Gallery, MyShotsGrid,
                              # FeedScreen, Lightbox, Thumbnail, ui/ (shadcn)
  lib/
    google-drive.ts           # server-only Drive access
    use-guest-session.ts      # name + shot count, localStorage with fallback
    upload-limits.ts          # limits shared by client and server
    access-code.ts            # guest access code + cookie checks
  proxy.ts                    # guest access gate for every page and API route
  types/index.ts              # API request/response shapes
  __tests__/                  # api/, components/, lib/, proxy.test.ts

API

Route	Method	Returns
/api/upload-session	POST { guestName, fileName, mimeType, fileSize }	{ uploadUrl, folderId } · 400 on invalid input · 500 on Drive failure
/api/gallery/guest?guestName=	GET	{ files } newest first, [] for an unknown guest (never creates a folder)
/api/gallery/feed	GET	{ guests } one entry per name, most recent first
/api/debug	GET	Auth-chain checks; 404 in production unless ?token= matches DEBUG_TOKEN

Without a guest access cookie, API routes (except /api/debug) return 401 and pages show the locked screen (see Guest access code). If the app gets a 401 mid-session (cookie cleared or expired), My Shots and the Feed show "Your access expired — scan the QR code at the venue again". The camera keeps the unsent shot and adds ", then tap Upload to retry", so no shot is used up.

Error responses carry a generic error message only — raw Drive errors are logged server-side, never returned.

The upload flow

Files never pass through the server. Vercel serverless functions have a ~4.5 MB body limit and phone photos easily exceed that. Instead:

1. Client asks the server to create a resumable upload session (POST /api/upload-session)
2. Server validates the request, finds or creates the guest's folder, authenticates with Google Drive using an OAuth2 refresh token, and returns a session URL
3. Client uploads the file directly to Google Drive via XHR PUT to that URL — no Vercel in the middle
4. Only a successful upload uses up a shot. Network failures can be retried; files the server rejects (too large, wrong type) prompt a retake.

The server forwards the client's Origin header when creating the session. Without it, Google doesn't enable CORS on the session URL and the browser upload fails silently.

Why OAuth2, not a service account

Service accounts have no Google Drive storage quota. Files they create fail with:

403: Service Accounts do not have storage quota.

This is the beginning of the README. Read the rest at the original. Read the full README ↗