Headless E-Commerce Mini-Store
Shop-Next is a Next.js storefront pulling product data from Shopify's Storefront API and rendering it through reusable UI components with server-side data fetching.
Shop-Next is a customizable e-commerce demo built with modern React features and the Shopify Storefront API. It showcases product catalogs, promotional banners, and paginated listings.
Install dependencies and start the development server:
npm run devVisit http://localhost:3000 to view the site. Editing app/page.tsx hot-reloads changes automatically.
Server components handle Shopify data fetching while client components provide interactive UI elements such as product grids and banners. The shopifyFetch helper in lib/shopify.ts manages authenticated GraphQL requests.
Vercel is the recommended platform. An apprunner.yaml outlines a potential AWS App Runner setup. A multi-stage Dockerfile builds a production image and injects Shopify credentials via environment variables.
Unit tests use Vitest and Testing Library while ESLint 9 enforces code standards.