Ecommerce App

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.