📌 Project Overview
The E-Commerce / Store template is a production-ready, full-stack online shop built for businesses that need a professional storefront with complete transaction capability. From product discovery to order confirmation, every step of the customer journey is optimized for conversion and performance.
Powered by Next.js 14 with Incremental Static Regeneration, Zustand-managed cart state, and Stripe for secure payments, this template handles everything from catalog browsing to webhook-synced order fulfillment — making it ideal for product brands, boutique retailers, and digital goods sellers.
🧩 Core Features
1. Zustand-Powered Cart
Persistent client-side cart with add, remove, update, and clear actions. Cart state syncs to localStorage so items are preserved across sessions and page refreshes.
2. Product Catalog with ISR
Product listing pages use Incremental Static Regeneration (revalidate every 60s) so inventory changes appear quickly without full rebuilds, powered by React Query for client-side filtering.
3. Product Detail with Image Gallery
Dynamic product pages include a Swiper.js image gallery, variant/size selectors, and a direct Add to Cart action — optimized for conversions.
4. Stripe Checkout & Webhooks
A /api/checkout route creates Stripe PaymentIntents, and a /api/webhooks/stripe handler validates and syncs order status back to Supabase in real time.
5. Account & Order History
Authenticated customers can view their order history fetched directly from Supabase, providing a full post-purchase experience without third-party tooling.
6. Wishlist with Optimistic UI
Users can save and unsave products to a wishlist backed by Supabase. React Query optimistic updates make interactions feel instant even before server confirmation.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Product pages, SSG catalog, ISR |
| Styling | Tailwind CSS | Responsive storefront UI |
| State Management | Zustand | Cart state with localStorage persistence |
| Data Fetching | React Query (TanStack) | Product data fetching & caching |
| Image Gallery | Swiper.js | Product image slider |
| Payments | Stripe Elements + Stripe API | Embedded checkout & payment processing |
| Webhooks | Stripe Webhooks | Order status sync post-payment |
| Images | Cloudinary + next/image | Optimized product image delivery |
| Database | Supabase (PostgreSQL) | Products, orders, inventory |
| Auth | Supabase Auth | Customer accounts & sessions |
| Backend Logic | Supabase Edge Functions | Cart validation, discount logic |
| Hosting | Vercel / Railway | Serverless deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Featured products, promotional banners, category navigation |
| Product Listing | ISR catalog with React Query filters and category tabs |
| Product Detail | Swiper.js gallery, variant selector, Add to Cart, reviews |
| Cart | Zustand-powered cart drawer with item management |
| Checkout | Stripe Elements-powered payment form with address capture |
| Order Confirmation | Thank-you page with order summary and status |
| Account | Customer portal with order history from Supabase |
| Wishlist | Saved products with optimistic add/remove via React Query |
🔒 Key Technical Highlights
- Add, edit, and remove products with variants, pricing, and images
- Stripe webhook handler with signature verification for order integrity
- Supabase RLS policies protecting customer data by user ID
- Cloudinary-optimized product images with responsive srcsets
- Full .env.local.example and package.json included for rapid setup