{"id":13902823,"url":"https://github.com/w3bdesign/nextjs-woocommerce","last_synced_at":"2025-05-15T11:07:02.102Z","repository":{"id":37057418,"uuid":"262400823","full_name":"w3bdesign/nextjs-woocommerce","owner":"w3bdesign","description":"🔥 Next.js (React) headless eCommerce site with Typescript, WordPress (WooCommerce) backend and Algolia search","archived":false,"fork":false,"pushed_at":"2025-05-14T23:51:35.000Z","size":10551,"stargazers_count":530,"open_issues_count":5,"forks_count":131,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-15T00:38:09.818Z","etag":null,"topics":["algolia","algolia-search","animatecss","apollo","ecommerce","ecommerce-site","esnext","framer-motion","graphql","nextjs","react","react-hook-form","styled-components","tailwindcss","typescript","woocommerce","woocommerce-api","wp-graphql","zustand"],"latest_commit_sha":null,"homepage":"https://next-woocommerce.dfweb.no","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/w3bdesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-05-08T18:37:17.000Z","updated_at":"2025-05-14T23:51:38.000Z","dependencies_parsed_at":"2023-10-15T05:44:05.137Z","dependency_job_id":"d93bbf8a-8ba8-4f3e-b429-07ec14895f6f","html_url":"https://github.com/w3bdesign/nextjs-woocommerce","commit_stats":{"total_commits":2762,"total_committers":14,"mean_commits":"197.28571428571428","dds":0.561911658218682,"last_synced_commit":"d4673f98a6f4dee5742aca04bcbde465e30d9a76"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnextjs-woocommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnextjs-woocommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnextjs-woocommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fnextjs-woocommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/w3bdesign","download_url":"https://codeload.github.com/w3bdesign/nextjs-woocommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algolia","algolia-search","animatecss","apollo","ecommerce","ecommerce-site","esnext","framer-motion","graphql","nextjs","react","react-hook-form","styled-components","tailwindcss","typescript","woocommerce","woocommerce-api","wp-graphql","zustand"],"created_at":"2024-08-06T22:01:26.701Z","updated_at":"2025-05-15T11:07:02.053Z","avatar_url":"https://github.com/w3bdesign.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","E Commerce"],"sub_categories":[],"readme":"[![Lighthouse CI](https://github.com/w3bdesign/nextjs-woocommerce/actions/workflows/lighthouse.yml/badge.svg)](https://github.com/w3bdesign/nextjs-woocommerce/actions/workflows/lighthouse.yml)\n[![Playwright Tests](https://github.com/w3bdesign/nextjs-woocommerce/actions/workflows/playwright.yml/badge.svg)](https://github.com/w3bdesign/nextjs-woocommerce/actions/workflows/playwright.yml)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/29de6847b01142e6a0183988fc3df46a)](https://app.codacy.com/gh/w3bdesign/nextjs-woocommerce?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=w3bdesign/nextjs-woocommerce\u0026utm_campaign=Badge_Grade_Settings)\n[![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce/badge)](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nextjs-woocommerce\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nextjs-woocommerce)\n\n![bilde](https://github.com/user-attachments/assets/08047025-0950-472a-ae7d-932c7faee1db)\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=w3bdesign/nextjs-woocommerce\u0026type=Date)](https://star-history.com/#w3bdesign/nextjs-woocommerce\u0026Date)\n\n# Next.js Ecommerce site with WooCommerce backend\n\n## Live URL: \u003chttps://next-woocommerce.dfweb.no\u003e\n\n## Table Of Contents (TOC)\n\n- [Installation](#Installation)\n- [Features](#Features)\n- [Lighthouse Performance Monitoring](#lighthouse-performance-monitoring)\n- [Issues](#Issues)\n- [Troubleshooting](#Troubleshooting)\n- [TODO](#TODO)\n- [Future Improvements](SUGGESTIONS.md)\n\n## Installation\n\n1.  Install and activate the following required plugins, in your WordPress plugin directory:\n\n- [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.\n- [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.\n- [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema.\n- [wp-algolia-woo-indexer](https://github.com/w3bdesign/wp-algolia-woo-indexer) WordPress plugin coded by me. Sends WooCommerce products to Algolia. Required for search to work.\n\nOptional plugin:\n\n- [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. (optional)\n\nThe current release has been tested and is confirmed working with the following versions:\n\n- WordPress version 6.6.2\n- WooCommerce version 7.4.0\n- WP GraphQL version 1.13.8\n- WooGraphQL version 0.12.0\n- WPGraphQL CORS version 2.1\n\n2.  For debugging and testing, install either:\n\n    \u003chttps://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/\u003e (Firefox)\n\n    \u003chttps://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm\u003e (Chrome)\n\n3.  Make sure WooCommerce has some products already\n\n4.  Clone or fork the repo and modify `.env.example` and rename it to `.env`\n\n    Then set the environment variables accordingly in Vercel or your preferred hosting solution.\n\n    See \u003chttps://vercel.com/docs/environment-variables\u003e\n\n5.  Modify the values according to your setup\n\n6.  Start the server with `npm run dev`\n\n7.  Enable COD (Cash On Demand) payment method in WooCommerce\n\n8.  Add a product to the cart\n\n9.  Proceed to checkout (Gå til kasse)\n\n10. Fill in your details and place the order\n\n## Features\n\n- Next.js version 15.1.7\n- React version 18.3.1\n- Typescript\n- Tests with Playwright\n- Connect to Woocommerce GraphQL API and list name, price and display image for products\n- Support for simple products and variable products\n- Cart handling and checkout with WooCommerce using Zustand for state management\n  - Persistent cart state with localStorage sync\n  - Efficient updates through selective subscriptions\n  - Type-safe cart operations\n  - Cash On Delivery payment method\n- Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))\n- Meets WCAG accessibility standards where possible\n- Placeholder for products without images\n- State Management:\n  - Zustand for global state management\n  - Apollo Client with GraphQL\n- React Hook Form\n- Native HTML5 form validation\n- Animations with Framer motion, Styled components and Animate.css\n- Loading spinner created with Styled Components\n- Shows page load progress with Nprogress during navigation\n- Fully responsive design\n- Category and product listings\n- Show stock status\n- Pretty URLs with builtin Nextjs functionality\n- Tailwind 3 for styling\n- JSDoc comments\n- Automated Lighthouse performance monitoring\n  - Continuous performance, accessibility, and best practices checks\n  - Automated reports on every pull request\n  - Performance metrics tracking for:\n    - Performance score\n    - Accessibility compliance\n    - Best practices adherence\n    - SEO optimization\n    - Progressive Web App readiness\n- Product filtering:\n  - Dynamic color filtering using Tailwind's color system\n  - Mobile-optimized filter layout\n  - Accessible form controls with ARIA labels\n  - Price range slider\n  - Size and color filters\n  - Product type categorization\n  - Sorting options (popularity, price, newest)\n\n## Lighthouse Performance Monitoring\n\nThis project uses automated Lighthouse testing through GitHub Actions to ensure high-quality web performance. On every pull request:\n\n- Performance, accessibility, best practices, and SEO are automatically evaluated\n- Results are posted directly to the pull request\n- Minimum score thresholds are enforced for:\n  - Performance: Analyzing loading performance, interactivity, and visual stability\n  - Accessibility: Ensuring WCAG compliance and inclusive design\n  - Best Practices: Validating modern web development standards\n  - SEO: Checking search engine optimization fundamentals\n  - PWA: Assessing Progressive Web App capabilities\n\nView the latest Lighthouse results in the GitHub Actions tab under the \"Lighthouse Check\" workflow.\n\n## Troubleshooting\n\n### I am getting a cart undefined error or other GraphQL errors\n\nCheck that you are using the 0.12.0 version of the [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) plugin\n\n### The products page isn't loading\n\nCheck the attributes of the products. Right now the application requires Size and Color.\n\n## Issues\n\nOverall the application is working as intended, but it has not been tested extensively in a production environment.\nMore testing and debugging is required before deploying it in a production environment.\n\nWith that said, keep the following in mind:\n\n- Currently only simple products and variable products work without any issues. Other product types are not known to work.\n- Only Cash On Delivery (COD) is currently supported. More payment methods may be added later.\n\nThis project is tested with BrowserStack.\n\n## TODO\n\n- Implement UserRegistration.component.tsx in a registration page\n- Add user dashboard with order history\n- Add Cloudflare Turnstile on registration page\n- Ensure email is real on registration page\n- Add total to cart/checkout page\n- Copy billing address to shipping address\n- Hide products not in stock\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3bdesign%2Fnextjs-woocommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fw3bdesign%2Fnextjs-woocommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3bdesign%2Fnextjs-woocommerce/lists"}