Webshop - Nudetuin

This project is still on-going, will go live around 04-2025

Nudetuin wanted a new webshop, currently they have an Wordpress webshop. It has some issues, the products are outdated, the UX is bad. And they wanted to show pricing, which is currently not a feature (only price on request).

Tech i've used

I will be using Strapi as the CMS, as it's very flexible, can be used with a Postgres database, and has a great track record for updates and extensions.

For the front-end i will be using Next.js, with gql.tada 🪄, and Apollo Client. With TailwindCSS for the styling.

I will be prerendering all the pages while building the application, and adding an endpoint to rebuild the edited page. This way we don't have to deal waiting on the API.

This website will have a performance & ux focus. On the shopping pages we will prerender the product page on hover, and the first 6 product images on load will have the priority tag, the others images will be lazy loaded.

Moving over 3000+ products from Wordpress to Strapi CMS

Those products, blogs, needed to be moved over. This was easily done by exporting the data to a csv, and making a little script to create those products within Strapi.

Building the Payment API

I've had a fun time building the payment system, i wanted to make it as secure as possible. So the client-side won't be doing any calculations to prevent wrong prices while paying.

It works like this: 1. Customer add products to the cart 2. Customer started the checkout process, filling in their details, and clicking pay 3. The website calls the API on the side of Strapi, the CMS. 4. Strapi creates the order, with the products, the quantity, etc. 5. Strapi decides the price which should be paid, by getting the products from the DB with the quantity and the set price of the product. 6. Strapi created a Mollie payment ID and URL 7. Strapi updates the order with the payment ID 8. Strapi sends back the payment URL to the front-end, which redirects the user to the payment URL 9. Customer finishes paying 10. Mollie calls back to the Strapi API that the payment had been finished, with the ID. 11. Strapi finds the order 12. Strapi calls Mollie again with the payment ID to make sure it isn't a fake call 13. Strapi marks the order as paid, and sends a confirmation to the customer and store owner.

How it's going

I find that using Strapi feels extremly fast to use, the developer experience is great, the tools to work with it within Next.js is just good. The project is almost done, we are still waiting on the 2025 product range to release the webshop.

The website feels extremly fast to use, and feels like a big improvement from the current webshop.