NextJS Ecommerce PoC

NextJS Ecommerce PoC is an open-source e-commerce proof-of-concept built with Next.js, TypeScript, ChakraUI, Zustand, and the Contentful API for content delivery. It demonstrates a complete storefront front-end: a product grid of digital artwork, add-to-cart interactions, a header cart badge with dropdown, dynamic pagination, sorting, and filtering—all driven by a headless CMS.

What is NextJS Ecommerce PoC?

NextJS Ecommerce PoC is a front-end e-commerce proof of concept that takes product entries from a Contentful CMS collection and renders them as an interactive storefront. It runs on Next.js and TypeScript, uses ChakraUI for UI components, Zustand for client-side state management, and react-paginate for pagination. The repository includes a live demo deployed to Vercel at https://nextjs-ecommerce-poc.vercel.app/.

Key Features

• Product grid — displays six digital artwork products per page with hover-revealed "add to cart" bars; some items show a "bestseller" flag.
• Featured product — one product flagged as "featured" appears above the grid.
• Cart dropdown — "Add to cart" updates a badge counter on the header basket icon and opens a dropdown showing cart contents; a "Clear" button empties the cart and hides the dropdown.
• Dynamic pagination — the grid paginates at six items per page, the page count is generated from product data, prev/next arrows hide on boundary pages, and pagination disappears entirely when only one page exists.
• Sorting — products sort alphabetically or by price, in ascending or descending order; default is price ascending.
• Filtering — category filters support multiple selections, while a separate price-range filter allows one range at a time.
• Headless CMS content — Contentful entries include name, category, price, currency, image, bestseller, featured, and details (dimensions, size, description); images are sourced from Pexels.

Who is it for?

• Developers prototyping e-commerce front-ends — use it to see how pagination, sorting, filtering, and cart state are implemented with Zustand hooks in a Next.js project.
• Designers building storefront proof-of-concepts — the ChakraUI product grid, cart dropdown, and badge interaction provide a ready-made UI foundation.
• Teams planning headless CMS integrations — the Contentful entry schema and API usage illustrate how a CMS can drive storefront content without a custom backend.

Use cases

• Online art gallery demo — showcase digital artwork with featured and bestseller flags, price sorting, and category filters.
• E-commerce cart flow prototype — demonstrate adding items, showing a live badge counter, opening a dropdown cart, and clearing the cart.
• Learning reference for Next.js and Zustand — study how global state is managed for cart contents and UI behavior in a TypeScript e-commerce context.

How does it run?

Run the project locally with npm i followed by npm start, as stated in the repository's instructions. The application expects a Contentful API configuration to fetch product entries; without it, you'll need to supply your own Contentful space and access token.

FAQ

How do I run this project locally?

Install dependencies with npm i and start the development server with npm start, as stated in the repository instructions.

What CMS does this template use?

Contentful, via its API. Product entries are stored in a Contentful collection and delivered to the storefront using the Contentful API.

How is pagination handled?

The product grid shows six items per page using react-paginate. The page count is generated dynamically from the product data, and the pagination list is hidden when there is only one results page.

What fields are in a product entry?

Each Contentful entry contains name, category, price, currency, image (with src and alt), bestseller, featured, and details (dimensions, size, description). This schema is shown in the repository README.