Presenting: The Unplatform demo storefront
As the saying goes: "the proof of the pudding is in the eating". We figured that to convince people of our headless philosophy, we needed to have a full-blown storefront that people could put their hands on. Meet the Unplatform demo storefont.
We defined the following non-functional requirements before building the storefront:
- Based on JAMStack technology
- Only uses Software as a Service (SaaS) based services
- Only uses headless services
- > 90 Web Vitals on all levels
Services
The first step of the Unplatform approach is choosing the right services. We first created a product backlog and mapped these and the non-functional requirements to a number of services. This resulted in a selection of the following services:
commercetools
commercetools is one of the many headless e-commerce platforms out there. We chose commercetools for it's maturity and quality in general. Compared to other headless e-commerce platforms we see the following strong points:
- Scalability and performance
- Extensiveness of the documentation
- Quality of the programming applications interfaces (APIs)
- Extensibility
- The partner ecosystem
Kentico Kontent
Kentico Kontent is a headless Content Management System. It has a lot of momentum and one of the things we really like is their customer and partner engagement. One of the features that makes it stand out from the rest is Kentico Web Spotlight (which is an add-on). This add-on gives editors more page building like features.
Algolia
Search & Navigation is an important feature of e-commerce sites. It is hard to get right, but Algolia almost does it all out of the box. Algolia is a headless search service. You send your products (or other documents that you want searched) to Algolia using their API. It has a management User Interface to configure the search and it comes with a React component library, that enables you to implement search and navigation in no time.
Vercel
Next.js is an open source front-end framework based on React. We wrote about why we love to use Next.js for e-commerce earlier.
Vercel is the company behind Next.js and they offer edge based hosting. Their prime focus is on end-user performance and developer experience. For example: besides hosting your application they also build your application and publish preview deployments.
Azure
Although the chosen services offer a lot of functionality, we still need to integrate and extend them. For example, we need integration that automatically sends products from commercetools to Algolia for indexing. Azure serverless functions are great for this. They are easy to deploy and connect to the services and offer cost-efficient scaling.
SendGrid
SendGrid is one of the most easy to use mail providers out there. Their APIs are easy to use and allow you to be sending mail in no-time. Although they recently also started to offer marketing automation features, transactional mail and ease of use are still their main strong points.
Stripe
Like SendGrid, Stripe shines with its ease of use. Especially on the technical side of things, Stripe is a breeze to set up compared to other payment providers. It offers a lot of ready to use component libraries. Stripe's management interface is simple, but intuitive.
Architecture
The following overview shows the services and what role they play in the overall architecture:
Front-end
As mentioned earlier, the front-end is built using Next.js. Next.js allows you to statically generated pages, giving the best performance and interaction. The Next.js front-end is hosted on Vercel, which automatically builds the front-end and publishes it on a Content Delivery Network (CDN).
Content
The content is defined in Kentico Kontent. When a content editor publishes a content item, Kentico Kontent notifies Vercel, which rebuilds the static pages. For the homepage and product detail page, we allow content editors to change the layouts by adding components. The navigation and sitemap are configured using Web Spotlight. In our previous article Dynamic routing with Kentico Kontent and Next.js, we talked about the technical details.
Product catalog
Products and categories are managed in commercetools. Whenever a product or category changes, commercetools also notifies Vercel and static catalog pages are re-build. commercetools also notifies our Product indexer, which is a Azure Serverless Function. This product indexer sends the updated product to Algolia for indexing, in order for the search to also be updated.
Checkout
When a customer of the site adds a product to the basket, the totals are calculated by commercetools. To showcase integrations, we created a custom shipping costs calculator that extends the default commercetools total calculation.
During the checkout, the customer pays the order using Stripe. Stripe then notifies us of the transaction by calling a custom payment handler, which is also an Azure serverless function. This payment handler then updates the corresponding order in commercetools. As a last step, commercetools notifies our Order confirmation serverless function of any order updates and this function sends confirmation e-mails to the customer using SendGrid.
Results
The Google Lighthouse score reflecting the Web Vitals below sums it up pretty well.
As you can experience yourself, the demo storefront is lightning fast. Developing with headless services and Next.js gives an amazing developer experience in general and we were able to build the demo storefront faster than we were expecting.
Clearly, we were happy with the functionality and the performance. In past projects (with different technology), we experienced some issues with product updates and the amount of time it took for those updates to be propagated to the website. We did a test with catalog of 10.000 products with 200 attributes per product. We updated the price for every product. It took 3 minutes in total from starting the import to seeing the updated price for the last product on the website. Before, this process would generally take hours, so this was a huge improvement and another indication that this JAMStack based solution is build for scale.
Take the online guided tour for more details on the demo storefront and to experience it yourself. If you would like more information or want to see more of the used services, please use our contact form or drop us a mail: info@unplatform.io.
