TODO add login

.gitignore

@@ -38,3 +38,4 @@ next-env.d.ts
 /test-results/
 /playwright-report/
 /playwright/.cache/
+src/pages/registrer.tsx

README.md

@@ -2,11 +2,10 @@
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/29de6847b01142e6a0183988fc3df46a)](https://app.codacy.com/gh/w3bdesign/nextjs-woocommerce?utm_source=github.com&utm_medium=referral&utm_content=w3bdesign/nextjs-woocommerce&utm_campaign=Badge_Grade_Settings)
 [![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce/badge)](https://www.codefactor.io/repository/github/w3bdesign/nextjs-woocommerce)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_nextjs-woocommerce&metric=alert_status)](https://sonarcloud.io/dashboard?id=w3bdesign_nextjs-woocommerce)
-
-![bilde](https://github.com/user-attachments/assets/08047025-0950-472a-ae7d-932c7faee1db)
 
+![bilde](https://github.com/user-attachments/assets/08047025-0950-472a-ae7d-932c7faee1db)
 
-## Star History 
+## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=w3bdesign/nextjs-woocommerce&type=Date)](https://star-history.com/#w3bdesign/nextjs-woocommerce&Date)
 
@@ -16,33 +15,33 @@
 
 ## Table Of Contents (TOC)
 
--   [Installation](#Installation)
--   [Features](#Features)
--   [Issues](#Issues)
--   [Troubleshooting](#Troubleshooting)
--   [TODO](#TODO)
--   [Future Improvements](SUGGESTIONS.md)
+- [Installation](#Installation)
+- [Features](#Features)
+- [Issues](#Issues)
+- [Troubleshooting](#Troubleshooting)
+- [TODO](#TODO)
+- [Future Improvements](SUGGESTIONS.md)
 
 ## Installation
 
 1.  Install and activate the following required plugins, in your WordPress plugin directory:
 
--   [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.
--   [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.
--   [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema.
--   [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. 
+- [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.
+- [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.
+- [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema.
+- [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.
 
 Optional plugin:
 
--   [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. (optional)
+- [headless-wordpress](https://github.com/w3bdesign/headless-wp) 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 6.6.2
--   WooCommerce version 7.4.0
--   WP GraphQL version 1.13.8
--   WooGraphQL version 0.12.0
--   WPGraphQL CORS version 2.1
+- WordPress version 6.6.2
+- WooCommerce version 7.4.0
+- WP GraphQL version 1.13.8
+- WooGraphQL version 0.12.0
+- WPGraphQL CORS version 2.1
 
 2.  For debugging and testing, install either:
 
@@ -52,7 +51,6 @@ The current release has been tested and is confirmed working with the following
 
 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.
@@ -73,36 +71,36 @@ The current release has been tested and is confirmed working with the following
 
 ## Features
 
--   Next.js version 14.3.11
--   React version 18.3.1
--   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 (Cash On Delivery only for now)
--   Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))
--   Meets WCAG accessibility standards where possible
--   Placeholder for products without images
--   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
--   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)
+- Next.js version 14.3.11
+- React version 18.3.1
+- 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 (Cash On Delivery only for now)
+- Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))
+- Meets WCAG accessibility standards where possible
+- Placeholder for products without images
+- 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
+- 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)
 
 ## Troubleshooting
 
@@ -116,21 +114,22 @@ Check the attributes of the products. Right now the application requires Size an
 
 ## 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. 
+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.
+- 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.
 
 This project is tested with BrowserStack.
 
 ## TODO
 
--   Add total to cart/checkout page
--   Copy billing address to shipping address
--   Add order dashboard and require login
--   Hide products not in stock
--   Add better SEO
--   Re-add Next/image when it is working better
+- Implement UserRegistration.component.tsx in a registration page
+- Add user dashboard with order history
+- Add Cloudflare Turnstile on registration page
+- Add total to cart/checkout page
+- Copy billing address to shipping address
+- Hide products not in stock
+- Add better SEO