zolodev / envycommerce Goto Github PK

Create a simple documentation site.

How to get started with this project (First steps).

Dependent on making this project public.

Add a metadata fields 'collection', one item can only be in one collection but one item can have many 'keywords' that is a comma separated list.

slugify both collections & keywords

Add a filter way to display all collections in a meaningful way and to be able to filter the in the collections by keywords on the main page.

Also support url like:
"/collection/sport-shoes" shows all products in the collection of sport-shoes
"/keyword/blue"
to list all blue products within any collection based on keyword.

Keywords can also be used as "common words" customers searching for when looking for a specific product.

Pre-compile the collections and keywords into a json list using a prescript that runs on build to create this file as an index to make the filtering experience fast.

EnvyCommerce does not work correctly on Windows.

When cloning the project to a Windows 10 pro, using VSCode and git bash.
Running the command 'yarn dev ´

Will only yield the 404 page.

Reason is unknown and needs more investigation.

However EnvyCommerce works as expected on Linux.

This is crucial before releasing the project to the public

It could be a good thing to turn the store into a PWA (Progressive Web Application).

Here is an example how to do it.
https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

Similar to the Cart we want to be able to add products to a wishlist.

The key difference is that the customer should be able to add an item or all items to the cart.

The second part is that it should be able to "share" the wishlist with a url.

The url should be built up with the following pattern.
/wishlist/100x2&200

The page [wishlist] should be able to read from the url the following:
100x2 = 2 of the product with the id == 100
200 = One product with the id == 200

All products are available to query in the product.json.
https:///products.json

In order to create a great user experience we need to make sure the user feel they can trust the payment gateway. That is why we should start using Stripe and begin with the pre-built portal from stripe.

However, we should also look into if a EnvyCommerce store owner would like to have the products in Stripe, we can use these products as well.

By createing an adapter to load these products from an external source.

More information can be found at
https://stripe.com/docs/api/products

Still work in progress regarding the requirements for this part. How to make the best use of categories and keywords.

Most eCommerce has support for adding products to a category or collection, also nested within a sub-category/sub-collection.

The collection is in place, but to make use of the collection data available, we need to collect all collections and generate a collection "filtering" system.

This could be a Menu with top-level collections with sub-collections.

This could also be a Quick-filter system, along-side with the search field.

With dropdown menus.

For example where there is one dropdown menu collections containing all available root collections.

there could then create a "tag-cloud" with quickfilters of keywords for available keywords (no duplicates).

Update the Readme with background and other useful information about this project.

• Prerequisite
• The story why this project came to be.
• What the aim of the project is.
• To whom it is suitable to.

Also add badges?
https://github.com/badges/shields

The test for the pages/index is not complete after the replacement of Enzyme.

Most of the test has been replaced or reworked except this page.

This task is just a reminder to not forget to add more tests to it.

How to improve on the SEO for the store front.

Here is a short introduction to NextJS and SEO by Lee Robinson, from the "Mastering NextJS Course".
https://www.youtube.com/watch?v=fJL1K14F8R8

https://masteringnextjs.com/

There is a package named next-seo that can be a great asset in this task.
Here are the documentation for next-seo
https://github.com/garmeeh/next-seo

Before we continue working any further and making this more complex without any automated test, we should implement the workflow to follow TDD practice.

Jest is already available, we need to extend with Enzyme and start writing simple tests so we can prepare for CI/CD pipelines.

Optional can be to add a shield
https://github.com/pamepeixinho/jest-coverage-badges/blob/master/README.md

When exporting EnvyCommerce. Google Lighthouse recommends lazyloading of components to minimize the initial render.

More information can be found at
https://loadable-components.com/docs/getting-started/

The UI and UX is not the best.

Hopefully someone with a lot better UI and UX design skills can help fixing this.

As we use TailwindCSS it is a populare choice. However there might be another good solution that could work side-by-side.

Need to investigate if Chakra UI could be better option, or work together with Tailwind.

More information can be found at
https://chakra-ui.com/

Stripe Checkout (portal)

Stripe has an option to collect the necessary information from a customer. Using Stripe checkout solution. Stripe Checkout

Serverless (stripe session) implementation and a minor script that needs to connect the client (webclient) with the stripe created session from the serverless function.

More information about Accepting Payments from Stripe
https://stripe.com/docs/payments/accept-a-payment?platform=web

And how to add it to React application
https://stripe.com/docs/stripe-js/react

Fallback below

Old-Title: Add react-form-hook to get details about the user

We need to implement a form to gather users information regards the necessary information so the store owner can ship the product to the correct address and get in contact with the customer if needed.

Suggested form would contain the following fields:
Personal

• First name
• Last name
• Email
• Phone number

Shipping Address

• Street
• Postal code
• Country

Message (optional textarea)
Other information needed for either the store owner or the shipping company need to know about. Can be used for Codelocks on door. Or to call 30min before shipment arrives.

Here are some links in order to find more information and inspiration about how to solve this task.
https://react-hook-form.com/
https://creativedesignsguru.com/how-to-create-and-handle-nextjs-form-with-react-hook-form/

Add a new .env variable that can determine if a Google Analytic ID should be used.

If the ID is set, include the javascript.

If the ID is not set, do not include the javascript after build.

Do not forget that using env variables need to be prefixed with "NEXT_PUBLIC_" otherwise it will not work.

An example of variable name:
NEXT_PUBLIC_GOOGLE_ANALYTIC_ID="x-yyyyyyy"

We should move away from Enzyme and start using RTL (React Testing Library).

Using this migration guide:
https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/

It should be possible to add a product manufacturer. Like if the store owner want to sell shoes from certain brands and want the customers to be able to filter by manufacturer.

For example of usage of manufacturer

• Nike
• Sony
• Apple

For swedish stores, we need to be able to add a constant for the business F-Skattsedel and organization number.

They should be visible in the site footer.

a new .env variable:
NEXT_PUBLIC_F-SKATT-NO="XXXXXX"
NEXT_PUBLIC_ORG-NO="XXXXXX"

There are some unused packages that can be removed.

• remark-math
• rehype-katex
• rehype-mathjax

Add the possibility to add product variants.

Create a script to install all vscode extensions.

See more information about how to implement i18n at https://github.com/vinissimus/next-translate

Similar as Variants, however this should only include other product ids.

Lee Robinson has an example script.

https://github.com/leerob/leerob.io/blob/main/scripts/generate-sitemap.js

Add support on the main page to be able to search through all products in collections and by keywords.

Utilize the Fuse.js lib.

Products might need a new field for 'keywords' usage can be what users might search for in order to find a certain product.

The search query must cover these fields:

• Product Name (full or partial)
• Collections
• Keywords