SweetCart
Modern e-commerce storefront with reactive product catalog, cart persistence, and Framer Motion micro-interactions.
Why this project was initiated
An e-commerce web application built using React, Next.js, and Tailwind CSS. Features Commerce.js API integration for real-time inventory management, responsive product catalog, and seamless cart checkout flow.
Engineering Deliverables
Deep Dive: Modern Headless E-Commerce Storefront
SweetCart is an e-commerce storefront engineered with React, Next.js, Tailwind CSS, and Framer Motion. Built to demonstrate headless commerce integration, it combines dynamic catalog querying via Commerce.js REST endpoints, persistent local cart state, and performant micro-interactions designed for conversion.
Architecture Overview
+-------------------------------------------------------------------------+
| Next.js Client Application (Vercel) |
| • Dynamic Category & Product Filtering |
| • Animated Cart Drawer (Framer Motion slide-over) |
| • Optimistic Cart Quantity Updates & Subtotal Calculation |
+------------------------------------+------------------------------------+
|
v
+-------------------------------------------------------------------------+
| State Management & Persistence |
| • React Context + LocalStorage Synchronization |
| • Multi-Currency Formatter with locale-aware pricing |
+------------------------------------+------------------------------------+
|
v
+-------------------------------------------------------------------------+
| Headless Commerce APIs |
| • Commerce.js SDK for live SKU & stock verification |
| • Secure Checkout Tokenization and Stripe redirect integration |
+-------------------------------------------------------------------------+1. Commerce.js Headless API Integration
Product catalogs and dynamic SKU pricing are synchronized directly through Commerce.js REST SDK:
import Commerce from "@chec/commerce.js";
export const commerce = new Commerce(
process.env.NEXT_PUBLIC_CHEC_PUBLIC_KEY || "demo-key",
true
);
export async function fetchProductsByCategory(categorySlug?: string) {
try {
const { data: products } = await commerce.products.list({
category_slug: categorySlug ? [categorySlug] : undefined,
});
return products;
} catch (error) {
console.error("Failed to load catalog products:", error);
return [];
}
}2. Micro-Interactions & Cart Drawer
Checkout drop-off was reduced by implementing a zero-reload slide-over cart drawer using Framer Motion spring physics, keeping shoppers anchored on the product catalog.
Engineering Outcome & Takeaways
Shipping this project reinforced the value of clean architectural boundaries, automated verification loops, and clear error telemetry. In subsequent iterations, I focus on system observability, end-to-end integration test suites, and strict performance profiling under load.