Morsel

Morsel is a Next.js app for publishing and unlocking paid recipes with wallet-based auth and x402 payments on Base.

Environment

Create a local .env.local from .env.example.

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID is required for production WalletConnect/Rainbow mobile wallet flows. Create one at Reown Cloud.

NEXT_PUBLIC_BASE_RPC_URL is optional locally, but production should use a dedicated browser-safe Base RPC URL instead of public defaults.

MORSEL_ACCESS_TOKEN_SECRET signs recipe access cookies after x402 settlement. If unset, the app falls back to DATABASE_URL.

MORSEL_SEED_ADMIN_SECRET enables the manual sample-data seed endpoint. Leave it unset in deployed environments unless you intentionally need admin-only reseeding.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Sample data is not created automatically during normal app startup. To seed the built-in sample creator and recipes in development, set MORSEL_SEED_ADMIN_SECRET and call:

curl -X POST http://localhost:3000/api/seed \
  -H "x-morsel-seed-secret: $MORSEL_SEED_ADMIN_SECRET"

The seed operation only upserts the known sample rows; it does not delete existing creators or recipes.

To remove a recipe (for example to reset a demo), use the admin delete endpoint with the same secret. It refuses with 409 if the recipe has been unlocked by buyers, since unlocks are kept as a record of paid access:

curl -X DELETE http://localhost:3000/api/recipes/<recipe-id> \
  -H "x-morsel-seed-secret: $MORSEL_SEED_ADMIN_SECRET"

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.