(Chrome)

1. Make sure WooCommerce has some products already

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

See

1. Modify the values according to your setup

1. Start the server with pnpm run dev

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

1. Add a product to the cart

1. Proceed to checkout (Gå til kasse)

1. 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

• Algolia search (requires algolia-woo-indexer)
• Meets WCAG accessibility standards where possible
• Placeholder for products without images
• State Management:

• 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

• Product filtering:

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.

| Token | Hex | Usage | | --------------- | --------- | ----------------------------------------------- | | primary | #3B6B8A | Buttons, links, focus rings, active states | | primary-light | #5A8BA8 | Hover accents, info states | | primary-dark | #254D6B | Mobile nav, button hover, dark accents | | accent | #4A8F8F | Secondary accent (teal) | | surface | #FAF9F7 | Page background, cards, inputs (warm off-white) | | surface-alt | #F3F1ED | Image placeholders, alternating surfaces | | border | #E5E2DC | All borders and dividers | | text | #2C2C2C | Primary body text (warm near-black) | | text-muted | #6B6862 | Secondary text, descriptions | | text-light | #9C9890 | Tertiary text, strikethrough prices | | success | #2D8A5E | Stock status, success messages | | warning | #C4882A | Warning states | | error | #B83B2A | Sale prices, errors, destructive actions |

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

| Variant | Appearance | Use Case | | ----------- | ------------------------- | --------------------------------------- | | primary | Solid blue (bg-primary) | Main CTAs — KJØP, GÅ TIL KASSE, BESTILL | | secondary | Solid red (bg-error) | Destructive actions — Fjern | | hero | White on dark overlay | Hero section CTA | | filter | Bordered, toggleable | Size filter buttons | | reset | Light gray surface | Reset filters |

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 testing through GitHub Actions to ensure high-quality web performance. On every pull request:

• Performance, accessibility, best practices, and SEO are automatically evaluated
• Results are posted directly to the pull request
• Minimum score thresholds are enforced for:

View the latest Lighthouse results in the GitHub Actions tab under the "Lighthouse Check" workflow.

Accessibility Testing (pa11y)

In addition to Lighthouse, this project runs dedicated accessibility testing with pa11y through GitHub Actions (the "A11y" workflow). On every push and pull request to the main/master branch:

• The app is built and started locally, then scanned with pa11y against its main public pages:

• Reports for each page are uploaded as workflow artifacts (pa11y-reports)
• The job fails if any accessibility errors are detected

View the latest accessibility results in the GitHub Actions tab under the "A11y" workflow.

Security

This project runs automated OWASP security scanning on every push and pull request via GitHub Actions:

| Scan | Tool | What It Catches | | ----------------------- | ------------------------------------------------ | ----------------------------------------------------- | | 🔑 Secret Detection | gitleaks | Hardcoded API keys, passwords, tokens, private keys | | 🔍 SAST | Semgrep | OWASP Top 10 + React/Next.js-specific vulnerabilities | | 📦 Dependencies | Trivy | Known CVEs in npm packages (CRITICAL/HIGH) |

Custom Semgrep rules cover OWASP categories A01–A10 including XSS prevention, injection detection, authentication checks, SSRF protection, and security misconfiguration. View results in the GitHub Actions tab under the "OWASP Security Scan" workflow.

Troubleshooting

I am getting a cart undefined error or other GraphQL errors

Check that you are using the latest version of the wp-graphql-woocommerce plugin

The products page isn't loading

Check the attributes of the products. Right now the application requires Size and Color.

Issues

Overall the application is working as intended, but it has not been tested extensively in a production environment. More testing and debugging is required before deploying it in a production environment.

With that said, keep the following in mind:

• Currently only simple products and variable products work without any issues. Other product types are not known to work.
• Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.

TODO

• Implement UserRegistration.component.tsx in a registration page
• Add user dashboard with order history
• Add Cloudflare Turnstile on registration page
• Ensure email is real on registration page
• Add total to cart/checkout page
• Copy billing address to shipping address
• Hide products not in stock