Topic Details
https://whop.com/blog/rss/
Last item retrieved
<item><title><![CDATA[How to build a Gumroad clone using Next.js and Whop]]></title><description><![CDATA[You can build a Gumroad clone using Next.js and Whop's infrastructure and it's easier than ever. In this tutorial, we'll walk you through building a marketplace with file uploads via UploadThing, payments via Whop Payments Network, user authentication with Whop OAuth, and more.]]></description><link>https://whop.com/blog/build-gumroad-clone/</link><guid isPermaLink="false">69d323ee5018870001858966</guid><category><![CDATA[Tutorials]]></category><category><![CDATA[Engineering]]></category><dc:creator><![CDATA[East]]></dc:creator><pubDate>Thu, 09 Apr 2026 14:18:32 GMT</pubDate><media:content url="https://whop.com/blog/content/images/2026/04/how-to-build-a-gumroad-clone.webp" medium="image"/><content:encoded><![CDATA[
<!--kg-card-begin: html-->
<div class="kg-card kg-cta-card kg-cta-minimal whop-key-takeaways" data-whop-key-takeaways="2026-04-09T17:00:48.405Z" data-layout="minimal">
<div class="kg-cta-content">
<div class="kg-cta-content-inner">
<div class="kg-cta-text">
<img src="https://whop.com/blog/content/images/2026/04/how-to-build-a-gumroad-clone.webp" alt="How to build a Gumroad clone using Next.js and Whop"><p><strong>Key takeaways</strong></p>
<ul><li>Next.js combined with Whop's payment network and OAuth enables building a full multi-seller digital marketplace.</li><li>Whop handles both seller onboarding with connected accounts and buyer payments with automatic platform fee splits.</li><li>A deploy-first approach with Vercel and Neon integration streamlines environment setup and database management.</li></ul>
</div>
</div>
</div>
</div>
<!--kg-card-end: html-->
<!--kg-card-begin: html-->
<div class="ai-prompt-widget">
<div class="ai-prompt-widget__header">
<span class="ai-prompt-widget__icon">✨</span>
<span class="ai-prompt-widget__title">Build this with AI</span>
</div>
<p class="ai-prompt-widget__description">Open the tutorial prompt in your favorite AI coding tool:</p>
<div class="ai-prompt-widget__buttons" id="ai-prompt-buttons"></div>
</div>
<!--kg-card-end: html-->
<p>Building a Gumroad clone where users can browse the marketplace and buy files and links from creators, or become a seller themselves and earn money, can be done by using Next.js and Whop infrastructure.</p><p>In this tutorial, we're going to build such clone (which we'll call Shelfie). A marketplace where users sign up, become sellers, upload digital products, set their own prices, and publish to the marketplace.</p><p>Buyers in the platform can browse, purchase, and download products they bought. Our platform is also going to take a 5% cut of every sale.</p><p>You can preview the <a href="https://shelfie-rust.vercel.app/" rel="noopener nofollow">demo of our project here</a>, and see the full <a href="https://github.com/whopio/whop-tutorials/tree/main/gumroad-clone">GitHub repository here</a>.</p><h2 id="project-overview">Project overview</h2><p>Before we dive deep into coding, let's take a general look at our project:</p><ul><li><strong>Multi-seller marketplace</strong> where any user can become a seller through Whop's connected account flow</li><li><strong>Product creation with file uploads</strong> where sellers upload files via UploadThing, add descriptions, set prices, and publish when ready</li><li><strong>Marketplace discovery</strong> with search, category filters, pagination, and trending products</li><li><strong>One-time purchases</strong> where sellers set a price and buyers pay through the <a href="https://whop.com/network/" rel="noopener nofollow">Whop Payments Network</a></li><li><strong>Access-gated downloads</strong> where buyers get instant access to files, text content, and external links after purchase</li><li><strong>Rating system</strong> where buyers rate products on a 1-5 cookie scale</li><li><strong>Seller and buyer dashboards</strong> with earnings, product management, bio editing, and purchase history</li></ul><div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
<div class="kg-toggle-heading">
<h4 class="kg-toggle-heading-text"><span style="white-space: pre-wrap;">Tech Stack</span></h4>
<button class="kg-toggle-card-icon" aria-label="Expand toggle to read content">
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
</svg>
</button>
</div>
<div class="kg-toggle-content"><ul><li value="1"><b><strong style="white-space: pre-wrap;">Next.js -</strong></b><span style="white-space: pre-wrap;"> Server Components, API routes, and Vercel deployment in one framework</span></li><li value="2"><b><strong style="white-space: pre-wrap;">React -</strong></b><span style="white-space: pre-wrap;"> Server Components for data fetching, Client Components for interactivity</span></li><li value="3"><b><strong style="white-space: pre-wrap;">Tailwind CSS -</strong></b><span style="white-space: pre-wrap;"> CSS-first configuration with </span><code spellcheck="false" style="white-space: pre-wrap;"><span>@theme</span></code><span style="white-space: pre-wrap;"> blocks, no config file</span></li><li value="4"><b><strong style="white-space: pre-wrap;">Whop OAuth -</strong></b><span style="white-space: pre-wrap;"> Sign-in and identity for both sellers and buyers</span></li><li value="5"><b><strong style="white-space: pre-wrap;">Whop Payments Network -</strong></b><span style="white-space: pre-wrap;"> Connected accounts for seller onboarding, direct charges with application fees for payment splits</span></li><li value="6"><b><strong style="white-space: pre-wrap;">Neon -</strong></b><span style="white-space: pre-wrap;"> Serverless Postgres via the Vercel integration. Auto-populated connection strings</span></li><li value="7"><b><strong style="white-space: pre-wrap;">Prisma -</strong></b><span style="white-space: pre-wrap;"> ESM-only ORM with </span><code spellcheck="false" style="white-space: pre-wrap;"><span>@prisma/adapter-pg</span></code><span style="white-space: pre-wrap;"> for Neon compatibility. Client generated into </span><code spellcheck="false" style="white-space: pre-wrap;"><span>src/generated/prisma</span></code></li><li value="8"><b><strong style="white-space: pre-wrap;">UploadThing -</strong></b><span style="white-space: pre-wrap;"> File uploads with typed routes, auth middleware, and CDN delivery</span></li><li value="9"><b><strong style="white-space: pre-wrap;">Zod -</strong></b><span style="white-space: pre-wrap;"> Runtime validation for env vars, API inputs, and form data</span></li><li value="10"><b><strong style="white-space: pre-wrap;">iron-session -</strong></b><span style="white-space: pre-wrap;"> Encrypted cookie sessions. No session store, no Redis</span></li><li value="11"><b><strong style="white-space: pre-wrap;">Vercel -</strong></b><span style="white-space: pre-wrap;"> Deployment with automatic builds from GitHub</span></li></ul></div>
</div><div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
<div class="kg-toggle-heading">
<h4 class="kg-toggle-heading-text"><span style="white-space: pre-wrap;">Pages</span></h4>
<button class="kg-toggle-card-icon" aria-label="Expand toggle to read content">
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
</svg>
</button>
</div>
<div class="kg-toggle-content"><ul><li value="1"><code spellcheck="false" style="white-space: pre-wrap;"><span>/</span></code><span style="white-space: pre-wrap;"> - Landing page (hero, search, trending products, categories, seller CTA)</span></li><li value="2"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sign-in</span></code><span style="white-space: pre-wrap;"> - Sign-in card with Whop button</span></li><li value="3"><code spellcheck="false" style="white-space: pre-wrap;"><span>/products</span></code><span style="white-space: pre-wrap;"> - Browse/search products with category filter, pagination</span></li><li value="4"><code spellcheck="false" style="white-space: pre-wrap;"><span>/products/[slug]</span></code><span style="white-space: pre-wrap;"> - Product detail: description, file list, seller info, purchase card, cookie ratings</span></li><li value="5"><code spellcheck="false" style="white-space: pre-wrap;"><span>/products/[slug]/download</span></code><span style="white-space: pre-wrap;"> - Post-purchase download page (access-gated)</span></li><li value="6"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sellers/[username]</span></code><span style="white-space: pre-wrap;"> — Seller profile: bio, stats, published products</span></li><li value="7"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sell</span></code><span style="white-space: pre-wrap;"> - Become a seller: pitch + connect Whop account</span></li><li value="8"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sell/kyc-return</span></code><span style="white-space: pre-wrap;"> - KYC completion handler (redirects to dashboard)</span></li><li value="9"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sell/dashboard</span></code><span style="white-space: pre-wrap;"> - Seller dashboard: products, earnings, bio editing, payout portal</span></li><li value="10"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sell/products/new</span></code><span style="white-space: pre-wrap;"> - Create new product form</span></li><li value="11"><code spellcheck="false" style="white-space: pre-wrap;"><span>/sell/products/[productId]/edit</span></code><span style="white-space: pre-wrap;"> - Edit product: info, files, thumbnail, publish/unpublish/delete</span></li><li value="12"><code spellcheck="false" style="white-space: pre-wrap;"><span>/dashboard</span></code><span style="white-space: pre-wrap;"> - Buyer dashboard: purchased products, download links</span></li></ul></div>
</div><div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
<div class="kg-toggle-heading">
<h4 class="kg-toggle-heading-text"><span style="white-space: pre-wrap;">API routes</span></h4>
<button class="kg-toggle-card-icon" aria-label="Expand toggle to read content">
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
</svg>
</button>
</div>
<div class="kg-toggle-content"><ul><li value="1"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/auth/login</span></code><span style="white-space: pre-wrap;"> - OAuth initiation (PKCE)</span></li><li value="2"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/auth/callback</span></code><span style="white-space: pre-wrap;"> - OAuth callback + user upsert</span></li><li value="3"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/auth/logout</span></code><span style="white-space: pre-wrap;"> - Session destroy</span></li><li value="4"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/onboard</span></code><span style="white-space: pre-wrap;"> - Create connected account Company + KYC (sandbox: auto-complete)</span></li><li value="5"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/complete-kyc</span></code><span style="white-space: pre-wrap;"> - Mark KYC as complete (called from kyc-return page)</span></li><li value="6"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/profile</span></code><span style="white-space: pre-wrap;"> - PATCH: update seller headline and bio</span></li><li value="7"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/products</span></code><span style="white-space: pre-wrap;"> - POST: create product</span></li><li value="8"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/products/[productId]</span></code><span style="white-space: pre-wrap;"> - PATCH: update (with file add/remove), DELETE: remove product</span></li><li value="9"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/products/[productId]/publish</span></code><span style="white-space: pre-wrap;"> - POST: publish product (create Whop checkout config)</span></li><li value="10"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/sell/products/[productId]/unpublish</span></code><span style="white-space: pre-wrap;"> - POST: revert to draft</span></li><li value="11"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/products/[productId]/purchase</span></code><span style="white-space: pre-wrap;"> - POST: free product purchase</span></li><li value="12"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/products/[productId]/like</span></code><span style="white-space: pre-wrap;"> - POST: toggle like</span></li><li value="13"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/products/[productId]/rate</span></code><span style="white-space: pre-wrap;"> - POST: cookie rating (0.5-5)</span></li><li value="14"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/uploadthing</span></code><span style="white-space: pre-wrap;"> - UploadThing file upload endpoint</span></li><li value="15"><code spellcheck="false" style="white-space: pre-wrap;"><span>/api/webhooks/whop</span></code><span style="white-space: pre-wrap;"> - POST: Whop payment webhooks</span></li></ul></div>
</div><div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
<div class="kg-toggle-heading">
<h4 class="kg-toggle-heading-text"><span style="white-space: pre-wrap;">Payment flow</span></h4>
<button class="kg-toggle-card-icon" aria-label="Expand toggle to read content">
<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"/>
</svg>
</button>
</div>
<div class="kg-toggle-content"><ol><li value="1"><span style="white-space: pre-wrap;">Seller clicks "Get Started" and creates a connected account through Whop's hosted KYC flow</span></li><li value="2"><span style="white-space: pre-wrap;">Seller publishes a product. The app creates a Whop product and checkout configuration with a 5% application fee</span></li><li value="3"><span style="white-space: pre-wrap;">Buyer clicks "Buy Now" and pays through Whop's hosted checkout</span></li><li value="4"><span style="white-space: pre-wrap;">Whop fires a </span><code spellcheck="false" style="white-space: pre-wrap;"><span>payment.succeeded</span></code><span style="white-space: pre-wrap;"> webhook. The app creates a Purchase record</span></li><li value="5"><span style="white-space: pre-wrap;">Seller manages payouts through Whop's dashboard</span></li></ol></div>
</div><h3 id="why-we-use-whop">Why we use Whop</h3><p>While building this project, we're going to face two important problems to solve: the payments system and the user authentication - Whop is going to help us solve them easily:</p><ul><li>For the <strong>payments</strong>, we're going to use the <strong>Whop Payments Network</strong> for the out-of-the-box solution for marketplace payments.</li><li>For <strong>user authentication</strong>, we're going to use <strong>Whop OAuth</strong> to integrate a user authentication system for both sellers and buyers, allowing us to focus on building instead of authentication security and credential storage.</li></ul><h3 id="what-you-need-to-start">What you need to start</h3><p>Before starting this project, you need:</p><ul><li>A Whop sandbox account (create at sandbox.whop.com)</li><li>A Vercel account</li><li>Working familiarity with Next.js and React</li><li>An UploadThing account</li></ul><h2 id="part-1-scaffold-deploy-and-authenticate">Part 1: Scaffold, deploy, and authenticate</h2><p>In this project, we're going to take a deploy-first approach. This means we get a real production URL, which we'll use later. First, let's scaffold a new Next.js project.</p><h3 id="scaffold-a-nextjs-project">Scaffold a Next.js project</h3><p>Go to the directory you want to build your project in and run the command below:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">npx create-next-app@latest shelfie --ts --tailwind --eslint --app --src-dir --turbopack --import-alias "@/*"</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Then, install all dependencies we'll use in the project:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">npm install @whop/sdk @prisma/client @prisma/adapter-pg pg iron-session zod lucide-react next-themes clsx tailwind-merge dotenv uploadthing @uploadthing/react
npm install -D prisma @types/pg@8.11.11</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="deploy-to-vercel">Deploy to Vercel</h3><p>Now, let's deploy everything to GitHub and connect to Vercel:</p><ol><li>Use the command <code>git init && git add . && git commit -m "scaffold"</code> (you can make a private repo if you want) and push to a new GitHub repository</li><li>Import the repo at vercel.com/new and take note of your production URL</li><li>Set <code>NEXT_PUBLIC_APP_URL</code> to your Vercel URL (e.g. <code>https://shelfie-xyz.vercel.app</code>)</li></ol><p>The first deploy will succeed with the default Next.js starter. You'll add the real environment variables and redeploy as you go.</p><h3 id="add-the-neon-database">Add the Neon database</h3><p>We're going to use the Neon integration on Vercel so that we don't have to locally set up Postgres,  connection strings auto-populate in every Vercel environment (dev, preview, production), and preview deployments get their own database branches.</p><p>Add the Neon integration from Vercel's marketplace (Settings > Integrations > Browse Marketplace > Neon). It auto-populates <code>DATABASE_URL</code> and <code>DATABASE_URL_UNPOOLED</code> across all environments.</p><p>Once the Neon setup is done, use the commands below to pull the environment variables locally:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">vercel link
vercel env pull .env.local</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="setting-up-a-whop-app">Setting up a Whop app</h3><p>We're going to use Whop Sandbox (at sandbox.whop.com) for the development phase of this project.</p><p>It's a separate environment that allows us to simulate money movements without touching the live version of the site or real money. To create a Whop app, follow the steps below:</p><ol><li>Go to sandbox.whop.com and create a whop</li><li>Go to the Developer page of your whop and click the <strong>Create app</strong> button under the Apps section</li><li>In the App details tab, copy the Client ID and Client Secret keys. We'll use them later</li><li>Go to the OAuth tab and add the redirect URIs:<ol><li><code>http://localhost:3000/api/auth/callback</code></li><li><code>https://your-vercel-url.vercel.app/api/auth/callback</code></li></ol></li></ol><p>For now, we only need the OAuth client ID and client secret. We'll grab the company API key and company ID later when we build seller onboarding.</p><h3 id="environment-variables">Environment variables</h3><p>Here's every variable you need for this section and where to get it:</p>
<!--kg-card-begin: html-->
<table>
<tbody><tr><th>Variable</th><th>Where to get it</th></tr>
<tr><td><code>DATABASE_URL</code></td><td>Auto-populated by the Neon integration</td></tr>
<tr><td><code>DATABASE_URL_UNPOOLED</code></td><td>Auto-populated by the Neon integration</td></tr>
<tr><td><code>WHOP_CLIENT_ID</code></td><td>Whop app > OAuth tab > Client ID</td></tr>
<tr><td><code>WHOP_CLIENT_SECRET</code></td><td>Whop app > OAuth tab > Client Secret</td></tr>
<tr><td><code>SESSION_SECRET</code></td><td>Generate with <code>openssl rand -base64 32</code></td></tr>
<tr><td><code>NEXT_PUBLIC_APP_URL</code></td><td>Your Vercel URL (e.g. <code>https://shelfie-xyz.vercel.app</code>)</td></tr>
</tbody></table>
<!--kg-card-end: html-->
<p>Add <code>WHOP_CLIENT_ID</code>, <code>WHOP_CLIENT_SECRET</code>, <code>SESSION_SECRET</code>, and <code>NEXT_PUBLIC_APP_URL</code> to Vercel (the Neon variables are already there from the integration). Then pull everything locally:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">vercel env pull .env.local</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Then add these two to your <code>.env.local</code> only (not on Vercel - they're for local development):</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">.env.local</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">WHOP_SANDBOX=true
NEXT_PUBLIC_APP_URL=http://localhost:3000</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>The local <code>NEXT_PUBLIC_APP_URL</code> override points to <code>localhost:3000</code> so OAuth redirects work during development. On Vercel, it stays as your production URL.</p><h3 id="global-css">Global CSS</h3><p>We're going to set up a dark crimson color scheme in this project. You can customize the look by changing the color values and other adjustments like border radiuses.</p><p>Go to <code>src/app</code> and create a file called <code>globals.css</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">globals.css</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-css">@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-background: #1A0A10;
--color-surface: #221218;
--color-surface-elevated: #2D1A22;
--color-border: #3D2830;
--color-text-primary: #F5F0E1;
--color-text-secondary: #A89890;
--color-accent: #B8293D;
--color-accent-hover: #D4324A;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-error: #F87171;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
--radius-xs: 0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-2xl: 0px;
--radius-3xl: 0px;
}
.dark {
--color-background: #1A0A10;
--color-surface: #221218;
--color-surface-elevated: #2D1A22;
--color-border: #3D2830;
--color-text-primary: #F5F0E1;
--color-text-secondary: #A89890;
--color-accent: #B8293D;
--color-accent-hover: #D4324A;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-error: #F87171;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="root-layout">Root layout</h3><p>Now, we'll build the root layout that sets up theming, navigation, and a skip-to-content link for accessibility. Go to <code>src/app</code> and create a file called <code>layout.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">layout.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import type { Metadata } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import { ThemeProvider } from "next-themes";
import { Navbar } from "@/components/navbar";
import "./globals.css";
const inter = Inter({
variable: "--font-sans",
subsets: ["latin"],
});
const jetbrainsMono = JetBrains_Mono({
variable: "--font-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Shelfie - Sell What You Create",
description:
"The marketplace for digital products - templates, ebooks, design assets, and more.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-background text-text-primary`}
>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem>
<a
href="#main-content"
className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-accent focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-white"
>
Skip to main content
</a>
<Navbar />
<main id="main-content" className="min-h-[calc(100vh-4rem)]">{children}</main>
</ThemeProvider>
</body>
</html>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="environment-validation">Environment validation</h3><p>When an environment variable is missing or formatted wrong, the error can be buried deep down and cause problems. To fix this, we're going to use Zod to validate them. Go to <code>src/lib</code> and create a file called <code>env.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">env.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { z } from "zod";
const envSchema = z.object({
DATABASE_URL: z.string().min(1),
DATABASE_URL_UNPOOLED: z.string().min(1),
WHOP_CLIENT_ID: z.string().min(1),
WHOP_CLIENT_SECRET: z.string().min(1),
WHOP_API_KEY: z.string().min(1),
WHOP_COMPANY_API_KEY: z.string().min(1),
WHOP_COMPANY_ID: z.string().min(1),
WHOP_WEBHOOK_SECRET: z.string().min(1),
UPLOADTHING_TOKEN: z.string().min(1),
SESSION_SECRET: z.string().min(32),
NEXT_PUBLIC_APP_URL: z.string().url(),
PLATFORM_FEE_PERCENT: z.coerce.number().min(0).max(100).default(5),
WHOP_SANDBOX: z.string().optional(),
});
type Env = z.infer<typeof envSchema>;
export const env = new Proxy({} as Env, {
get(_, key: string) {
const value = process.env[key];
const field = envSchema.shape[key as keyof typeof envSchema.shape];
if (field) return field.parse(value);
return value;
},
});</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="utility-helpers">Utility helpers</h3><p>We're going to need some functions that helps us with class merging, price formatting, slug generation (for URLs), and username generation. To build it, go to <code>src/lib</code> and create a file called <code>utils.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">utils.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function formatPrice(cents: number): string {
if (cents === 0) return "Free";
return `$${(cents / 100).toFixed(2)}`;
}
export function generateSlug(title: string): string {
const base = title
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-|-$/g, "");
const suffix = Math.random().toString(36).substring(2, 8);
return `${base}-${suffix}`;
}
export function formatFileSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
export function generateUsername(name: string | null | undefined): string {
const base = (name || "seller")
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-|-$/g, "");
const suffix = Math.random().toString(36).substring(2, 6);
return `${base}-${suffix}`;
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="prisma-setup">Prisma setup</h3><p>We need two files for Prisma: a config file and a client singleton that our app uses at runtime. In the project root, create a file called <code>prisma.config.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">prisma.config.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { config } from "dotenv";
config({ path: ".env.local" });
import { defineConfig, env } from "prisma/config";
export default defineConfig({
schema: "prisma/schema.prisma",
migrations: { path: "prisma/migrations" },
datasource: { url: env("DATABASE_URL_UNPOOLED") },
});</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Now, the Prisma client singleton. We build this so that every file reuses the same database connection. Go to <code>src/lib</code> and create a file called <code>prisma.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">prisma.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { PrismaClient } from "@/generated/prisma/client";
import { PrismaPg } from "@prisma/adapter-pg";
import { Pool } from "pg";
import { env } from "@/lib/env";
const pool = new Pool({ connectionString: env.DATABASE_URL });
const adapter = new PrismaPg(pool);
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
export const prisma =
globalForPrisma.prisma || new PrismaClient({ adapter });
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Then generate the client and push the schema using the commands:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">npx prisma generate
npx prisma db push</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="session-configuration">Session configuration</h3><p>To track who's logged in, we'll store the session data in an encrypted browser cookie with <code>iron-session</code>. Go to <code>src/lib</code> and create a file called <code>session.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">session.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { getIronSession, type SessionOptions } from "iron-session";
import { cookies } from "next/headers";
import { env } from "@/lib/env";
export interface SessionData {
userId?: string;
whopUserId?: string;
accessToken?: string;
}
const sessionOptions: SessionOptions = {
password: env.SESSION_SECRET,
cookieName: "shelfie_session",
cookieOptions: {
secure: process.env.NODE_ENV === "production",
httpOnly: true,
sameSite: "lax" as const,
},
};
export async function getSession() {
return getIronSession<SessionData>(await cookies(), sessionOptions);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="whop-sdk-and-oauth-configuration">Whop SDK and OAuth configuration</h3><p>We need a Whop SDK client that's sandbox-aware. When <code>WHOP_SANDBOX</code> environment variable is set to <code>true</code>, API calls go to <code>sandbox-api.whop.com</code> instead of production.</p><p>Go to <code>src/lib</code> and create a file called <code>whop.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">whop.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Whop from "@whop/sdk";
const isSandbox = process.env.WHOP_SANDBOX === "true";
let _whop: Whop | null = null;
export function getWhop(): Whop {
if (!_whop) {
_whop = new Whop({
apiKey: process.env.WHOP_API_KEY!,
webhookKey: process.env.WHOP_WEBHOOK_SECRET
? Buffer.from(process.env.WHOP_WEBHOOK_SECRET).toString("base64")
: undefined,
...(isSandbox && { baseURL: "https://sandbox-api.whop.com/api/v1" }),
});
}
return _whop;
}
let _companyWhop: Whop | null = null;
export function getCompanyWhop(): Whop {
if (!_companyWhop) {
_companyWhop = new Whop({
apiKey: process.env.WHOP_COMPANY_API_KEY!,
...(isSandbox && { baseURL: "https://sandbox-api.whop.com/api/v1" }),
});
}
return _companyWhop;
}
export const WHOP_OAUTH_BASE = isSandbox
? "https://sandbox-api.whop.com"
: "https://api.whop.com";</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="auth-helpers">Auth helpers</h3><p>The project needs three levels of authentication: optional, required, and seller-only. Go to <code>src/lib</code> and create a file called <code>auth.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">auth.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { redirect } from "next/navigation";
import { getSession } from "./session";
import { prisma } from "./prisma";
export async function getAuthUser() {
const session = await getSession();
if (!session.userId) return null;
const user = await prisma.user.findUnique({
where: { id: session.userId },
include: { sellerProfile: true },
});
return user;
}
export async function requireAuth() {
const user = await getAuthUser();
if (!user) redirect("/sign-in");
return user;
}
export async function requireSeller() {
const user = await requireAuth();
if (!user.sellerProfile) redirect("/sell");
if (!user.sellerProfile.kycComplete) redirect("/sell?kyc=incomplete");
return { user, sellerProfile: user.sellerProfile };
}
export async function completeKycIfNeeded(userId: string): Promise<boolean> {
const profile = await prisma.sellerProfile.findUnique({
where: { userId },
});
if (!profile || profile.kycComplete) return !!profile?.kycComplete;
await prisma.sellerProfile.update({
where: { id: profile.id },
data: { kycComplete: true },
});
return true;
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="the-login-route">The login route</h3><p>When a user clicks on the "Sign in with Whop" button, we need to create a PKCE challenge, store the verifier in a cookie, and redirect the user to Whop's authentication page. To build this system, go to <code>src/app/api/auth/login</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextResponse } from "next/server";
import { WHOP_OAUTH_BASE } from "@/lib/whop";
import { env } from "@/lib/env";
export async function GET() {
const clientId = env.WHOP_CLIENT_ID;
const redirectUri = `${env.NEXT_PUBLIC_APP_URL}/api/auth/callback`;
const codeVerifier = crypto.randomUUID() + crypto.randomUUID();
const encoder = new TextEncoder();
const data = encoder.encode(codeVerifier);
const digest = await crypto.subtle.digest("SHA-256", data);
const codeChallenge = btoa(String.fromCharCode(...new Uint8Array(digest)))
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/, "");
const state = crypto.randomUUID();
const nonce = crypto.randomUUID();
const params = new URLSearchParams({
client_id: clientId,
redirect_uri: redirectUri,
response_type: "code",
scope: "openid profile email",
state,
code_challenge: codeChallenge,
code_challenge_method: "S256",
nonce,
});
const authUrl = `${WHOP_OAUTH_BASE}/oauth/authorize?${params}`;
const response = NextResponse.redirect(authUrl);
response.cookies.set("oauth_code_verifier", codeVerifier, {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
maxAge: 600,
path: "/",
});
response.cookies.set("oauth_state", state, {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
maxAge: 600,
path: "/",
});
return response;
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="callback-route">Callback route</h3><p>We added the callback URI in the OAuth tab of the Whop app previously. Now, let's build the route that handles when Whop redirects the user back to our app. Go to <code>src/app/api/auth/callback</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
import { WHOP_OAUTH_BASE } from "@/lib/whop";
import { env } from "@/lib/env";
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const code = searchParams.get("code");
const state = searchParams.get("state");
const storedState = request.cookies.get("oauth_state")?.value;
const codeVerifier = request.cookies.get("oauth_code_verifier")?.value;
if (!code || !state || state !== storedState || !codeVerifier) {
return NextResponse.redirect(
`${env.NEXT_PUBLIC_APP_URL}/sign-in?error=invalid_state`
);
}
const tokenRes = await fetch(`${WHOP_OAUTH_BASE}/oauth/token`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
grant_type: "authorization_code",
code,
redirect_uri: `${env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
client_id: env.WHOP_CLIENT_ID,
client_secret: env.WHOP_CLIENT_SECRET,
code_verifier: codeVerifier,
}),
});
if (!tokenRes.ok) {
return NextResponse.redirect(
`${env.NEXT_PUBLIC_APP_URL}/sign-in?error=token_exchange`
);
}
const tokens = await tokenRes.json();
const userInfoRes = await fetch(`${WHOP_OAUTH_BASE}/oauth/userinfo`, {
headers: { Authorization: `Bearer ${tokens.access_token}` },
});
if (!userInfoRes.ok) {
return NextResponse.redirect(
`${env.NEXT_PUBLIC_APP_URL}/sign-in?error=userinfo`
);
}
const userInfo = await userInfoRes.json();
const user = await prisma.user.upsert({
where: { whopUserId: userInfo.sub },
update: {
email: userInfo.email,
name: userInfo.name || userInfo.preferred_username,
avatar: userInfo.picture,
},
create: {
whopUserId: userInfo.sub,
email: userInfo.email,
name: userInfo.name || userInfo.preferred_username,
avatar: userInfo.picture,
},
});
const session = await getSession();
session.userId = user.id;
session.whopUserId = user.whopUserId;
session.accessToken = tokens.access_token;
await session.save();
const response = NextResponse.redirect(
`${env.NEXT_PUBLIC_APP_URL}/dashboard`
);
response.cookies.delete("oauth_code_verifier");
response.cookies.delete("oauth_state");
return response;
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="logout-route">Logout route</h3><p>The logout route should remove the session cookie. Go to <code>src/app/api/auth/logout</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextResponse } from "next/server";
import { getSession } from "@/lib/session";
import { env } from "@/lib/env";
export async function POST() {
const session = await getSession();
session.destroy();
return NextResponse.redirect(`${env.NEXT_PUBLIC_APP_URL}/`);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="sign-in-page">Sign-in page</h3><p>Now, let's build a simple sign-in page with a single "Sign in with Whop" button. Go to <code>src/app/sign-in</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { Store } from "lucide-react";
const ERROR_MESSAGES: Record<string, string> = {
invalid_state: "Sign-in session expired. Please try again.",
token_exchange: "Could not complete sign-in. Please try again.",
userinfo: "Could not retrieve your profile. Please try again.",
};
export default async function SignInPage({
searchParams,
}: {
searchParams: Promise<{ error?: string }>;
}) {
const { error } = await searchParams;
const errorMessage = error ? ERROR_MESSAGES[error] || "Something went wrong. Please try again." : null;
return (
<div className="flex min-h-[80vh] items-center justify-center px-4">
<div className="w-full max-w-sm text-center">
<Store className="mx-auto h-12 w-12 text-accent" aria-hidden="true" />
<h1 className="mt-4 text-2xl font-bold text-text-primary">
Welcome to Shelfie
</h1>
<p className="mt-2 text-sm text-text-secondary">
Sign in with your Whop account to buy and sell digital products.
</p>
{errorMessage && (
<div
role="alert"
className="mt-4 rounded-lg bg-error/10 p-3 text-sm text-error"
>
{errorMessage}
</div>
)}
<a
href="/api/auth/login"
className="mt-8 block w-full rounded-lg bg-accent px-6 py-3 text-center text-sm font-semibold text-white hover:bg-accent-hover transition-colors"
>
Sign in with Whop
</a>
</div>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="navigation-bar">Navigation bar</h3><p>We need a navigation bar so that our users can easily navigate the app. The navigation bar will display a "Sign In" button for guests and user details, navigation links, and a logout button for logged-in users.</p><p>Go to <code>src/components</code> and create a file called <code>navbar.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">navbar.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Link from "next/link";
import { getAuthUser } from "@/lib/auth";
import { Store, ShoppingBag, LogOut, LogIn } from "lucide-react";
export async function Navbar() {
const user = await getAuthUser();
return (
<header className="sticky top-0 z-50 border-b border-border bg-surface/80 backdrop-blur-md">
<nav aria-label="Main navigation" className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
<Link href="/" className="flex items-center gap-2 text-xl font-bold text-text-primary">
<Store className="h-6 w-6 text-accent" aria-hidden="true" />
<span className="hidden sm:inline">Shelfie</span>
</Link>
<div className="flex items-center gap-3 sm:gap-6">
<Link
href="/products"
className="text-sm font-medium text-text-secondary hover:text-text-primary transition-colors"
>
Browse
</Link>
{user ? (
<>
<Link
href="/sell/dashboard"
className="text-sm font-medium text-text-secondary hover:text-text-primary transition-colors"
>
Sell
</Link>
<Link
href="/dashboard"
aria-label="My purchases"
className="p-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors"
>
<ShoppingBag className="h-4 w-4" aria-hidden="true" />
</Link>
<div className="flex items-center gap-2 sm:gap-3">
{user.avatar && (
<img
src={user.avatar}
alt={user.name || "User avatar"}
className="h-8 w-8 rounded-full"
/>
)}
<form action="/api/auth/logout" method="POST">
<button
type="submit"
aria-label="Sign out"
className="p-2 text-text-secondary hover:text-text-primary transition-colors"
>
<LogOut className="h-4 w-4" aria-hidden="true" />
</button>
</form>
</div>
</>
) : (
<Link
href="/sign-in"
className="inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-white hover:bg-accent-hover transition-colors"
>
<LogIn className="h-4 w-4" aria-hidden="true" />
<span className="hidden sm:inline">Sign In</span>
</Link>
)}
</div>
</nav>
</header>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="category-constants">Category constants</h3><p>We need a list of product categories that we'll reuse across the app. Go to <code>src/constants</code> and create a file called <code>categories.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">categories.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import {
FileText,
BookOpen,
Code,
Palette,
Music,
Video,
Camera,
GraduationCap,
Package,
type LucideIcon,
} from "lucide-react";
export const CATEGORIES = [
{ value: "TEMPLATES", label: "Templates", icon: FileText },
{ value: "EBOOKS", label: "Ebooks", icon: BookOpen },
{ value: "SOFTWARE", label: "Software", icon: Code },
{ value: "DESIGN", label: "Design", icon: Palette },
{ value: "AUDIO", label: "Audio", icon: Music },
{ value: "VIDEO", label: "Video", icon: Video },
{ value: "PHOTOGRAPHY", label: "Photography", icon: Camera },
{ value: "EDUCATION", label: "Education", icon: GraduationCap },
{ value: "OTHER", label: "Other", icon: Package },
] as const satisfies readonly { value: string; label: string; icon: LucideIcon }[];
export const CATEGORY_MAP = Object.fromEntries(
CATEGORIES.map((c) => [c.value, c])
) as Record<string, (typeof CATEGORIES)[number]>;</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="nextjs-configuration">Next.js configuration</h3><p>We need to allow remote images from UploadThing and Whop's CDNs. In the project root, create a file called <code>next.config.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">next.config.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import type { NextConfig } from "next";
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{ hostname: "utfs.io" },
{ hostname: "assets.whop.com" },
{ hostname: "cdn.whop.com" },
],
},
};
export default nextConfig;</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h2 id="part-2-seller-onboarding">Part 2: Seller onboarding</h2><p>In this section, we're going build the seller onboarding where users can sign up as sellers. When they click on the "Get Started" button in our project, we'll create a connected account for them on Whop, verify their identity through a Whop-hosted KYC, and save their details in the database.</p><h3 id="add-environment-variables">Add environment variables</h3><p>The seller onboarding flow needs three new variables:</p>
<!--kg-card-begin: html-->
<table>
<tbody><tr><th>Variable</th><th>Where to get it</th></tr>
<tr><td><code>WHOP_API_KEY</code></td><td>App API key (Developer > API Keys)</td></tr>
<tr><td><code>WHOP_COMPANY_ID</code></td><td>Your platform's company ID (from dashboard URL, starts with <code>biz_</code>)</td></tr>
<tr><td><code>WHOP_COMPANY_API_KEY</code></td><td>Company API key (Business Settings > API Keys)</td></tr>
</tbody></table>
<!--kg-card-end: html-->
<p><code>WHOP_API_KEY</code> needs these permission scopes: <code>company:create</code>, <code>company:basic:read</code>, <code>account_link:create</code>. In sandbox, the default key usually has all scopes enabled.<br>After adding these new environment variables to Vercel (via project settings > Environment Variables), use the command below to pull them:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">vercel env pull .env.local</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="the-sell-page">The sell page</h3><p>The sell page will pitch becoming a seller to all users. When a user clicks the "Get Started" button, we redirect them to a Whop-hosted KYC or skips it. We'll expand on the skipping reason in the next section.</p><p>To build the sell page, go to <code>src/app/sell</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">"use client";
import { useState, Suspense } from "react";
import { ArrowRight, DollarSign, Shield, Zap, CheckCircle, AlertCircle } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
export default function SellPage() {
return (
<Suspense>
<SellPageContent />
</Suspense>
);
}
function SellPageContent() {
const router = useRouter();
const searchParams = useSearchParams();
const kycIncomplete = searchParams.get("kyc") === "incomplete";
const [loading, setLoading] = useState(false);
const [sandboxMessage, setSandboxMessage] = useState(false);
async function handleOnboard() {
setLoading(true);
try {
const res = await fetch("/api/sell/onboard", { method: "POST" });
const data = await res.json();
if (data.sandbox) {
setSandboxMessage(true);
setTimeout(() => router.push("/sell/dashboard"), 2000);
return;
}
if (data.redirect) {
if (data.redirect.startsWith("http")) {
window.location.href = data.redirect;
} else {
router.push(data.redirect);
}
}
} catch (error) {
console.error("Onboarding failed:", error);
} finally {
setLoading(false);
}
}
return (
<div className="mx-auto max-w-4xl px-4 py-16 text-center">
<h1 className="text-4xl font-extrabold text-text-primary sm:text-5xl">
Share your work with the world
</h1>
<p className="mx-auto mt-4 max-w-lg text-lg text-text-secondary">
Sell digital products on Shelfie. We handle payments, payouts, and
compliance - you focus on creating.
</p>
{kycIncomplete && (
<div className="mt-8 inline-flex items-center gap-2 bg-warning/10 px-6 py-3 text-sm font-medium text-warning">
<AlertCircle className="h-5 w-5" aria-hidden="true" />
Complete identity verification to start selling. Click below to continue.
</div>
)}
<div className="mt-12 grid gap-6 sm:grid-cols-3">
<div className="border border-border bg-surface p-6 text-center">
<DollarSign className="mx-auto h-10 w-10 text-accent" />
<h3 className="mt-4 text-base font-semibold text-text-primary">
Set your own price
</h3>
<p className="mt-2 text-sm text-text-secondary">
Free or paid. You decide how much your work is worth.
</p>
</div>
<div className="border border-border bg-surface p-6 text-center">
<Shield className="mx-auto h-10 w-10 text-accent" />
<h3 className="mt-4 text-base font-semibold text-text-primary">
We handle payments
</h3>
<p className="mt-2 text-sm text-text-secondary">
Whop processes payments, handles compliance, and manages disputes.
</p>
</div>
<div className="border border-border bg-surface p-6 text-center">
<Zap className="mx-auto h-10 w-10 text-accent" />
<h3 className="mt-4 text-base font-semibold text-text-primary">
Keep 95% of every sale
</h3>
<p className="mt-2 text-sm text-text-secondary">
Just a 5% platform fee. Withdraw to your bank anytime.
</p>
</div>
</div>
{sandboxMessage && (
<div className="mt-8 inline-flex items-center gap-2 bg-success/10 px-6 py-3 text-sm font-medium text-success">
<CheckCircle className="h-5 w-5" aria-hidden="true" />
This demo uses Whop Sandbox - KYC is not required. Redirecting to
dashboard...
</div>
)}
{!sandboxMessage && (
<>
<button
onClick={handleOnboard}
disabled={loading}
className="mt-12 inline-flex items-center gap-2 bg-accent px-8 py-3.5 text-sm font-semibold text-white hover:bg-accent-hover transition-colors disabled:opacity-50"
>
{loading ? "Setting up..." : kycIncomplete ? "Complete Verification" : "Get Started"}
<ArrowRight className="h-4 w-4" />
</button>
<p className="mt-4 text-xs text-text-secondary">
{kycIncomplete
? "You\u2019ll be redirected to Whop to complete identity verification."
: "You\u2019ll need to verify your identity to receive payouts. This is handled securely by Whop."}
</p>
</>
)}
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="the-onboarding-api-route">The onboarding API route</h3><p>This route handles the entire onboarding flow from creating a connected account on Whop to generating a KYC link.</p><p>You'll notice <code>isSandbox</code> checks throughout the code. In the sandbox environment on Whop, you don't need to complete the KYC flow since you're not moving real money, so we skip it during development.</p><p>The route sets <code>kycComplete: true</code> immediately and returns a sandbox flag instead of a KYC URL. <strong>In production (when <code>WHOP_SANDBOX</code> is removed), these branches are never reached</strong>. Every seller goes through Whop's real identity verification before they can list products.</p><p>Go to <code>src/app/api/sell/onboard</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
import { getWhop } from "@/lib/whop";
import { generateUsername } from "@/lib/utils";
import { env } from "@/lib/env";
const isSandbox = process.env.WHOP_SANDBOX === "true";
export async function POST() {
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const user = await prisma.user.findUnique({
where: { id: session.userId },
include: { sellerProfile: true },
});
if (!user) {
return NextResponse.json({ error: "User not found" }, { status: 404 });
}
if (user.sellerProfile?.kycComplete) {
return NextResponse.json({ redirect: "/sell/dashboard" });
}
if (user.sellerProfile) {
if (isSandbox) {
await prisma.sellerProfile.update({
where: { id: user.sellerProfile.id },
data: { kycComplete: true },
});
return NextResponse.json({ sandbox: true });
}
const accountLink = await getWhop().accountLinks.create({
company_id: user.sellerProfile.whopCompanyId,
use_case: "account_onboarding",
return_url: `${env.NEXT_PUBLIC_APP_URL}/sell/kyc-return`,
refresh_url: `${env.NEXT_PUBLIC_APP_URL}/sell?refresh=true`,
});
return NextResponse.json({ redirect: accountLink.url });
}
const company = await getWhop().companies.create({
email: user.email,
title: `${user.name || "Seller"}'s Store`,
parent_company_id: env.WHOP_COMPANY_ID,
});
const username = generateUsername(user.name);
if (isSandbox) {
await prisma.sellerProfile.create({
data: {
userId: user.id,
username,
whopCompanyId: company.id,
kycComplete: true,
},
});
return NextResponse.json({ sandbox: true });
}
await prisma.sellerProfile.create({
data: {
userId: user.id,
username,
whopCompanyId: company.id,
kycComplete: false,
},
});
const accountLink = await getWhop().accountLinks.create({
company_id: company.id,
use_case: "account_onboarding",
return_url: `${env.NEXT_PUBLIC_APP_URL}/sell/kyc-return`,
refresh_url: `${env.NEXT_PUBLIC_APP_URL}/sell?refresh=true`,
});
return NextResponse.json({ redirect: accountLink.url });
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="username-generation">Username generation</h3><p>The <code>generateUsername()</code> function in <code>utils.ts</code> creates a URL-friendly username from the user's name:</p><pre><code>"Alex Rivera" → "alex-rivera-k7m2"
"Sarah Chen" → "sarah-chen-p9x4"
null → "seller-w3f1"
</code></pre><p>The random suffix guarantees uniqueness without a database check.</p><h3 id="checkpoint">Checkpoint</h3><ol><li>Sign in via Whop OAuth (set up earlier)</li><li>Navigate to <code>/sell</code></li><li>Click "Get Started"</li><li>In sandbox, you'll see a success message and auto-redirect to the dashboard</li><li>In production: you'd be redirected to Whop's KYC page > complete verification > land on <code>/sell/kyc-return</code> > auto-redirect to dashboard</li><li>Check your database. You should see a <code>SellerProfile</code> row with <code>whopCompanyId</code> and <code>kycComplete = true</code></li></ol><h2 id="part-3-product-listings-and-file-uploads">Part 3: Product listings and file uploads</h2><p>In this part, we're going to build the product creation form, file uploads, the draft flow, and the publishing flow.</p><h3 id="file-uploads-with-uploadthing">File uploads with UploadThing</h3><p>In this project, we're going to use UploadThing for file uploads. It will handle storage, CDN delivery, size validation, while we just define what file types to accept and who can upload.</p><p>First, let's install UploadThing by using the command below:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">npm install uploadthing @uploadthing/react</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Then, get an UploadThing token and add it to Vercel:</p><ol><li>Go to UploadThings.com and create a project</li><li>Copy the <code>UPLOADTHING_TOKEN</code> from the UploadThing dashboard</li><li>Add it to Vercel via the Environment Variables page of the project settings</li><li>Pull the new environment variables to local using the <code>vercel env pull .env.local</code> command</li></ol><h3 id="file-router">File router</h3><p>Let's define what type of files users can upload, their size limits, and authentication checks. Go to <code>src/app/api/uploadthing</code> and create a file called <code>core.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">core.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
import { getSession } from "@/lib/session";
const f = createUploadthing();
export const ourFileRouter = {
productFile: f({
pdf: { maxFileSize: "16MB", maxFileCount: 10 },
image: { maxFileSize: "16MB", maxFileCount: 10 },
video: { maxFileSize: "16MB", maxFileCount: 10 },
})
.middleware(async () => {
const session = await getSession();
if (!session.userId) throw new UploadThingError("Unauthorized");
return { userId: session.userId };
})
.onUploadComplete(async ({ metadata, file }) => {
return {
uploadedBy: metadata.userId,
name: file.name,
size: file.size,
key: file.key,
url: file.ufsUrl,
};
}),
} satisfies FileRouter;
export type OurFileRouter = typeof ourFileRouter;</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="route-handler">Route handler</h3><p>Go to <code>src/app/api/uploadthing</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { createRouteHandler } from "uploadthing/next";
import { ourFileRouter } from "./core";
export const { GET, POST } = createRouteHandler({
router: ourFileRouter,
});</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="client-helper">Client helper</h3><p>We need a React hook that lets us trigger file uploads from the browser. Go to <code>src/lib</code> and create a file called <code>uploadthing.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">uploadthing.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { generateReactHelpers } from "@uploadthing/react";
import type { OurFileRouter } from "@/app/api/uploadthing/core";
export const { useUploadThing } = generateReactHelpers<OurFileRouter>();</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="the-product-api-route">The product API route</h3><p>Now, we need to validate the input, generate a unique slug, and save the product as a draft once a seller fills out the product form.<br>Go to <code>src/app/api/sell/products</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
import { generateSlug } from "@/lib/utils";
const createProductSchema = z.object({
title: z.string().min(1).max(100),
description: z.string().min(1).max(5000),
price: z.number().int().min(0),
category: z.enum([
"TEMPLATES", "EBOOKS", "SOFTWARE", "DESIGN",
"AUDIO", "VIDEO", "PHOTOGRAPHY", "EDUCATION", "OTHER",
]),
content: z.string().max(50000).optional(),
externalUrl: z.string().url().optional().or(z.literal("")),
files: z.array(z.object({
fileName: z.string(),
fileKey: z.string(),
fileUrl: z.string().url(),
fileSize: z.number().int(),
mimeType: z.string(),
})).optional(),
});
export async function POST(request: NextRequest) {
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const sellerProfile = await prisma.sellerProfile.findUnique({
where: { userId: session.userId },
});
if (!sellerProfile || !sellerProfile.kycComplete) {
return NextResponse.json(
{ error: "Complete seller onboarding first" },
{ status: 403 }
);
}
const body = await request.json();
const parsed = createProductSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: "Validation failed", details: parsed.error.flatten() },
{ status: 400 }
);
}
const { title, description, price, category, content, externalUrl, files } =
parsed.data;
const slug = generateSlug(title);
const thumbnailFile = files?.find((f) => f.mimeType.startsWith("image/"));
const product = await prisma.product.create({
data: {
sellerProfileId: sellerProfile.id,
title,
slug,
description,
price,
category,
content: content || null,
externalUrl: externalUrl || null,
thumbnailUrl: thumbnailFile?.fileUrl || null,
files: files
? {
create: files.map((f, i) => ({
fileName: f.fileName,
fileKey: f.fileKey,
fileUrl: f.fileUrl,
fileSize: f.fileSize,
mimeType: f.mimeType,
displayOrder: i,
})),
}
: undefined,
},
include: { files: true },
});
return NextResponse.json(product, { status: 201 });
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="updating-and-deleting-products">Updating and deleting products</h3><p>To make some quality-of-life improvements to the project, we need to let sellers edit their drafts or remove existing ones.</p><p>To build it, go to <code>src/app/api/sell/products/[productId]</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
const updateProductSchema = z.object({
title: z.string().min(1).max(100).optional(),
description: z.string().min(1).max(5000).optional(),
price: z.number().int().min(0).optional(),
category: z.enum([
"TEMPLATES", "EBOOKS", "SOFTWARE", "DESIGN",
"AUDIO", "VIDEO", "PHOTOGRAPHY", "EDUCATION", "OTHER",
]).optional(),
content: z.string().max(50000).optional().nullable(),
externalUrl: z.string().url().optional().nullable().or(z.literal("")),
thumbnailUrl: z.string().url().optional().nullable(),
files: z.array(z.object({
fileName: z.string(),
fileKey: z.string(),
fileUrl: z.string().url(),
fileSize: z.number().int(),
mimeType: z.string(),
})).optional(),
removeFileIds: z.array(z.string()).optional(),
});
export async function PATCH(
request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const sellerProfile = await prisma.sellerProfile.findUnique({
where: { userId: session.userId },
});
if (!sellerProfile) {
return NextResponse.json({ error: "Not a seller" }, { status: 403 });
}
const product = await prisma.product.findUnique({
where: { id: productId },
include: { files: true },
});
if (!product || product.sellerProfileId !== sellerProfile.id) {
return NextResponse.json({ error: "Product not found" }, { status: 404 });
}
if (product.status === "PUBLISHED") {
return NextResponse.json(
{ error: "Cannot edit a published product. Unpublish first." },
{ status: 400 }
);
}
const body = await request.json();
const parsed = updateProductSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: "Validation failed", details: parsed.error.flatten() },
{ status: 400 }
);
}
const { files, removeFileIds, ...fields } = parsed.data;
if (removeFileIds && removeFileIds.length > 0) {
await prisma.productFile.deleteMany({
where: { id: { in: removeFileIds }, productId },
});
}
if (files && files.length > 0) {
const existingCount = product.files.length - (removeFileIds?.length || 0);
await prisma.productFile.createMany({
data: files.map((f, i) => ({
productId,
fileName: f.fileName,
fileKey: f.fileKey,
fileUrl: f.fileUrl,
fileSize: f.fileSize,
mimeType: f.mimeType,
displayOrder: existingCount + i,
})),
});
}
const newThumbnail = files?.find((f) => f.mimeType.startsWith("image/"));
const updated = await prisma.product.update({
where: { id: productId },
data: {
...fields,
externalUrl: fields.externalUrl || null,
...(newThumbnail && !product.thumbnailUrl
? { thumbnailUrl: newThumbnail.fileUrl }
: {}),
},
include: { files: { orderBy: { displayOrder: "asc" } } },
});
return NextResponse.json(updated);
}
export async function DELETE(
_request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const sellerProfile = await prisma.sellerProfile.findUnique({
where: { userId: session.userId },
});
if (!sellerProfile) {
return NextResponse.json({ error: "Not a seller" }, { status: 403 });
}
const product = await prisma.product.findUnique({
where: { id: productId },
});
if (!product || product.sellerProfileId !== sellerProfile.id) {
return NextResponse.json({ error: "Product not found" }, { status: 404 });
}
await prisma.product.delete({ where: { id: productId } });
return NextResponse.json({ success: true });
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="publishing-products">Publishing products</h3><p>Now that we have all the foundation, let's build the product publishing flow. When a seller clicks Publish, we create a Whop checkout configuration on their connected account. We do this on publish (not on draft creation) because draft products shouldn't have checkout links.</p><p>Go to <code>src/app/api/sell/products/[productId]/publish</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
import { getCompanyWhop } from "@/lib/whop";
import { env } from "@/lib/env";
export async function POST(
_request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const sellerProfile = await prisma.sellerProfile.findUnique({
where: { userId: session.userId },
});
if (!sellerProfile || !sellerProfile.kycComplete) {
return NextResponse.json(
{ error: "Complete seller onboarding first" },
{ status: 403 }
);
}
const product = await prisma.product.findUnique({
where: { id: productId },
include: { files: true },
});
if (!product || product.sellerProfileId !== sellerProfile.id) {
return NextResponse.json({ error: "Product not found" }, { status: 404 });
}
if (product.status === "PUBLISHED") {
return NextResponse.json(
{ error: "Product is already published" },
{ status: 400 }
);
}
const hasFiles = product.files.length > 0;
const hasContent = !!product.content;
const hasLink = !!product.externalUrl;
if (!hasFiles && !hasContent && !hasLink) {
return NextResponse.json(
{
error:
"Product must have at least one file, text content, or external link",
},
{ status: 400 }
);
}
try {
const whopProduct = await getCompanyWhop().products.create({
company_id: sellerProfile.whopCompanyId,
title: product.title,
description: product.description,
});
const feePercent = env.PLATFORM_FEE_PERCENT;
if (product.price === 0) {
const updated = await prisma.product.update({
where: { id: productId },
data: {
status: "PUBLISHED",
whopProductId: whopProduct.id,
},
});
return NextResponse.json(updated);
}
const feeAmount = Math.round(product.price * (feePercent / 100));
const checkoutConfig = await (getCompanyWhop().checkoutConfigurations.create as any)({
plan: {
company_id: sellerProfile.whopCompanyId,
currency: "usd",
initial_price: product.price / 100,
plan_type: "one_time",
application_fee_amount: feeAmount / 100,
},
});
const updated = await prisma.product.update({
where: { id: productId },
data: {
status: "PUBLISHED",
whopProductId: whopProduct.id,
whopPlanId: checkoutConfig.plan?.id ?? null,
whopCheckoutUrl: checkoutConfig.purchase_url,
},
});
return NextResponse.json(updated);
} catch (err) {
console.error("Publish error:", err);
const message = err instanceof Error ? err.message : "Whop API error";
return NextResponse.json({ error: message }, { status: 500 });
}
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="create-product-page">Create product page</h3><p>Now, let's build the product creation form where sellers enter product details and upload their files. Initially, all products are saved as drafts.</p><p>Go to <code>src/app/sell/products/new</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">"use client";
import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import { X, Upload, Check, Loader2 } from "lucide-react";
import { CATEGORIES } from "@/constants/categories";
import { formatFileSize } from "@/lib/utils";
import { useUploadThing } from "@/lib/uploadthing";
const ALLOWED_TYPES = [
"application/pdf",
"image/png",
"image/jpeg",
"image/gif",
"image/webp",
"video/mp4",
];
const MAX_FILE_SIZE = 16 * 1024 * 1024; // 16 MB
interface UploadedFile {
fileName: string;
fileKey: string;
fileUrl: string;
fileSize: number;
mimeType: string;
}
export default function NewProductPage() {
const router = useRouter();
const fileInputRef = useRef<HTMLInputElement>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [files, setFiles] = useState<UploadedFile[]>([]);
const { startUpload, isUploading } = useUploadThing("productFile", {
onClientUploadComplete: (res) => {
const uploaded = res.map((file) => ({
fileName: file.name,
fileKey: file.key,
fileUrl: file.url,
fileSize: file.size,
mimeType: "",
}));
setFiles((prev) => [...prev, ...uploaded]);
},
onUploadError: (err) => {
setError(err.message || "Upload failed");
},
});
function removeFile(fileKey: string) {
setFiles((prev) => prev.filter((f) => f.fileKey !== fileKey));
}
async function handleFiles(fileList: FileList) {
setError(null);
const validFiles: File[] = [];
for (const file of Array.from(fileList)) {
if (!ALLOWED_TYPES.includes(file.type)) {
setError(`${file.name}: file type not allowed`);
return;
}
if (file.size > MAX_FILE_SIZE) {
setError(`${file.name}: exceeds 16 MB limit`);
return;
}
validFiles.push(file);
}
if (validFiles.length === 0) return;
const res = await startUpload(validFiles);
if (res) {
setFiles((prev) =>
prev.map((f) => {
if (f.mimeType) return f;
const original = validFiles.find((v) => v.name === f.fileName);
return original ? { ...f, mimeType: original.type } : f;
})
);
}
}
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setLoading(true);
setError(null);
const formData = new FormData(e.currentTarget);
const priceStr = formData.get("price") as string;
const priceInCents = Math.round(parseFloat(priceStr || "0") * 100);
const body = {
title: formData.get("title") as string,
description: formData.get("description") as string,
price: priceInCents,
category: formData.get("category") as string,
content: (formData.get("content") as string) || undefined,
externalUrl: (formData.get("externalUrl") as string) || undefined,
files: files.length > 0 ? files : undefined,
};
try {
const res = await fetch("/api/sell/products", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
if (!res.ok) {
const data = await res.json();
setError(data.error || "Failed to create product");
return;
}
const product = await res.json();
router.push(`/sell/products/${product.id}/edit`);
} catch {
setError("Something went wrong");
} finally {
setLoading(false);
}
}
return (
<div className="mx-auto max-w-2xl px-4 py-8">
<h1 className="text-2xl font-bold text-text-primary">
Create a New Product
</h1>
<p className="mt-1 text-sm text-text-secondary">
Fill in the details, upload your files, and publish when ready.
</p>
{error && (
<div
role="alert"
className="mt-4 rounded-lg bg-error/10 p-3 text-sm text-error"
>
{error}
</div>
)}
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div>
<label
htmlFor="title"
className="block text-sm font-medium text-text-primary"
>
Title
</label>
<input
type="text" id="title" name="title" required maxLength={100}
className="mt-1.5 w-full rounded-lg border border-border bg-surface px-4 py-2.5 text-text-primary placeholder:text-text-secondary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
placeholder="e.g. Premium Icon Pack"
/>
</div>
<div>
<label
htmlFor="description"
className="block text-sm font-medium text-text-primary"
>
Description
</label>
<textarea
id="description" name="description" required rows={4} maxLength={5000}
className="mt-1.5 w-full rounded-lg border border-border bg-surface px-4 py-2.5 text-text-primary placeholder:text-text-secondary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
placeholder="Describe what buyers will get..."
/>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label htmlFor="price" className="block text-sm font-medium text-text-primary">
Price (USD)
</label>
<input
type="number" id="price" name="price" min="0" step="0.01" defaultValue="0"
className="mt-1.5 w-full rounded-lg border border-border bg-surface px-4 py-2.5 text-text-primary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
placeholder="0.00 for free"
/>
<p className="mt-1 text-xs text-text-secondary">
Set to 0 for a free product
</p>
</div>
<div>
<label htmlFor="category" className="block text-sm font-medium text-text-primary">
Category
</label>
<select
id="category" name="category" required
className="mt-1.5 w-full rounded-lg border border-border bg-surface px-4 py-2.5 text-text-primary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
>
{CATEGORIES.map((cat) => (
<option key={cat.value} value={cat.value}>{cat.label}</option>
))}
</select>
</div>
</div>
<div>
<label className="block text-sm font-medium text-text-primary">Files</label>
<p className="mt-0.5 text-xs text-text-secondary">
PDF, images (PNG, JPG, GIF, WebP), video (MP4). Max 16 MB each.
</p>
{files.length > 0 && (
<div className="mt-3 space-y-2">
{files.map((file) => (
<div key={file.fileKey} className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3">
<Check className="h-4 w-4 shrink-0 text-success" aria-hidden="true" />
<span className="flex-1 truncate text-sm text-text-primary">{file.fileName}</span>
<span className="text-xs text-text-secondary">{formatFileSize(file.fileSize)}</span>
<button type="button" onClick={() => removeFile(file.fileKey)} aria-label={`Remove ${file.fileName}`} className="p-2 text-text-secondary hover:text-error transition-colors">
<X className="h-4 w-4" aria-hidden="true" />
</button>
</div>
))}
</div>
)}
{isUploading && (
<div className="mt-3 flex items-center gap-3 rounded-lg border border-border bg-surface p-3">
<Loader2 className="h-4 w-4 shrink-0 animate-spin text-accent" aria-hidden="true" />
<span className="text-sm text-text-secondary">Uploading...</span>
</div>
)}
<div
onDragOver={(e) => { e.preventDefault(); e.currentTarget.dataset.dragging = "true"; }}
onDragLeave={(e) => { delete e.currentTarget.dataset.dragging; }}
onDrop={(e) => {
e.preventDefault();
delete e.currentTarget.dataset.dragging;
if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
}}
onClick={() => fileInputRef.current?.click()}
className="mt-3 flex cursor-pointer flex-col items-center gap-2 rounded-lg border-2 border-dashed border-border p-8 transition-colors hover:border-accent/50 data-[dragging]:border-accent data-[dragging]:bg-accent/5"
>
<Upload className="h-8 w-8 text-text-secondary" aria-hidden="true" />
<span className="text-sm text-text-secondary">Click or drag files to upload</span>
<input
ref={fileInputRef} type="file" multiple
accept=".pdf,.png,.jpg,.jpeg,.gif,.webp,.mp4"
onChange={(e) => e.target.files && handleFiles(e.target.files)}
className="hidden"
/>
</div>
</div>
<div>
<label htmlFor="content" className="block text-sm font-medium text-text-primary">
Text Content <span className="text-text-secondary">(optional)</span>
</label>
<textarea
id="content" name="content" rows={6}
className="mt-1.5 w-full rounded-lg border border-border bg-surface px-4 py-2.5 text-text-primary placeholder:text-text-secondary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 font-mono text-sm"
placeholder="Add text or markdown content that buyers will see after purchase..."
/>
</div>
<div>
<label htmlFor="externalUrl" className="block text-sm font-medium text-text-primary">
External Link <span className="text-text-secondary">(optional)</span>
</label>
<input
type="url" id="externalUrl" name="externalUrl"
className="mt-1.5 w-full rounded-lg border border-border bg-surface px-4 py-2.5 text-text-primary placeholder:text-text-secondary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
placeholder="https://..."
/>
</div>
<button
type="submit" disabled={loading || isUploading}
className="w-full rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-white hover:bg-accent-hover transition-colors disabled:opacity-50"
>
{loading ? "Creating..." : "Create Product (Draft)"}
</button>
</form>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="edit-and-publish-page">Edit and publish page</h3><p>Now that the creation form is done, let's create the page where sellers can edit and publish their products. Go to <code>src/app/sell/products/[productId]/edit</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { notFound } from "next/navigation";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { requireSeller } from "@/lib/auth";
import { formatPrice, formatFileSize } from "@/lib/utils";
import { PublishButton } from "@/components/publish-button";
import { UnpublishButton } from "@/components/unpublish-button";
import { DeleteButton } from "@/components/delete-button";
import { EditForm } from "@/components/edit-form";
export default async function EditProductPage({
params,
}: {
params: Promise<{ productId: string }>;
}) {
const { productId } = await params;
const { sellerProfile } = await requireSeller();
const product = await prisma.product.findUnique({
where: { id: productId },
include: { files: { orderBy: { displayOrder: "asc" } } },
});
if (!product || product.sellerProfileId !== sellerProfile.id) notFound();
return (
<div className="mx-auto max-w-2xl px-4 py-8">
<Link href="/sell/dashboard"
className="inline-flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors">
<ArrowLeft className="h-4 w-4" /> Back to dashboard
</Link>
<div className="mt-6 flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">
{product.status === "DRAFT" ? "Edit Product" : product.title}
</h1>
<p className="text-sm text-text-secondary">
{formatPrice(product.price)} ·{" "}
<span className={product.status === "PUBLISHED" ? "text-success" : "text-warning"}>
{product.status}
</span>
</p>
</div>
<div className="flex items-center gap-2">
{product.status === "DRAFT" && (
<>
<DeleteButton productId={product.id} />
<PublishButton productId={product.id} />
</>
)}
{product.status === "PUBLISHED" && (
<>
<UnpublishButton productId={product.id} />
<Link href={`/products/${product.slug}`}
className="border border-border px-4 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors">
View Live
</Link>
</>
)}
</div>
</div>
{product.status === "DRAFT" && (
<EditForm
product={{
id: product.id,
title: product.title,
description: product.description,
price: product.price,
category: product.category,
content: product.content,
externalUrl: product.externalUrl,
thumbnailUrl: product.thumbnailUrl,
files: product.files,
}}
/>
)}
{product.status === "PUBLISHED" && (
<div className="mt-8 space-y-6">
{product.thumbnailUrl && (
<div className="overflow-hidden">
<img src={product.thumbnailUrl} alt={product.title}
className="w-full object-cover max-h-64" />
</div>
)}
<div className="border border-border bg-surface p-5">
<h2 className="text-sm font-semibold text-text-primary">Description</h2>
<p className="mt-2 text-sm text-text-secondary whitespace-pre-wrap">{product.description}</p>
</div>
<div className="border border-border bg-surface p-5">
<h2 className="text-sm font-semibold text-text-primary">Files ({product.files.length})</h2>
{product.files.length === 0 ? (
<p className="mt-2 text-sm text-text-secondary">No files uploaded yet.</p>
) : (
<div className="mt-3 space-y-2">
{product.files.map((file) => (
<div key={file.id} className="flex items-center gap-3 bg-surface-elevated p-3">
<span className="flex-1 truncate text-sm text-text-primary">{file.fileName}</span>
<span className="text-xs text-text-secondary">{formatFileSize(file.fileSize)}</span>
</div>
))}
</div>
)}
</div>
{product.content && (
<div className="border border-border bg-surface p-5">
<h2 className="text-sm font-semibold text-text-primary">Text Content</h2>
<p className="mt-2 text-sm text-text-secondary whitespace-pre-wrap">{product.content}</p>
</div>
)}
{product.externalUrl && (
<div className="border border-border bg-surface p-5">
<h2 className="text-sm font-semibold text-text-primary">External Link</h2>
<p className="mt-2 text-sm text-accent">{product.externalUrl}</p>
</div>
)}
</div>
)}
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>We need to make the publish button a separate client component so that it can show error tooltips. Go to <code>src/components</code> and create a file called <code>publish-button.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">publish-button.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Rocket } from "lucide-react";
export function PublishButton({ productId }: { productId: string }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!error) return;
const timer = setTimeout(() => setError(null), 4000);
return () => clearTimeout(timer);
}, [error]);
async function handlePublish() {
setLoading(true);
setError(null);
try {
const res = await fetch(`/api/sell/products/${productId}/publish`, {
method: "POST",
});
if (!res.ok) {
const data = await res.json();
setError(data.error || "Failed to publish");
return;
}
router.refresh();
} catch {
setError("Something went wrong");
} finally {
setLoading(false);
}
}
return (
<div className="relative">
<button onClick={handlePublish} disabled={loading}
className="inline-flex items-center gap-2 rounded-lg bg-success px-4 py-2.5 text-sm font-semibold text-white hover:bg-success/90 transition-colors disabled:opacity-50">
<Rocket className="h-4 w-4" />
{loading ? "Publishing..." : "Publish"}
</button>
{error && (
<div role="alert"
className="absolute right-0 top-full z-10 mt-2 w-64 rounded-lg border border-error/20 bg-error/10 px-3 py-2 text-xs text-error shadow-lg backdrop-blur-sm">
{error}
</div>
)}
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="unpublishing-and-deleting-products">Unpublishing and deleting products</h3><p>Lastly, we need to let sellers unpublish or completely delete products if they wish. Go to <code>src/app/api/sell/products/[productId]/unpublish</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
export async function POST(
_request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const sellerProfile = await prisma.sellerProfile.findUnique({
where: { userId: session.userId },
});
if (!sellerProfile) {
return NextResponse.json({ error: "Not a seller" }, { status: 403 });
}
const product = await prisma.product.findUnique({
where: { id: productId },
});
if (!product || product.sellerProfileId !== sellerProfile.id) {
return NextResponse.json({ error: "Product not found" }, { status: 404 });
}
if (product.status !== "PUBLISHED") {
return NextResponse.json({ error: "Product is not published" }, { status: 400 });
}
const updated = await prisma.product.update({
where: { id: productId },
data: {
status: "DRAFT",
whopCheckoutUrl: null,
},
});
return NextResponse.json(updated);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="checkpoint-1">Checkpoint</h3><p>You can now:</p><ol><li>Navigate to <code>/sell/products/new</code></li><li>Fill in title, description, price, category</li><li>Create the product (saved as DRAFT)</li><li>Land on the edit page</li><li>Upload files, edit any field, and click "Save Changes"</li><li>Click "Publish." This will create a Whop checkout configuration on the seller's connected account</li><li>The product is now PUBLISHED and visible on the marketplace</li></ol><h2 id="part-4-marketplace-and-discovery">Part 4: Marketplace and discovery</h2><p>In this part, we're going to build the buyer-facing side of the project. We'll work on searchable product catalog, product detail pages, seller profiles, a like system, and cookie ratings.</p><h3 id="schema-update-for-ratings">Schema update for ratings</h3><p>We want our buyers to be able to rate the products they purchase, so let's build a rating system. But first, we need to update our schema. Go to <code>prisma</code> and update <code>schema.prisma</code> by adding the following model:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">schema.prisma</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-prisma">model Rating {
id String @id @default(cuid())
userId String
productId String
cookies Float // 0.5-5 in 0.5 increments
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
@@unique([userId, productId])
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Then add the relation field to both existing models:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">schema.prisma</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-prisma">model User {
// ... add the line below to the models
ratings Rating[]
}
model Product {
// ... add the line below to the models
ratings Rating[]
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>Run the migration:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Terminal</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">npx prisma generate && npx prisma db push</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="product-cards">Product cards</h3><p>We'll use the same product cards in homepage, catalog, and seller profiles. Go to <code>src/components</code> and create a file called <code>product-card.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">product-card.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Link from "next/link";
import { Heart, FileText, Image, Video, ExternalLink } from "lucide-react";
import { CookieDisplay } from "@/components/cookie-rating";
import { formatPrice } from "@/lib/utils";
import { CATEGORY_MAP } from "@/constants/categories";
interface ProductCardProps {
product: {
slug: string;
title: string;
price: number;
category: string;
thumbnailUrl: string | null;
_count: {
likes: number;
files: number;
ratings?: number;
};
avgRating?: number;
sellerProfile: {
username: string;
user: {
name: string | null;
avatar: string | null;
};
};
};
}
export function ProductCard({ product }: ProductCardProps) {
const categoryInfo = CATEGORY_MAP[product.category];
return (
<Link
href={`/products/${product.slug}`}
className="group block overflow-hidden rounded-xl border border-border bg-surface transition-all hover:-translate-y-0.5 hover:shadow-lg"
>
<div className="relative aspect-[4/3] overflow-hidden bg-surface-elevated">
{product.thumbnailUrl ? (
<img
src={product.thumbnailUrl}
alt={product.title}
className="h-full w-full object-cover transition-transform group-hover:scale-105"
/>
) : (
<div className="flex h-full items-center justify-center">
<FileText className="h-12 w-12 text-text-secondary/30" aria-hidden="true" />
</div>
)}
<div className="absolute right-3 top-3">
<span
className={`rounded-lg px-3 py-1.5 text-sm font-bold ${
product.price === 0
? "bg-success/90 text-white"
: "bg-black/70 text-white backdrop-blur-sm"
}`}
>
{formatPrice(product.price)}
</span>
</div>
</div>
<div className="p-4">
<h3 className="line-clamp-2 text-base font-semibold text-text-primary">
{product.title}
</h3>
<p className="mt-1 text-sm text-text-secondary">
by @{product.sellerProfile.username}
</p>
<div className="mt-3 flex items-center gap-3 text-xs text-text-secondary">
<span className="inline-flex items-center gap-1">
<Heart className="h-3.5 w-3.5" aria-hidden="true" />
{product._count.likes}
</span>
{product.avgRating && product.avgRating > 0 && (
<CookieDisplay average={product.avgRating} count={product._count.ratings ?? 0} />
)}
<span>
{product._count.files} {product._count.files === 1 ? "file" : "files"}
</span>
{categoryInfo && (
<span className="bg-surface-elevated px-2 py-0.5">
{categoryInfo.label}
</span>
)}
</div>
</div>
</Link>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="marketplace">Marketplace</h3><p>Our marketplace will have a search bar, category filter pills, and a paginated product grid. Go to <code>src/app/products</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { prisma } from "@/lib/prisma";
import { ProductCard } from "@/components/product-card";
import { CATEGORIES } from "@/constants/categories";
import { Search } from "lucide-react";
import Link from "next/link";
import type { Category, Prisma } from "@/generated/prisma/client";
const PRODUCTS_PER_PAGE = 12;
export default async function ProductsPage({
searchParams,
}: {
searchParams: Promise<{ category?: string; q?: string; page?: string }>;
}) {
const { category, q, page } = await searchParams;
const currentPage = Math.max(1, parseInt(page || "1"));
const where: Prisma.ProductWhereInput = {
status: "PUBLISHED",
...(category && { category: category as Category }),
...(q && {
OR: [
{ title: { contains: q, mode: "insensitive" as const } },
{ description: { contains: q, mode: "insensitive" as const } },
],
}),
};
const [products, total] = await Promise.all([
prisma.product.findMany({
where,
orderBy: { createdAt: "desc" },
skip: (currentPage - 1) * PRODUCTS_PER_PAGE,
take: PRODUCTS_PER_PAGE,
include: {
sellerProfile: { include: { user: true } },
ratings: { select: { cookies: true } },
_count: { select: { likes: true, files: true, ratings: true } },
},
}),
prisma.product.count({ where }),
]);
const totalPages = Math.ceil(total / PRODUCTS_PER_PAGE);
return (
<div className="mx-auto max-w-7xl px-4 py-8">
<div className="mb-8">
<form role="search" aria-label="Search products" className="relative">
<label htmlFor="product-search" className="sr-only">Search products</label>
<Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-text-secondary" aria-hidden="true" />
<input
type="search"
id="product-search"
name="q"
defaultValue={q}
placeholder="Search digital products..."
className="w-full rounded-xl border border-border bg-surface py-3.5 pl-12 pr-4 text-text-primary placeholder:text-text-secondary focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20"
/>
{category && <input type="hidden" name="category" value={category} />}
</form>
<div className="mt-4 flex flex-wrap gap-2">
<Link
href="/products"
className={`px-4 py-2.5 text-sm font-medium transition-colors ${
!category
? "bg-accent text-white"
: "bg-surface-elevated text-text-secondary hover:text-text-primary"
}`}
>
All
</Link>
{CATEGORIES.map((cat) => (
<Link
key={cat.value}
href={`/products?category=${cat.value}${q ? `&q=${q}` : ""}`}
className={`px-4 py-2.5 text-sm font-medium transition-colors ${
category === cat.value
? "bg-accent text-white"
: "bg-surface-elevated text-text-secondary hover:text-text-primary"
}`}
>
{cat.label}
</Link>
))}
</div>
</div>
{/* Product grid */}
{products.length === 0 ? (
<div className="py-24 text-center">
<p className="text-lg text-text-secondary">No products found.</p>
<Link href="/products" className="mt-2 text-sm text-accent hover:underline">
Clear filters
</Link>
</div>
) : (
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{products.map((product) => (
<ProductCard
key={product.id}
product={{
...product,
avgRating:
product._count.ratings > 0
? product.ratings.reduce((s, r) => s + r.cookies, 0) / product._count.ratings
: 0,
}}
/>
))}
</div>
)}
{/* Pagination */}
{totalPages > 1 && (
<div className="mt-12 flex justify-center gap-2">
{Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
<Link
key={p}
href={`/products?page=${p}${category ? `&category=${category}` : ""}${q ? `&q=${q}` : ""}`}
aria-label={`Page ${p}`}
aria-current={p === currentPage ? "page" : undefined}
className={`rounded-lg px-4 py-2.5 text-sm font-medium transition-colors ${
p === currentPage
? "bg-accent text-white"
: "bg-surface-elevated text-text-secondary hover:text-text-primary"
}`}
>
{p}
</Link>
))}
</div>
)}
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="product-detail-page">Product detail page</h3><p>The product detail pages should provide enough information to the buyers so that they can easily decide whether to purchase or not. We need to display the product description, the files list, seller info, ratings, and a purchase card.</p><p>To build it, go to <code>src/app/products/[slug]</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { notFound, redirect } from "next/navigation";
import Link from "next/link";
import { FileText, Image as ImageIcon, Video, ExternalLink, Download, Lock } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { getAuthUser } from "@/lib/auth";
import { formatPrice, formatFileSize } from "@/lib/utils";
import { LikeButton } from "@/components/like-button";
import { CookieRating } from "@/components/cookie-rating";
import { CATEGORY_MAP } from "@/constants/categories";
const FILE_ICONS: Record<string, typeof FileText> = {
"application/pdf": FileText,
"image/": ImageIcon,
"video/": Video,
};
function getFileIcon(mimeType: string) {
for (const [prefix, icon] of Object.entries(FILE_ICONS)) {
if (mimeType.startsWith(prefix)) return icon;
}
return FileText;
}
export default async function ProductPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const product = await prisma.product.findUnique({
where: { slug },
include: {
sellerProfile: { include: { user: true } },
files: { orderBy: { displayOrder: "asc" } },
ratings: { select: { cookies: true } },
_count: { select: { likes: true, purchases: true, ratings: true } },
},
});
if (!product || product.status !== "PUBLISHED") notFound();
const user = await getAuthUser();
const purchase = user
? await prisma.purchase.findUnique({
where: {
userId_productId: { userId: user.id, productId: product.id },
},
})
: null;
const liked = user
? !!(await prisma.like.findUnique({
where: {
userId_productId: { userId: user.id, productId: product.id },
},
}))
: false;
const userRating = user
? await prisma.rating.findUnique({
where: { userId_productId: { userId: user.id, productId: product.id } },
})
: null;
const avgRating =
product._count.ratings > 0
? product.ratings.reduce((sum, r) => sum + r.cookies, 0) / product._count.ratings
: 0;
const categoryInfo = CATEGORY_MAP[product.category];
const seller = product.sellerProfile;
return (
<div className="mx-auto max-w-7xl px-4 py-8 pb-24 lg:pb-8">
<div className="grid gap-8 lg:grid-cols-[1fr_380px]">
<div>
{product.thumbnailUrl && (
<div className="overflow-hidden rounded-xl">
<img
src={product.thumbnailUrl}
alt={product.title}
className="w-full object-cover"
/>
</div>
)}
<h1 className="mt-6 text-3xl font-bold text-text-primary">
{product.title}
</h1>
<Link
href={`/sellers/${seller.username}`}
className="mt-3 inline-flex items-center gap-3 text-sm text-text-secondary hover:text-text-primary transition-colors"
>
{seller.user.avatar && (
<img
src={seller.user.avatar}
alt={seller.user.name || "Seller avatar"}
className="h-8 w-8 rounded-full"
/>
)}
<div>
<span className="font-medium">@{seller.username}</span>
{seller.headline && (
<span className="ml-2 text-text-secondary">
· {seller.headline}
</span>
)}
</div>
</Link>
<div className="mt-4 flex items-center gap-3">
{user ? (
<LikeButton
productId={product.id}
initialLiked={liked}
initialCount={product._count.likes}
/>
) : (
<span className="inline-flex items-center gap-1.5 text-sm text-text-secondary">
♥ {product._count.likes}
</span>
)}
{categoryInfo && (
<span className="bg-surface-elevated px-3 py-1 text-xs font-medium text-text-secondary">
{categoryInfo.label}
</span>
)}
<span className="text-xs text-text-secondary">
{product._count.purchases} sales
</span>
</div>
<div className="mt-3">
<CookieRating
productId={product.id}
initialRating={userRating?.cookies ?? null}
averageRating={avgRating}
ratingCount={product._count.ratings}
canRate={!!purchase}
/>
</div>
<div className="mt-8">
<h2 className="text-lg font-semibold text-text-primary">
Description
</h2>
<p className="mt-2 whitespace-pre-wrap text-text-secondary leading-relaxed">
{product.description}
</p>
</div>
<div className="mt-8">
<h2 className="text-lg font-semibold text-text-primary">
What&apos;s included
</h2>
<div className="mt-3 space-y-2">
{product.files.map((file) => {
const Icon = getFileIcon(file.mimeType);
return (
<div
key={file.id}
className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3"
>
<Icon className="h-5 w-5 text-text-secondary" />
<span className="flex-1 text-sm font-medium text-text-primary">
{file.fileName}
</span>
<span className="text-xs text-text-secondary">
{formatFileSize(file.fileSize)}
</span>
<Lock className="h-4 w-4 text-text-secondary/50" aria-hidden="true" />
</div>
);
})}
{product.content && (
<div className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3">
<FileText className="h-5 w-5 text-text-secondary" />
<span className="flex-1 text-sm font-medium text-text-primary">
Text content included
</span>
<Lock className="h-4 w-4 text-text-secondary/50" />
</div>
)}
{product.externalUrl && (
<div className="flex items-center gap-3 rounded-lg border border-border bg-surface p-3">
<ExternalLink className="h-5 w-5 text-text-secondary" />
<span className="flex-1 text-sm font-medium text-text-primary">
External resource link
</span>
<Lock className="h-4 w-4 text-text-secondary/50" />
</div>
)}
</div>
</div>
</div>
<div className="hidden lg:block lg:sticky lg:top-24 lg:self-start">
<div className="rounded-xl border border-border bg-surface p-6">
<p className="text-center text-3xl font-bold text-text-primary">
{formatPrice(product.price)}
</p>
{purchase ? (
<Link
href={`/products/${product.slug}/download`}
className="mt-6 flex w-full items-center justify-center gap-2 rounded-lg bg-success px-6 py-3 text-sm font-semibold text-white hover:bg-success/90 transition-colors"
>
<Download className="h-4 w-4" />
Download
</Link>
) : product.price === 0 ? (
<form action={`/api/products/${product.id}/purchase`} method="POST">
<button
type="submit"
className="mt-6 w-full rounded-lg bg-success px-6 py-3 text-sm font-semibold text-white hover:bg-success/90 transition-colors"
>
Get for Free
</button>
</form>
) : product.whopCheckoutUrl ? (
<a
href={product.whopCheckoutUrl}
className="mt-6 flex w-full items-center justify-center rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-white hover:bg-accent-hover transition-colors"
>
Buy Now
</a>
) : null}
<div className="mt-4 text-center text-xs text-text-secondary">
{product.files.length} {product.files.length === 1 ? "file" : "files"} · Instant download
</div>
</div>
</div>
</div>
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-surface p-4 lg:hidden">
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
<p className="text-lg font-bold text-text-primary">
{formatPrice(product.price)}
</p>
{purchase ? (
<Link
href={`/products/${product.slug}/download`}
className="inline-flex items-center gap-2 rounded-lg bg-success px-6 py-2.5 text-sm font-semibold text-white hover:bg-success/90 transition-colors"
>
<Download className="h-4 w-4" />
Download
</Link>
) : product.price === 0 ? (
<form action={`/api/products/${product.id}/purchase`} method="POST">
<button
type="submit"
className="rounded-lg bg-success px-6 py-2.5 text-sm font-semibold text-white hover:bg-success/90 transition-colors"
>
Get for Free
</button>
</form>
) : product.whopCheckoutUrl ? (
<a
href={product.whopCheckoutUrl}
className="rounded-lg bg-accent px-6 py-2.5 text-sm font-semibold text-white hover:bg-accent-hover transition-colors"
>
Buy Now
</a>
) : null}
</div>
</div>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="like-button">Like button</h3><p>On top of the rating system, let's add a like system so that buyers can quickly show appreciation for products. Go to <code>src/components</code> and create a file called <code>like-button.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">like-button.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">"use client";
import { useState, useTransition } from "react";
import { Heart } from "lucide-react";
import { cn } from "@/lib/utils";
interface LikeButtonProps {
productId: string;
initialLiked: boolean;
initialCount: number;
}
export function LikeButton({ productId, initialLiked, initialCount }: LikeButtonProps) {
const [liked, setLiked] = useState(initialLiked);
const [count, setCount] = useState(initialCount);
const [isPending, startTransition] = useTransition();
function handleClick() {
setLiked(!liked);
setCount(liked ? count - 1 : count + 1);
startTransition(async () => {
const res = await fetch(`/api/products/${productId}/like`, { method: "POST" });
if (!res.ok) {
setLiked(liked);
setCount(count);
}
});
}
return (
<button onClick={handleClick} disabled={isPending}
aria-label={liked ? "Unlike" : "Like"}
aria-pressed={liked}
className={cn(
"inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-all",
liked
? "border-accent/30 bg-accent/10 text-accent"
: "border-border bg-surface text-text-secondary hover:border-accent/30 hover:text-accent"
)}>
<Heart className={cn("h-4 w-4 transition-transform", liked && "fill-current scale-110")} aria-hidden="true" />
{count}
</button>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<p>We also need an API route that toggles the like on and off. Go to <code>src/app/api/products/[productId]/like</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
export async function POST(
_request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const existingLike = await prisma.like.findUnique({
where: { userId_productId: { userId: session.userId, productId } },
});
if (existingLike) {
await prisma.like.delete({ where: { id: existingLike.id } });
return NextResponse.json({ liked: false });
}
await prisma.like.create({ data: { userId: session.userId, productId } });
return NextResponse.json({ liked: true });
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="rating-api-route">Rating API route</h3><p>Now, let's build the API route that will validate the rating value (within 0.5 and 5), check for a purchase, and upsert the rating. Go to <code>src/app/api/products/[productId]/rate</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
const VALID_RATINGS = [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5];
const rateSchema = z.object({
cookies: z.number().refine((v) => VALID_RATINGS.includes(v), {
message: "Rating must be 0.5-5 in 0.5 increments",
}),
});
export async function POST(
request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const purchase = await prisma.purchase.findUnique({
where: { userId_productId: { userId: session.userId, productId } },
});
if (!purchase) {
return NextResponse.json({ error: "Purchase required" }, { status: 403 });
}
const body = await request.json();
const parsed = rateSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json({ error: "Invalid rating" }, { status: 400 });
}
const rating = await prisma.rating.upsert({
where: { userId_productId: { userId: session.userId, productId } },
create: { userId: session.userId, productId, cookies: parsed.data.cookies },
update: { cookies: parsed.data.cookies },
});
return NextResponse.json(rating);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="rating-component">Rating component</h3><p>In this project, we'll use cookies instead of classic stars for ratings. So, we need a component that renders custom SVG cookies with three states: full, half-bitten, and empty.</p><p>Go to <code>src/components</code> and create a file called <code>cookie-rating.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">cookie-rating.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">"use client";
import { useState } from "react";
import { cn } from "@/lib/utils";
function CookieFull({ className }: { className?: string }) {
return (
<svg viewBox="0 0 24 24" className={className} fill="none">
<circle cx="12" cy="12" r="10" fill="currentColor" />
<circle cx="8" cy="8" r="1.5" fill="var(--color-surface)" />
<circle cx="14" cy="7" r="1.2" fill="var(--color-surface)" />
<circle cx="10" cy="13" r="1.3" fill="var(--color-surface)" />
<circle cx="15" cy="14" r="1.5" fill="var(--color-surface)" />
<circle cx="7" cy="15" r="1" fill="var(--color-surface)" />
<circle cx="16" cy="10" r="1" fill="var(--color-surface)" />
</svg>
);
}
function CookieHalf({ className }: { className?: string }) {
return (
<svg viewBox="0 0 24 24" className={className} fill="none">
<path
d="M12 2 A10 10 0 1 0 19 18 A7 7 0 0 1 19 6 A10 10 0 0 0 12 2z"
fill="currentColor"
/>
<circle cx="6.5" cy="9" r="1.5" fill="var(--color-surface)" />
<circle cx="10" cy="15" r="1.4" fill="var(--color-surface)" />
<circle cx="5" cy="14.5" r="1" fill="var(--color-surface)" />
<circle cx="21" cy="9" r="0.8" fill="currentColor" />
<circle cx="22" cy="13" r="0.6" fill="currentColor" />
<circle cx="20" cy="16" r="0.5" fill="currentColor" />
</svg>
);
}
function CookieEmpty({ className }: { className?: string }) {
return (
<svg viewBox="0 0 24 24" className={className} fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
<circle cx="8" cy="8" r="1.5" stroke="currentColor" strokeWidth="0.8" />
<circle cx="14" cy="7" r="1.2" stroke="currentColor" strokeWidth="0.8" />
<circle cx="10" cy="13" r="1.3" stroke="currentColor" strokeWidth="0.8" />
<circle cx="15" cy="14" r="1.5" stroke="currentColor" strokeWidth="0.8" />
<circle cx="7" cy="15" r="1" stroke="currentColor" strokeWidth="0.8" />
</svg>
);
}
interface CookieRatingProps {
productId: string;
initialRating: number | null;
averageRating: number;
ratingCount: number;
canRate: boolean;
}
export function CookieRating({
productId,
initialRating,
averageRating,
ratingCount,
canRate,
}: CookieRatingProps) {
const [rating, setRating] = useState(initialRating);
const [hover, setHover] = useState<number | null>(null);
const [saving, setSaving] = useState(false);
async function handleRate(cookies: number) {
if (!canRate || saving) return;
setSaving(true);
setRating(cookies);
try {
const res = await fetch(`/api/products/${productId}/rate`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ cookies }),
});
if (!res.ok) setRating(initialRating);
} catch {
setRating(initialRating);
} finally {
setSaving(false);
}
}
function renderCookie(position: number, value: number) {
const full = position;
const half = position - 0.5;
if (value >= full) {
return <CookieFull className="h-full w-full" />;
} else if (value >= half) {
return <CookieHalf className="h-full w-full" />;
}
return <CookieEmpty className="h-full w-full" />;
}
if (!canRate) {
return (
<div className="flex items-center gap-1.5">
<div className="flex gap-0.5">
{[1, 2, 3, 4, 5].map((pos) => (
<div
key={pos}
className={cn(
"h-6 w-6",
Math.round(averageRating * 2) / 2 >= pos - 0.5
? "text-warning"
: "text-border"
)}
>
{renderCookie(pos, Math.round(averageRating * 2) / 2)}
</div>
))}
</div>
<span className="text-xs text-text-secondary">
{averageRating > 0 ? averageRating.toFixed(1) : "No ratings"}{" "}
{ratingCount > 0 && `(${ratingCount})`}
</span>
</div>
);
}
const display = hover ?? rating ?? 0;
return (
<div className="flex items-center gap-2">
<div className="flex">
{[1, 2, 3, 4, 5].map((pos) => (
<div key={pos} className="relative h-7 w-7">
<button
type="button"
disabled={saving}
onClick={() => handleRate(pos - 0.5)}
onMouseEnter={() => setHover(pos - 0.5)}
onMouseLeave={() => setHover(null)}
aria-label={`Rate ${pos - 0.5} cookies`}
className="absolute inset-y-0 left-0 w-1/2 z-10 cursor-pointer"
/>
<button
type="button"
disabled={saving}
onClick={() => handleRate(pos)}
onMouseEnter={() => setHover(pos)}
onMouseLeave={() => setHover(null)}
aria-label={`Rate ${pos} cookies`}
className="absolute inset-y-0 right-0 w-1/2 z-10 cursor-pointer"
/>
<div
className={cn(
"h-full w-full pointer-events-none transition-colors",
display >= pos - 0.5 ? "text-warning" : "text-border"
)}
>
{renderCookie(pos, display)}
</div>
</div>
))}
</div>
<span className="text-xs text-text-secondary">
{rating
? `${rating} cookie${rating !== 1 ? "s" : ""}`
: "Rate this product"}
</span>
</div>
);
}
export function CookieDisplay({
average,
count,
}: {
average: number;
count: number;
}) {
if (count === 0) return null;
return (
<div className="flex items-center gap-1">
<CookieFull className="h-3.5 w-3.5 text-warning" />
<span className="text-xs text-text-secondary">
{average.toFixed(1)}
</span>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="seller-profiles">Seller profiles</h3><p>Lastly, let's build the seller profiles where users can see seller info and their products. Go to <code>src/app/sellers/[username]</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { ProductCard } from "@/components/product-card";
export default async function SellerProfilePage({
params,
}: {
params: Promise<{ username: string }>;
}) {
const { username } = await params;
const sellerProfile = await prisma.sellerProfile.findUnique({
where: { username },
include: {
user: true,
products: {
where: { status: "PUBLISHED" },
orderBy: { createdAt: "desc" },
include: {
sellerProfile: { include: { user: true } },
_count: { select: { likes: true, files: true, purchases: true } },
},
},
},
});
if (!sellerProfile) notFound();
const totalSales = sellerProfile.products.reduce(
(sum: number, p) => sum + p._count.purchases, 0
);
return (
<div className="mx-auto max-w-7xl px-4 py-8">
<div className="rounded-xl bg-gradient-to-br from-accent/20 to-accent/5 p-8">
<div className="flex items-center gap-6">
{sellerProfile.user.avatar && (
<img src={sellerProfile.user.avatar} alt={sellerProfile.user.name || "Seller avatar"}
className="h-20 w-20 rounded-full border-4 border-surface" />
)}
<div>
<h1 className="text-2xl font-bold text-text-primary">
{sellerProfile.user.name || `@${sellerProfile.username}`}
</h1>
<p className="text-sm text-text-secondary">@{sellerProfile.username}</p>
{sellerProfile.headline && (
<p className="mt-1 text-sm text-text-secondary">{sellerProfile.headline}</p>
)}
</div>
</div>
{sellerProfile.bio && (
<p className="mt-4 max-w-2xl text-sm text-text-secondary leading-relaxed">
{sellerProfile.bio}
</p>
)}
<div className="mt-4 flex gap-6 text-sm text-text-secondary">
<span><strong className="text-text-primary">{sellerProfile.products.length}</strong> products</span>
<span><strong className="text-text-primary">{totalSales}</strong> sales</span>
</div>
</div>
<div className="mt-8">
<h2 className="text-xl font-bold text-text-primary">Products</h2>
{sellerProfile.products.length === 0 ? (
<p className="mt-4 text-text-secondary">No products published yet.</p>
) : (
<div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{sellerProfile.products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
)}
</div>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="checkpoint-2">Checkpoint</h3><p>Now, let's the marketplace end-to-end:</p><ol><li>Navigate to <code>/products</code>. You should see your published products. Try searching by title and filtering by category</li><li>Click a product to open <code>/products/[slug]</code>. Verify the description, file list, seller info, and purchase card are all showing</li><li>Click the heart icon to like a product, the count should update instantly</li><li>Visit <code>/sellers/[username]</code>. The seller's profile should show their published products and stats</li><li>If you have a purchased product, try clicking the cookies on the product detail page to leave a rating</li></ol><h2 id="part-5-checkout-payments-and-file-delivery">Part 5: Checkout, payments, and file delivery</h2><p>In this section, we're going to build the purchasing flow. Paid products will redirect users to a Whop-hosted checkout, and free products just create a purchase record.</p><h3 id="how-the-payment-flow-works">How the payment flow works</h3><p>When a buyer navigates to a product page and clicks "Buy Now":</p><ol><li>The browser navigates to Whop-hosted checkout and completes payment</li><li>Whop splits the payment: 5% to your platform account, 95% to the seller's connected account</li><li>Whop fires a successful payment webhook to your <code>/api/webhooks/whop</code> endpoint</li><li>Your webhook handler creates a <code>Purchase</code> record</li></ol><h3 id="free-product-purchases">Free product purchases</h3><p>Free products created on our project doesn't need a checkout flow, so we can just create a purchase record directly and redirect the user to the download page. Go to <code>src/app/api/products/[productId]/purchase</code> and create a file called <code>route.ts</code> with the content:</p><pre><code class="language-ts">import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
import { env } from "@/lib/env";
export async function POST(
_request: NextRequest,
{ params }: { params: Promise<{ productId: string }> }
) {
const { productId } = await params;
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const product = await prisma.product.findUnique({
where: { id: productId },
});
if (!product || product.status !== "PUBLISHED") {
return NextResponse.json({ error: "Product not found" }, { status: 404 });
}
if (product.price !== 0) {
return NextResponse.json(
{ error: "This product requires payment. Use the checkout link." },
{ status: 400 }
);
}
const existingPurchase = await prisma.purchase.findUnique({
where: {
userId_productId: {
userId: session.userId,
productId,
},
},
});
if (existingPurchase) {
return NextResponse.redirect(
`${env.NEXT_PUBLIC_APP_URL}/products/${product.slug}/download`
);
}
await prisma.purchase.create({
data: {
userId: session.userId,
productId,
pricePaid: 0,
},
});
return NextResponse.redirect(
`${env.NEXT_PUBLIC_APP_URL}/products/${product.slug}/download`
);
}
</code></pre><h3 id="webhook-setup">Webhook setup</h3><p>Before we build the webhook handler, let's create a webhook in Whop and get its secret:</p><ol><li>Go to your Whop sandbox dashboard and open the Developer page</li><li>There, find the Webhooks section and click the <strong>Create webhook</strong> button</li><li>Set the endpoint URL to <code>https://your-vercel-url.vercel.app/api/webhooks/whop</code> (replace with your production URL)</li><li>Enable the <code>payment_succeeded</code> event and click <strong>Save</strong></li><li>Copy the webhook secret that starts with <code>ws_</code> and add it to Vercel under the <code>WHOP_WEBHOOK_SECRET</code> environment variable</li><li>Pull the environment variables to local using the <code>vercel env pull .env.local</code> command</li></ol><h3 id="webhook-handler">Webhook handler</h3><p>Our webhook handler will verify the request signature, check for idempotency (for when webhooks delivered more than once), and creates a purchase record. Go to <code>src/app/api/webhooks/whop</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { getWhop } from "@/lib/whop";
type WhopEvent = {
type: string;
id: string;
data: Record<string, unknown>;
};
export async function POST(request: NextRequest) {
const bodyText = await request.text();
const headerObj = Object.fromEntries(request.headers);
const whop = getWhop();
let webhookData: WhopEvent;
try {
webhookData = whop.webhooks.unwrap(bodyText, {
headers: headerObj,
}) as unknown as WhopEvent;
} catch (err) {
console.error("Webhook verification failed:", err);
try {
webhookData = JSON.parse(bodyText) as WhopEvent;
} catch {
return NextResponse.json({ error: "Invalid webhook" }, { status: 400 });
}
}
const eventId = webhookData.id;
if (!eventId) {
return NextResponse.json({ error: "Missing event ID" }, { status: 400 });
}
const existing = await prisma.webhookEvent.findUnique({
where: { id: eventId },
});
if (existing) {
return NextResponse.json({ status: "already_processed" });
}
if (webhookData.type === "payment.succeeded") {
const payment = webhookData.data;
const plan = payment?.plan as Record<string, unknown> | undefined;
const user = payment?.user as Record<string, unknown> | undefined;
const planId = plan?.id as string | undefined;
const whopUserId = user?.id as string | undefined;
if (!planId || !whopUserId) {
console.error("Missing plan or user on payment webhook:", JSON.stringify(webhookData.data, null, 2));
return NextResponse.json({ error: "Missing data" }, { status: 400 });
}
const product = await prisma.product.findFirst({
where: { whopPlanId: planId },
});
if (!product) {
console.error("No product found for plan:", planId);
return NextResponse.json({ error: "Product not found" }, { status: 404 });
}
const dbUser = await prisma.user.findUnique({
where: { whopUserId },
});
if (!dbUser) {
console.error("No user found for Whop user:", whopUserId);
return NextResponse.json({ error: "User not found" }, { status: 404 });
}
await prisma.purchase.upsert({
where: {
userId_productId: {
userId: dbUser.id,
productId: product.id,
},
},
update: {},
create: {
userId: dbUser.id,
productId: product.id,
whopPaymentId: payment.id as string,
pricePaid: Math.round(((payment.subtotal as number) ?? 0) * 100),
},
});
await prisma.webhookEvent.create({ data: { id: eventId } });
}
return NextResponse.json({ status: "ok" });
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="configurable-platform-fee">Configurable platform fee</h3><p>In this project, we set our platform fee via the <code>PLATFORM_FEE_PERCENT</code> environment variable. While the default is 5% to match Gumroad's pricing, you can always change it by editing the environment variable:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">.env</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-bash">PLATFORM_FEE_PERCENT=10 # 10% platform fee</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="file-delivery">File delivery</h3><p>After building the purchase flow, let's work on the file delivery system. The download page after purchase checks whether the user has purchased the product or not. To build it, go to <code>src/app/products/[slug]/download</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { notFound, redirect } from "next/navigation";
import Link from "next/link";
import { Download, FileText, Image as ImageIcon, Video, ExternalLink, ArrowLeft } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { requireAuth } from "@/lib/auth";
import { formatFileSize } from "@/lib/utils";
function getFileIcon(mimeType: string) {
if (mimeType.startsWith("image/")) return ImageIcon;
if (mimeType.startsWith("video/")) return Video;
return FileText;
}
export default async function DownloadPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const user = await requireAuth();
const product = await prisma.product.findUnique({
where: { slug },
include: {
files: { orderBy: { displayOrder: "asc" } },
sellerProfile: { include: { user: true } },
},
});
if (!product) notFound();
const purchase = await prisma.purchase.findUnique({
where: { userId_productId: { userId: user.id, productId: product.id } },
});
if (!purchase) {
redirect(`/products/${slug}`);
}
return (
<div className="mx-auto max-w-3xl px-4 py-8">
<Link href={`/products/${slug}`}
className="inline-flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors">
<ArrowLeft className="h-4 w-4" /> Back to product
</Link>
<div className="mt-6">
<p className="text-sm font-medium text-success">Purchase confirmed</p>
<h1 className="mt-1 text-2xl font-bold text-text-primary">{product.title}</h1>
<p className="mt-1 text-sm text-text-secondary">
by @{product.sellerProfile.username}
</p>
</div>
{product.files.length > 0 && (
<div className="mt-8">
<h2 className="text-lg font-semibold text-text-primary">Files</h2>
<div className="mt-3 space-y-2">
{product.files.map((file) => {
const Icon = getFileIcon(file.mimeType);
return (
<div key={file.id}
className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4">
<Icon className="h-5 w-5 text-text-secondary" />
<div className="flex-1">
<p className="text-sm font-medium text-text-primary">{file.fileName}</p>
<p className="text-xs text-text-secondary">
{formatFileSize(file.fileSize)} · {file.mimeType}
</p>
</div>
<a href={file.fileUrl} download={file.fileName}
target="_blank" rel="noopener noreferrer"
aria-label={`Download ${file.fileName}`}
className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2.5 text-sm font-medium text-white hover:bg-accent-hover transition-colors">
<Download className="h-4 w-4" aria-hidden="true" /> Download
</a>
</div>
);
})}
</div>
</div>
)}
{product.content && (
<div className="mt-8">
<h2 className="text-lg font-semibold text-text-primary">Content</h2>
<div className="mt-3 rounded-lg border border-border bg-surface p-6">
<div className="prose prose-sm max-w-none text-text-secondary whitespace-pre-wrap">
{product.content}
</div>
</div>
</div>
)}
{product.externalUrl && (
<div className="mt-8">
<h2 className="text-lg font-semibold text-text-primary">External Resource</h2>
<a href={product.externalUrl} target="_blank" rel="noopener noreferrer"
className="mt-3 flex items-center gap-3 rounded-lg border border-border bg-surface p-4 text-accent hover:bg-surface-elevated transition-colors">
<ExternalLink className="h-5 w-5" />
<span className="text-sm font-medium">{product.externalUrl}</span>
</a>
</div>
)}
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="checkpoint-3">Checkpoint</h3><p>Test the full purchase and download flow:</p><ol><li>Create a free product, publish it, then click "Get for Free." You should be redirected to the download page immediately</li><li>Create a paid product, publish it, sign in as a different user (or use incognito), and click "Buy Now"</li><li>Complete payment on Whop's checkout (test card: <code>4242 4242 4242 4242</code>, any future date, any CVC)</li><li>Navigate back to the product page, the button should now say "Download"</li><li>Click "Download" and verify you see the files, text content, and external links</li><li>Open an incognito window and try the download URL without signing in. You should be redirected to sign-in</li><li>Sign in as a user who hasn't purchase. You should be redirected to the product page</li></ol><h2 id="part-6-seller-dashboard-buyer-dashboard-and-payouts">Part 6: Seller dashboard, buyer dashboard, and payouts</h2><p>In this final section, we're going to build the seller/buyer dashboards and connect the payout system.</p><h3 id="seller-dashboard">Seller dashboard</h3><p>We want the seller dashboard to show earnings, sales statistics, and a list of all products. Go to <code>src/app/sell/dashboard</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Link from "next/link";
import { Plus, DollarSign, ShoppingBag, Package, Heart } from "lucide-react";
import { requireSeller } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatPrice } from "@/lib/utils";
import { env } from "@/lib/env";
import { ProfileEditor } from "./profile-editor";
export default async function SellerDashboardPage() {
const { sellerProfile } = await requireSeller();
const products = await prisma.product.findMany({
where: { sellerProfileId: sellerProfile.id },
orderBy: { createdAt: "desc" },
include: {
_count: { select: { purchases: true, likes: true } },
purchases: { select: { pricePaid: true } },
},
});
const totalSales = products.reduce(
(sum: number, p) => sum + p._count.purchases, 0
);
const totalLikes = products.reduce(
(sum: number, p) => sum + p._count.likes, 0
);
const totalEarnings = products.reduce(
(sum: number, p) =>
sum + p.purchases.reduce((s: number, pur) => s + pur.pricePaid, 0),
0
);
const feePercent = env.PLATFORM_FEE_PERCENT;
const netEarnings = Math.round(totalEarnings * ((100 - feePercent) / 100));
return (
<div className="mx-auto max-w-7xl px-4 py-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-text-primary">Seller Dashboard</h1>
<p className="mt-1 text-sm text-text-secondary">
@{sellerProfile.username}
{sellerProfile.headline && (
<span className="ml-2">· {sellerProfile.headline}</span>
)}
</p>
<ProfileEditor
headline={sellerProfile.headline}
bio={sellerProfile.bio}
/>
</div>
<Link href="/sell/products/new"
className="inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2.5 text-sm font-semibold text-white hover:bg-accent-hover transition-colors">
<Plus className="h-4 w-4" /> New Product
</Link>
</div>
{/* Stats */}
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="rounded-xl border border-border bg-surface p-5">
<div className="flex items-center gap-3">
<DollarSign className="h-5 w-5 text-success" />
<span className="text-sm text-text-secondary">Net Earnings</span>
</div>
<p className="mt-2 text-2xl font-bold text-text-primary">
{formatPrice(netEarnings)}
</p>
</div>
<div className="rounded-xl border border-border bg-surface p-5">
<div className="flex items-center gap-3">
<ShoppingBag className="h-5 w-5 text-accent" />
<span className="text-sm text-text-secondary">Total Sales</span>
</div>
<p className="mt-2 text-2xl font-bold text-text-primary">{totalSales}</p>
</div>
<div className="rounded-xl border border-border bg-surface p-5">
<div className="flex items-center gap-3">
<Package className="h-5 w-5 text-warning" />
<span className="text-sm text-text-secondary">Products</span>
</div>
<p className="mt-2 text-2xl font-bold text-text-primary">{products.length}</p>
</div>
<div className="rounded-xl border border-border bg-surface p-5">
<div className="flex items-center gap-3">
<Heart className="h-5 w-5 text-accent" />
<span className="text-sm text-text-secondary">Total Likes</span>
</div>
<p className="mt-2 text-2xl font-bold text-text-primary">{totalLikes}</p>
</div>
</div>
{/* Product list */}
<div className="mt-8">
<h2 className="text-lg font-semibold text-text-primary">Your Products</h2>
{products.length === 0 ? (
<div className="mt-6 rounded-xl border border-dashed border-border p-12 text-center">
<Package className="mx-auto h-12 w-12 text-text-secondary/30" />
<p className="mt-4 text-text-secondary">
No products yet. Create your first product to start selling.
</p>
<Link href="/sell/products/new"
className="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-white hover:bg-accent-hover transition-colors">
<Plus className="h-4 w-4" /> Create Product
</Link>
</div>
) : (
<div className="mt-4 space-y-3">
{products.map((product) => {
const revenue = product.purchases.reduce(
(s: number, p) => s + p.pricePaid, 0
);
return (
<div key={product.id}
className="flex items-center gap-4 rounded-xl border border-border bg-surface p-4">
<div className="h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-surface-elevated">
{product.thumbnailUrl ? (
<img src={product.thumbnailUrl} alt="" className="h-full w-full object-cover" />
) : (
<div className="flex h-full items-center justify-center">
<Package className="h-6 w-6 text-text-secondary/30" />
</div>
)}
</div>
<div className="flex-1 min-w-0">
<p className="truncate text-sm font-semibold text-text-primary">{product.title}</p>
<p className="text-xs text-text-secondary">
{formatPrice(product.price)} · {product._count.purchases} sales · {formatPrice(revenue)} revenue
</p>
</div>
<span className={`px-3 py-1 text-xs font-medium ${
product.status === "PUBLISHED"
? "bg-success/10 text-success"
: "bg-warning/10 text-warning"
}`}>
{product.status}
</span>
<div className="flex gap-2">
<Link href={`/sell/products/${product.id}/edit`}
className="rounded-lg border border-border px-3 py-2.5 text-xs font-medium text-text-secondary hover:text-text-primary transition-colors">
Edit
</Link>
{product.status === "PUBLISHED" && (
<Link href={`/products/${product.slug}`}
className="rounded-lg border border-border px-3 py-2.5 text-xs font-medium text-text-secondary hover:text-text-primary transition-colors">
View
</Link>
)}
</div>
</div>
);
})}
</div>
)}
</div>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="payouts">Payouts</h3><p>In this project, we'll redirect sellers to Whop's payout portal to withdraw earnings. To send a seller to the payout portal, we'll generate a link using Whop's account links API. You could add a "Manage Payouts" button to the seller dashboard that runs this code and redirects:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">Payouts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">const accountLink = await getWhop().accountLinks.create({
company_id: sellerProfile.whopCompanyId,
use_case: "payouts_portal",
return_url: `${process.env.NEXT_PUBLIC_APP_URL}/sell/dashboard`,
refresh_url: `${process.env.NEXT_PUBLIC_APP_URL}/sell/dashboard?refresh=true`,
});
// Redirect seller to accountLink.url</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="seller-profile-editing">Seller profile editing</h3><p>Also in the dashboard, we'll let sellers edit their headline and bio, so, let's build the API route for it. Go to <code>src/app/api/sell/profile</code> and create a file called <code>route.ts</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">route.ts</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { prisma } from "@/lib/prisma";
import { getSession } from "@/lib/session";
const updateProfileSchema = z.object({
headline: z.string().max(100).optional().nullable(),
bio: z.string().max(2000).optional().nullable(),
});
export async function PATCH(request: NextRequest) {
const session = await getSession();
if (!session.userId) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
const profile = await prisma.sellerProfile.findUnique({
where: { userId: session.userId },
});
if (!profile) {
return NextResponse.json({ error: "Not a seller" }, { status: 403 });
}
const body = await request.json();
const parsed = updateProfileSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json({ error: "Validation failed" }, { status: 400 });
}
const updated = await prisma.sellerProfile.update({
where: { id: profile.id },
data: {
headline: parsed.data.headline ?? null,
bio: parsed.data.bio ?? null,
},
});
return NextResponse.json(updated);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="buyer-dashboard">Buyer dashboard</h3><p>Now, let's move on to the buyer dashboard. We want it to show all purchased products with download links. Go to <code>src/app/dashboard</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Link from "next/link";
import { Download, Package, ShoppingBag } from "lucide-react";
import { requireAuth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatPrice } from "@/lib/utils";
export default async function BuyerDashboardPage() {
const user = await requireAuth();
const purchases = await prisma.purchase.findMany({
where: { userId: user.id },
orderBy: { createdAt: "desc" },
include: {
product: {
include: {
sellerProfile: { include: { user: true } },
_count: { select: { files: true } },
},
},
},
});
return (
<div className="mx-auto max-w-7xl px-4 py-8">
<div className="flex items-center gap-3">
<ShoppingBag className="h-6 w-6 text-accent" />
<h1 className="text-2xl font-bold text-text-primary">My Purchases</h1>
</div>
{purchases.length === 0 ? (
<div className="mt-12 text-center">
<Package className="mx-auto h-16 w-16 text-text-secondary/20" />
<p className="mt-4 text-lg text-text-secondary">No purchases yet.</p>
<Link href="/products"
className="mt-4 inline-block rounded-lg bg-accent px-6 py-2.5 text-sm font-semibold text-white hover:bg-accent-hover transition-colors">
Browse Products
</Link>
</div>
) : (
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{purchases.map((purchase) => (
<div key={purchase.id}
className="rounded-xl border border-border bg-surface overflow-hidden">
<div className="aspect-[4/3] bg-surface-elevated">
{purchase.product.thumbnailUrl ? (
<img src={purchase.product.thumbnailUrl} alt=""
className="h-full w-full object-cover" />
) : (
<div className="flex h-full items-center justify-center">
<Package className="h-12 w-12 text-text-secondary/20" />
</div>
)}
</div>
<div className="p-4">
<h3 className="font-semibold text-text-primary">
{purchase.product.title}
</h3>
<p className="mt-1 text-xs text-text-secondary">
by @{purchase.product.sellerProfile.username} ·{" "}
{formatPrice(purchase.pricePaid)} · {purchase.product._count.files} files
</p>
<p className="mt-0.5 text-xs text-text-secondary">
Purchased{" "}
{purchase.createdAt.toLocaleDateString("en-US", {
month: "short", day: "numeric", year: "numeric",
})}
</p>
<Link href={`/products/${purchase.product.slug}/download`}
className="mt-3 inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2.5 text-sm font-medium text-white hover:bg-accent-hover transition-colors">
<Download className="h-4 w-4" /> Download
</Link>
</div>
</div>
))}
</div>
)}
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="landing-page">Landing page</h3><p>Our landing page needs a hero with search, trending products, categories, and a seller CTA. Go to <code>src/app</code> and create a file called <code>page.tsx</code> with the content:</p>
<!--kg-card-begin: html-->
<div class="ucb-box">
<div class="ucb-header">
<span class="ucb-title">page.tsx</span>
<button class="ucb-copy" onclick="
const code = this.closest('.ucb-box').querySelector('code').innerText;
navigator.clipboard.writeText(code);
const originalText = this.innerText;
this.innerText = 'Copied!';
setTimeout(() => this.innerText = originalText, 2000);
">Copy</button>
</div>
<div class="ucb-content">
<pre class="ucb-pre"><code class="language-typescript">import Link from "next/link";
import { ArrowRight, Store, CreditCard, TrendingUp, Package, Search } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { ProductCard } from "@/components/product-card";
import { CATEGORIES } from "@/constants/categories";
export default async function HomePage() {
const trendingProducts = await prisma.product.findMany({
where: { status: "PUBLISHED" },
orderBy: { likes: { _count: "desc" } },
take: 8,
include: {
sellerProfile: { include: { user: true } },
ratings: { select: { cookies: true } },
_count: { select: { likes: true, files: true, ratings: true } },
},
});
return (
<div>
<section className="relative overflow-hidden bg-gradient-to-br from-accent/10 via-background to-background">
<div className="mx-auto max-w-7xl px-4 py-24 text-center">
<h1 className="text-5xl font-extrabold tracking-tight text-text-primary sm:text-6xl lg:text-7xl">
Sell what you create
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg text-text-secondary">
The marketplace for digital products - templates, ebooks, design
assets, and more. Upload your files, set a price, and start earning.
</p>
<form
action="/products"
method="GET"
className="mx-auto mt-10 flex max-w-lg items-center border border-border bg-surface"
>
<Search className="ml-4 h-4 w-4 text-text-secondary" aria-hidden="true" />
<input
type="search"
name="q"
placeholder="Search products..."
className="flex-1 bg-transparent px-3 py-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none"
/>
<button
type="submit"
className="bg-accent px-5 py-3 text-sm font-semibold text-white hover:bg-accent-hover transition-colors"
>
Search
</button>
</form>
<div className="mt-6 flex items-center justify-center gap-4">
<Link href="/products"
className="text-sm font-medium text-text-secondary hover:text-text-primary transition-colors">
Browse All
</Link>
<Link href="/sell"
className="inline-flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors">
Start Selling <ArrowRight className="h-4 w-4" />
</Link>
</div>
</div>
</section>
<section className="mx-auto max-w-7xl px-4 py-16">
<h2 className="text-2xl font-bold text-text-primary">Trending right now</h2>
{trendingProducts.length > 0 ? (
<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
{trendingProducts.map((product) => (
<ProductCard
key={product.id}
product={{
...product,
avgRating:
product._count.ratings > 0
? product.ratings.reduce((s, r) => s + r.cookies, 0) / product._count.ratings
: 0,
}}
/>
))}
</div>
) : (
<div className="mt-8 rounded-xl border border-dashed border-border p-12 text-center">
<Package className="mx-auto h-12 w-12 text-text-secondary/20" />
<p className="mt-4 text-text-secondary">
No products yet. Be the first to{" "}
<Link href="/sell" className="text-accent hover:underline">
list something
</Link>
.
</p>
</div>
)}
</section>
<section className="mx-auto max-w-7xl px-4 py-16">
<h2 className="text-2xl font-bold text-text-primary">Browse by category</h2>
<div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{CATEGORIES.map((cat) => (
<Link key={cat.value} href={`/products?category=${cat.value}`}
className="flex items-center gap-4 rounded-xl border border-border bg-surface p-5 transition-all hover:-translate-y-0.5 hover:shadow-md">
<cat.icon className="h-8 w-8 text-accent" />
<span className="text-base font-semibold text-text-primary">{cat.label}</span>
</Link>
))}
</div>
</section>
<section className="mx-auto max-w-7xl px-4 py-16">
<div className="rounded-2xl bg-gradient-to-br from-accent/10 to-accent/5 p-12 text-center">
<h2 className="text-3xl font-bold text-text-primary">Turn your skills into income</h2>
<p className="mx-auto mt-4 max-w-lg text-text-secondary">
Join creators selling digital products on Shelfie. We handle payments, payouts, and compliance - you keep 95% of every sale.
</p>
<div className="mt-8 flex items-center justify-center gap-8 text-sm text-text-secondary">
<div className="flex items-center gap-2">
<Store className="h-5 w-5 text-accent" /> Free to start
</div>
<div className="flex items-center gap-2">
<CreditCard className="h-5 w-5 text-accent" /> 5% platform fee
</div>
<div className="flex items-center gap-2">
<TrendingUp className="h-5 w-5 text-accent" /> Instant payouts
</div>
</div>
<Link href="/sell"
className="mt-8 inline-flex items-center gap-2 rounded-lg bg-accent px-8 py-3.5 text-sm font-semibold text-white hover:bg-accent-hover transition-colors">
Start Selling <ArrowRight className="h-4 w-4" />
</Link>
</div>
</section>
</div>
);
}</code></pre>
</div>
</div>
<!--kg-card-end: html-->
<h3 id="whats-next">What's next?</h3><p>Our project is now complete. We build a user authentication system using Whop OAuth, seller onboarding and KYC, product creation and file uploads via UploadThing, a product publishing flow with Whop checkout configurations, a marketplace with searches and categories, a whole payment system foundation via Whop Payments Network, ratings, dashboards, and more.</p><p>Here are a few ideas you can implement to further improve your project:</p><ul><li><strong>Subscription products -</strong> recurring membership options for sellers</li><li><strong>Promo codes -</strong> discount codes sellers can create</li><li><strong>Rich text editor -</strong> upgrading plain text descriptions with markdown text</li><li><strong>Analytics dashboard -</strong> product views, conversion rates, trends, and other analytical data for sellers</li><li><strong>Limited downloads -</strong> customizable download limits for buyers</li></ul><h2 id="build-your-own-platform-with-whop">Build your own platform with Whop</h2><p>Just like this Gumroad clone project, there are many other platforms you can create with Whop. Whether you're looking to create a <a href="https://whop.com/blog/build-substack-clone/" rel="noreferrer">Substack clone</a> or a <a href="https://whop.com/blog/build-ai-chatbot-saas/" rel="noreferrer">chatbot SaaS</a>, Whop's infrastructure can help you easily build your dream projects.</p><p>Grab the entire source code of this <a href="https://github.com/whopio/whop-tutorials/tree/main/gumroad-clone">Gumroad clone project on GitHub</a> and check out our developer documentation to learn more about what you can do with the Whop infrastructure.</p><div class="kg-card kg-button-card kg-align-left"><a href="https://docs.whop.com/developer/api/getting-started" class="kg-btn kg-btn-accent">Go to Whop developer documentation</a></div>]]></content:encoded></item>
These legal disclaimers are here because this hub is run by Google as a service. If you don't want to agree to these terms you can use a different hub or even run your own. The PubSubHubbub protocol is decentralized and free.
©2022 Google - Terms of Service - Privacy Policy