Next.js Ecommerce site with WooCommerce backend

Live URL:

Table Of Contents (TOC)

• Installation
• Features
• Design System
• Lighthouse Performance Monitoring
• Security
• Issues
• Troubleshooting
• TODO
• Future Improvements

Installation

1. Install and activate the following required plugins, in your WordPress plugin directory:

• woocommerce Ecommerce for WordPress.
• wp-graphql Exposes GraphQL for WordPress.
• wp-graphql-woocommerce Adds WooCommerce functionality to a WPGraphQL schema.
• wp-algolia-woo-indexer WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.

Optional plugin:

• headless-wordpress Disables the frontend so only the backend is accessible. (optional)

The current release has been tested and is confirmed working with the following versions:

• WordPress version 7.0.2
• WooCommerce version 10.9.4
• WP GraphQL version 2.18.0
• WooGraphQL version 1.0.3
• WPGraphQL CORS version 2.1

2. For debugging and testing, install either:

   (Firefox)

   (Chrome)

3. Make sure WooCommerce has some products already

4. Clone or fork the repo and modify .env.example and rename it to .env

   Then set the environment variables accordingly in Vercel or your preferred hosting solution.

   See

5. Modify the values according to your setup

6. Start the server with pnpm run dev

7. Enable COD (Cash On Demand) payment method in WooCommerce

8. Add a product to the cart

9. Proceed to checkout (Gå til kasse)

10. Fill in your details and place the order

Features

• Next.js version 16.1.6
• React version 19.2.4
• Typescript
• Tests with Playwright
• Connect to Woocommerce GraphQL API and list name, price and display image for products
• Support for simple products and variable products
• Cart handling and checkout with WooCommerce using Zustand for state management
  • Persistent cart state with localStorage sync
  • Efficient updates through selective subscriptions
  • Type-safe cart operations
  • Cash On Delivery payment method
• Algolia search (requires algolia-woo-indexer)
• Meets WCAG accessibility standards where possible
• Placeholder for products without images
• State Management:
  • Zustand for global state management
  • Apollo Client with GraphQL
• React Hook Form
• Native HTML5 form validation
• Animations with Framer motion, Styled components and Animate.css
• Loading spinner created with Styled Components
• Shows page load progress with Nprogress during navigation
• Fully responsive design
• Category and product listings
• Show stock status
• Pretty URLs with builtin Nextjs functionality
• Tailwind 3 for styling
• JSDoc comments
• Automated Lighthouse performance monitoring
  • Continuous performance, accessibility, and best practices checks
  • Automated reports on every pull request
  • Performance metrics tracking for:
    • Performance score
    • Accessibility compliance
    • Best practices adherence
    • SEO optimization
    • Progressive Web App readiness
• Product filtering:
  • Dynamic color filtering using Tailwind's color system
  • Mobile-optimized filter layout
  • Accessible form controls with ARIA labels
  • Price range slider
  • Size and color filters
  • Product type categorization
  • Sorting options (popularity, price, newest)

Design System

This project uses a custom design system built with Tailwind CSS design tokens. The system is defined in tailwind.config.js and globals.css.

Color Palette

The palette uses a muted slate-blue primary with warm neutral surfaces — chosen to feel calm, Nordic, and appropriate for a home goods store.

Typography

• Uses Tailwind's default system font stack
• Type scale defined from text-xs (0.75rem) to text-5xl (3rem)
• Hierarchy rules: product card title text-xl font-bold > price text-lg, detail page h1 text-2xl md:text-3xl font-light > card title

Accessibility

• Global focus-visible ring (2px solid primary) on all interactive elements
• prefers-reduced-motion: reduce disables all animations and transitions
• Form inputs display inline error messages with role="alert" and aria-invalid
• Required fields marked with asterisks
• Proper type (email, tel) and autocomplete attributes on checkout inputs
• Descriptive alt text on images
• disabled:cursor-not-allowed on buttons
• Semantic HTML throughout (, , , )

Button Variants

All buttons include hover, active:scale-[0.98], focus-visible, and disabled states with duration-200 transitions.

CSS Custom Properties

Design tokens are also available as CSS custom properties in globals.css for use outside Tailwind:

var(--color-primary)      /* #3B6B8A */
var(--color-surface)      /* #FAF9F7 */
var(--color-text)         /* #2C2C2C */
var(--color-error)        /* #B83B2A */

Lighthouse Performance Monitoring

This project uses automated Lighthouse testi