# Showcase: kickoff prompt (Beat 3 / Part B group build) Paste this into Claude Code in a fresh, empty folder to start the group build. It is written data-shape-first and plan-first on purpose, so Claude designs the right architecture before writing a line. Backend is Convex, chosen so nobody has to hunt for keys in a dashboard. Working product name is "Showcase" (rename freely). --- I want to build a web app called Showcase: a premium way for a creative strategist or agency to present ad creative and brand ideas to a client. The core job: I (the creator) log in, create a branded board for a specific client, upload or link the creative (images and video), organize it, and send the client ONE public link. The client opens it on any device, sees a beautiful branded gallery, and can favorite, comment, and approve individual pieces. I see their feedback. The client never logs in. Before you write any code: ask me anything you need, then show me (1) the plan, (2) the exact data model (the Convex schema, tables and fields), and (3) the stack. Do not start building until I approve the plan. Stack (use this unless you have a strong, stated reason not to): - Next.js (App Router) + TypeScript + Tailwind - Convex for the database, file storage, and real-time updates - Convex Auth for the creator login (the client never logs in) - Deploy the frontend to Vercel; the Convex backend deploys with its own CLI Setup, the easy part (do this first so I never hunt for keys): - Run `npx convex dev`. It creates the backend project for me and writes the deployment URL into .env.local automatically. No dashboard, no copying keys out of a settings page, no secrets pasted into this chat. Walk me through this one command when we start. Data shape (define this as the Convex schema first, this is the foundation): - profile: the creator, from Convex Auth - board: one client showcase. Fields: ownerId, clientName, slug (random unguessable share token), logoStorageId, primaryColor, accentColor, headline, introMessage, createdAt - section: a group inside a board, for example "Concept A", "Static ads", "Video". Fields: boardId, title, position - item: one piece of creative. Fields: boardId, sectionId, type ("image", "video", or "embed"), storageId (for an uploaded file) or sourceUrl (for a pasted link), title, caption, position - feedback: a client reaction to an item. Fields: itemId, boardId, kind ("favorite", "comment", "approve", or "request_changes"), commentText, clientLabel, createdAt - brandKit: a saved client brand the creator can reuse. Fields: ownerId, clientName, logoStorageId, primaryColor, accentColor. Applying a brand kit to a new board auto-fills its branding. Access model (in Convex this is the functions, not row policies, which keeps it simpler): - Creator actions (create, edit, delete boards, sections, items, brand kits) are mutations that require an authenticated user and check ownerId. - A PUBLIC query getBoardBySlug returns a board with its sections and items for the client view. No auth. Knowing the slug is the access. - A PUBLIC mutation addFeedback lets anyone with the slug favorite, comment, or approve by passing just a name (clientLabel). No login. Only the creator can read all the feedback for their own boards. - Files live in Convex file storage. The creator uploads through a generated upload URL and the item stores the returned storageId; the gallery serves the file URL. v1 features (build these, MVP first, get the core flow clickable end to end before any polish): 1. Creator auth by email (Convex Auth). 2. Create a board, set the client name and brand: logo upload plus two colors. The whole board re-themes to those colors. This moment should feel like magic. Let me SAVE that brand as a reusable brand kit, so the next board for this client themes in one click. 3. Add items: image upload, video upload, or paste a hosted video URL (YouTube, Vimeo, or a CDN link). Group items into sections and reorder them. 4. The client view at /b/[slug]: ONE shareable link. The client enters just their name (no login) to leave feedback, or you flip the board's "allow feedback" toggle off for a view-only share. The view is a clean, responsive masonry gallery, lightbox on click, lazy loaded, wearing the client's branding, with a header (logo, headline, intro message). 5. Per-item client feedback with no account: favorite, comment, and a clear Approve or Request changes. Because Convex is real-time, these show up on my dashboard live. They roll up into a board status the creator sees at a glance (for example, 6 of 8 approved). 6. A creator dashboard that lists my boards with a copy-share-link button, each board's current approval status, and a feedback view showing every client reaction. The three upgrades in features 2, 4, and 5 (the reusable brand kit, the name-gated feedback on a single share link, and Approve / Request changes with a board rollup) are what separate a real client tool from a plain gallery, so treat them as core, not nice-to-have. v2 (do NOT build now, just leave room in the schema): password gate, downloads, QR code, view analytics, custom domain, drag-and-drop reorder polish. Technical guardrails: - Images: use next/image with lazy loading, the sizes attribute, and a blur placeholder. Do not load full resolution for thumbnails. - Video: serve uploaded files with a native video tag, or embed pasted URLs. Do NOT process, transcode, or send video through an AI model. Note that Convex HTTP actions cap around 20MB, so for large videos prefer the paste-a-URL path. - Keep all access in Convex functions: public read by slug, public feedback insert, everything else checked against the authenticated ownerId. - The Convex CLI writes the deployment URL to .env.local for me. Do not put any secret in this chat. Any other key goes in .env.local. - Keep it MVP. I would rather have the core flow working end to end than every feature half built. When the core flow works, prove it to me, do not just describe it: create a board, brand it, add one image and one video, open the share link in a private window while logged out, favorite an item and leave a comment as the client, then show me that feedback appear on my dashboard live. --- ## Notes for the instructor (not part of the paste) - Why Convex and not Supabase: `npx convex dev` provisions the backend and writes the deployment URL into .env.local automatically, so nobody hunts for a Project URL and anon key in a dashboard (that was the Supabase pain). The schema also lives in TypeScript, which Claude reads, so the AI build is cleaner. InstantDB is the runner-up if you ever want to swap. - This prompt is deliberately long. That length IS the lesson: the detailed, data-shape-first prompt is why the first build comes out usable instead of generic. Show everyone the prompt before you run it. - The branding re-theme (feature 2) is the magical moment from Beat 5. Land on it visibly. - Real-time is a free win: leave your dashboard open on screen and the client feedback pops in live during the tap-test. - The "prove it in a private window" close is the verify-in-the-real-surface move. Do it live, logged out, so the public-link architecture is felt. - If wifi makes a video upload crawl, switch to the paste-a-URL path and keep moving. - After the core build works, run the component add-in pass (see `component-addins.md`) to drop in the 21st.dev video upload card and flip-reveal gallery. That is the make-it-beautiful step, deliberately separate from make-it-work.