v0 prompt to build an e-commerce store
This spec walks v0 through a storefront that behaves like a real one: integer-cent prices, inventory-aware add to cart, a cookie-backed cart that survives refresh, and a checkout stub ready for a payment integration. You end up with grid, detail, cart, and checkout routes working end to end in the preview.
Last updated
Build a small e-commerce storefront with three route groups: a product grid at /, product detail at /product/[slug], and a cart flow. Data model: products in {{database}} with id, slug, name, price_cents, inventory_count, and image_url, prices stored as integer cents and formatted through a single currency helper everywhere. Grid: responsive cards with a fixed image aspect ratio to prevent layout shift, name, price, and an out of stock overlay when inventory_count is zero that also disables the card link. Detail page: gallery, a quantity selector capped at available inventory, and an add to cart button that opens the cart as a shadcn/ui Sheet from the right instead of navigating away. Cart: a cookie-backed structure managed through server actions so it survives refresh in the v0 preview, line items with quantity steppers, remove buttons, a subtotal recomputed on the server, and a checkout button leading to /checkout with an order summary and an address form validated with zod. Payment stays a clearly marked stub at app/api/checkout/route.ts for a later {{addon}} integration, with the expected order payload documented in a comment. Edge cases: adding beyond inventory clamps the quantity and explains why in a Toast, a product deleted after being carted renders as unavailable with a remove prompt rather than crashing the subtotal, and unknown slugs return notFound(). Empty states: a seeded-empty grid shows a no products card, an empty cart Sheet links back to shopping. Acceptance: add, adjust, remove, and reach checkout end to end in the preview with the subtotal always matching the line items.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a small e-commerce storefront with three route groups: a product grid at /, product detail at /product/[slug], and a cart flow. Data model: products in PostgreSQL with id, slug, name, price_cents, inventory_count, and image_url, prices stored as integer cents and formatted through a single currency helper everywhere. Grid: responsive cards with a fixed image aspect ratio to prevent layout shift, name, price, and an out of stock overlay when inventory_count is zero that also disables the card link. Detail page: gallery, a quantity selector capped at available inventory, and an add to cart button that opens the cart as a shadcn/ui Sheet from the right instead of navigating away. Cart: a cookie-backed structure managed through server actions so it survives refresh in the v0 preview, line items with quantity steppers, remove buttons, a subtotal recomputed on the server, and a checkout button leading to /checkout with an order summary and an address form validated with zod. Payment stays a clearly marked stub at app/api/checkout/route.ts for a later input validation integration, with the expected order payload documented in a comment. Edge cases: adding beyond inventory clamps the quantity and explains why in a Toast, a product deleted after being carted renders as unavailable with a remove prompt rather than crashing the subtotal, and unknown slugs return notFound(). Empty states: a seeded-empty grid shows a no products card, an empty cart Sheet links back to shopping. Acceptance: add, adjust, remove, and reach checkout end to end in the preview with the subtotal always matching the line items.
Same task in other tools
Questions about this prompt
Why integer cents and a cookie cart instead of floats and React context?
Float math drifts on totals, and a context-only cart dies every time the preview reloads. Integer cents through one formatter keep every price consistent, and the cookie plus server actions combination survives refresh and works before any login exists.
How do I add real payments?
The stub at app/api/checkout/route.ts documents the order payload it expects, so wire your {{addon}} there in a follow-up message. Cart logic, inventory clamping, and the address form stay unchanged because they never touch the payment layer.
The subtotal disagrees with the line items after edits. Where do I look?
Some client-side reduce snuck in during an iteration. The spec requires the subtotal to be recomputed on the server from cart contents, so ask v0 to delete any client-side total math and render only the server value.