OneStopShop is an open-source online marketplace starter built with Next.js 13 App Router that lets developers launch a multi-vendor storefront where shoppers buy products and sellers list items and get paid through Stripe Connect.
What is OneStopShop?
OneStopShop is an open-source marketplace boilerplate that runs a complete storefront and seller admin on the Next.js 13 App Router. It takes a MySQL database (PlanetScale recommended) and environment variables as setup inputs, and produces a working multi-vendor storefront with product quick view, seller profiles, and Stripe Connect payment routing. The app uses React Server Components for rendering, Server Actions for mutations, Drizzle ORM for database access, Clerk for authentication, UploadThing for product image uploads, and Tailwind CSS for styling.
Key Features
- Next.js 13 App Router with React Server Components — the storefront and admin pages are server-rendered with progressive enhancement and streaming.
- Intercepted routes with parallel routing — product quick-view modals and the admin's new-product creation flow work without full page navigations.
- Server Actions — all mutations, from updating the cart to managing product listings, run through server functions.
- PlanetScale MySQL with Drizzle ORM — schema is defined with drizzle-kit, and a migration function in db.ts auto-syncs generated SQL at startup; you can also run migrations manually in the PlanetScale console.
- UploadThing — typesafe image file uploads are used for product photos.
- Clerk authentication — handles user sign-up, sign-in, and seller profile creation.
- Stripe Connect — supports marketplace fees and seller payouts; buyers can only check out products from sellers with a connected Stripe account.
- Tailwind CSS — utility-first styling is used across the storefront and admin, and a tailwind build script generates the class output used by Storybook.
- Storybook — a component playground is included but not actively maintained since initial setup.
Who is it for?
This starter is for developers who need a full marketplace flow (buyer, seller, platform) without building payments and auth from nothing.
- Full-stack developers — can use it as a reference implementation for Next.js 13 App Router, Server Actions, and Drizzle ORM with PlanetScale.
- Startup founders — can launch an MVP marketplace with seller onboarding, Stripe Connect payouts, and an admin product editor.
- Agencies — that build custom ecommerce platforms can adapt this codebase for clients, since the storefront and admin are separate routes.
- Developers learning modern React — understand parallel and intercepted routes through the quick-view and product-creation modals.
What can you do with OneStopShop?
- Sell products — create a seller account, link a Stripe account, upload product images via UploadThing, and manage listings from the admin product page.
- Buy products — browse the storefront, open a quick view with parallel routes, add to cart, and check out with the test card 4242 4242 4242 4242.
- Operate a marketplace — collect platform fees on every Stripe Connect transaction and control the catalog from the admin panel.
- Learn modern Next.js — study how Server Actions and intercepted routes work together in a real application.
How does OneStopShop work?
To run the app, create a MySQL database, copy .env.example to .env with your values, install dependencies with npm install, generate a migration with npx drizzle-kit generate:mysql, and start the dev server with npm run dev. The migration is automatically synced to the database via the migration function in db.ts, or you can run the generated SQL manually in PlanetScale.
Pros and cons
- Pros: The codebase includes a complete buyer/seller/platform flow with real payment handling via Stripe Connect, plus modern App Router patterns like intercepting routes and Server Actions.
- Cons: The warning at the top states the app is not production ready because it relies on technologies not yet stable, such as Server Actions and Drizzle ORM. Storybook is included but has not been actively maintained.
Alternatives
- Next.js Commerce — Vercel's official storefront starter for headless commerce platforms.
- Medusa — an open-source headless commerce platform with a Node.js backend.
FAQ
Is OneStopShop free to use?
Yes, the repository is open source. You can clone it and run it locally after setting up a MySQL database and configuring environment variables.
What technologies does OneStopShop use?
The stack includes Next.js 13 App Router, React Server Components, Server Actions, PlanetScale MySQL with Drizzle ORM, Clerk for authentication, UploadThing for file uploads, Stripe Connect for payments, and Tailwind CSS for styling.
How do I test the checkout?
Use the test card number 4242 4242 4242 4242, any future expiry date, and any three-digit CVC. Checkout works only for sellers with a connected Stripe account, such as the demo seller Tim's Toys.
Is OneStopShop production-ready?
No. The README warns it is a work in progress and should not be used in production because it depends on unstable technologies like Server Actions and Drizzle ORM.
Can I use my own database?
Yes, the app requires a MySQL database. The demo uses PlanetScale, but you can point the connection to any MySQL provider by changing the connection settings in your .env file and generating migrations with drizzle-kit.
