Client photo proofing galleries, built by Claude Code on Elements

Client photo proofing galleries, built by Claude Code on Elements

Private photo galleries where clients heart favorites and comment live, and the photographer downloads the chosen file names.

How it's built

Proofloft needed private galleries a client opens from a link, photo uploads, hearts and comments that both sides see as they happen, emails at each handoff and a file of the chosen names for the photographer. Each of those is a part of Elements, so the agent spent its 26 minutes on the galleries themselves.

  • Live hearts and comments. Favorites and comments are LiveTables. A client hearts a photo and the photographer's open gallery shows it at once, and a reply lands under the client's comment the same way. Once a gallery is final, the client's picks are locked in. A channel tells the photographer the moment a client submits.
  • Client access from a link. A client opens their gallery from the private link in their email and enters its password once; a cookie for that gallery keeps them in.
  • Uploads into the database. The photographer uploads photos straight from a form, the bytes are stored in the database, and each photo is served at a url made from its id and a hash of its bytes.
  • Emails at each handoff. Sharing a gallery emails the client the link, and submitting selections emails the photographer the picks.
  • Server calls as function calls. Creating a gallery, uploading, inviting the client and marking selections final call server functions straight from the page with @rpc, and the photographer downloads the chosen file names as a text file.
  • Data from SQL files. Migrations define the studio and seed one photographer, three galleries with 82 photos, and one client's hearts and comments.

Why Elements

Elements is an integrated full-stack app framework and a project server. The project server checks the agent's work as it builds: it type-checks the server and browser code, analyzes the program, applies migrations and runs the tests, then reports the results to the agent. A security mistake, such as calling a server-only function from the browser, is a compile error. The agent reads the report and fixes its own mistakes before it tells you a feature is done. The same checks run on every feature you ask for next.

Run it yourself

  1. 1 Sign up

    Already have an account? Sign in

  2. 2 Install and run the demo One prompt to paste into your agent.

View the code on GitHub →

The prompt

What Claude was given to build this app.

Agent Prompt
Build a client proofing app named proofloft for a wedding and portrait
photographer.

PHOTOGRAPHER (admin account)
- Create a gallery for a client: name, date, upload photos in bulk.
- Share it with a private link and optional password, emailed to the client.
- See which photos the client favorited, and their comments.
- Mark a gallery's selections final and download the list of chosen file
  names.

CLIENT (no account, from the link)
- A full-screen gallery grid with a lightbox.
- Heart favorites, leave a comment on a photo, and submit selections when
  done. The photographer gets an email.

Seed the photographer and three galleries of 20 to 30 photos each, one with
favorites and comments. Show the admin login on the sign-in page.

Favorites and comments appear to the photographer in real time.