Ecommerce App

A storefront where the catalogue does not live in the codebase.

Products, prices, images and the hero and footer banners are all held in a Sanity dataset and edited through a Studio that ships inside the same repository, so changing what the shop sells never requires a deploy. Checkout hands off to Stripe: an API route builds the session server-side with line items, shipping rates and product images, and Stripe hosts the payment page — which means no card details ever reach this application, and PCI scope stays somebody else's problem.

Cart state is a React context behind a slide-out drawer; the success page clears it and fires confetti.

Built on Next.js 12 with the Pages Router in 2022, when this pairing — headless CMS in front, hosted checkout behind — was the standard way to build a small commerce site without owning either hard problem yourself.

Storefront with Sanity-powered catalog and Stripe Checkout — built on Next.js.

🚀 Try it live →#

A small ecommerce demo where products and hero/footer banners are managed in Sanity Studio, and checkout runs through a Stripe-hosted session.

✨ Features#

• Sanity CMS-driven catalog — products and banners edited from Sanity Studio (sainty/), rendered via @sanity/client
• Product detail pages with image gallery, quantity selector and "Add to cart"
• Slide-out cart with quantity adjust, remove and live totals
• Stripe Checkout — server-created session in pages/api/stripe.js with shipping rates and image passthrough
• Success page with confetti via canvas-confetti and cart reset
• Toast notifications via react-hot-toast for cart actions

🛠️ Tech Stack#

• Framework — Next.js 12 + React 18 (Pages Router)
• CMS — Sanity (@sanity/client, @sanity/image-url)
• Payments — Stripe Checkout (stripe, @stripe/stripe-js)
• State — React Context (context/StateContext.js)
• Styling — Plain CSS / CSS Modules

🙌 Credits#

Built by Mohamed Gado.