Case study

Hardwaresleutel.nl

Webshop development

In this case study, I take you through the development of Hardwaresleutel.nl and the associated challenges, solutions, and positive outcomes.

Hardwaresleutel.nl is a webshop and informative platform for hardware authentication keys. These are physical devices you can use as an extra step for two-factor authentication to secure your online accounts.

Hardwaresleutel.nl

Type

  • Webshop

Role

  • Owner
  • Software architect
  • Software developer
  • Maintenance
  • CI/CD

Timeline

  • 2021 - 2023, temporarily inactive

Client

  • Own project

Challenges and goals

The goal of this project is to convey knowledge about physical authentication keys to a broader, less technically inclined audience. Additionally, the aim is to sell such devices or related products.

Product page of a security key.
Product page of a security key.
Blog post intended to convey knowledge in a not overly technical language.
Blog post intended to convey knowledge in a not overly technical language.

Simply put, this goal is achieved in two steps: with an easy-to-use webshop and by providing information on the website. The latter is achieved through blog posts, videos, customer support, and other informational texts on the site.

Architecture

At the time of developing this project, there were no (suitable) e-commerce platforms that could offer the ability for customers to secure their accounts with such authentication keys. For this project, that is a must, so customers can test their purchased products via Hardwaresleutel.nl.

Logging in with a security key as a two-step verification step.
Logging in with a security key as a two-step verification step.

That was one of the reasons I decided to build a fully custom webshop. There were additional benefits, such as full customizability, external integrations without paying a third party (via plugins, etc.), and administration.

The only downside was that it took more time (and therefore money) to build.

Integration with the PostNL API so that the appropriate labels can be generated with a few clicks.
Integration with the PostNL API so that the appropriate labels can be generated with a few clicks.

Thanks to the custom-made webshop, it is easy to integrate with external systems. For example, automatically generating PostNL shipping labels or invoices.

Additionally, there is also a Website Finder Tool to search for websites that support security keys. The data for this gets automatically updated from an open-source dataset every day.

The Website Finder Tool, where you can search for websites and apps to see if they support security keys.
The Website Finder Tool, where you can search for websites and apps to see if they support security keys.

Techniques

The website is built with the Play Framework. Scala templates were used in combination with vanilla JavaScript, jQuery, HTML, and CSS.

Some of these technologies will be replaced with more modern alternatives in a future version.

JavaJava
ScalaScala
Play FrameworkPlay Framework
PostgreSQLPostgreSQL
ES6 (Javascript)ES6 (Javascript)
CSSCSS
HTMLHTML
jQueryjQuery
SBTSBT
JUnitJUnit
Cucumber.jsCucumber.js
JenkinsJenkins
UbuntuUbuntu
Apache HTTP ServerApache HTTP Server
MonitorixMonitorix
MollieMollie
PostNLPostNL

SEO, SEA & marketing

One of the most important aspects of this project is marketing. After all — no customers, no revenue.

Initially, the focus was mainly on organic visitors, which are visitors who find the site via search results in search engines or other free methods. By optimizing the website for search engines, Search Engine Optimization, the website is shown to potential organic customers.

Hardwaresleutel.nl product in Google search results with product information.
Hardwaresleutel.nl product in Google search results with product information.
Analysis of structured data on a product page. This allows search engines to more easily understand what is on the page.
Analysis of structured data on a product page. This allows search engines to more easily understand what is on the page.

With technical SEO, all pages are optimized by default. Additionally, all texts are optimized as well. With the help of an external party, we wrote SEO texts. This helped us get Hardwaresleutel.nl into Google's top search results for relevant queries.

The blog covers various informative topics. These are also optimized (SEO).

Additionally, there is a YouTube channel where explanatory videos are uploaded.

An informative video I made for a blog post.

In addition to the organic strategy, I hired an external online marketing company for SEA: Search Engine Advertising. In other words, to run campaigns with online advertisements.

Together with an externally hired marketing company, we run ads via Google Ads.
Together with an externally hired marketing company, we run ads via Google Ads.

Continuous development & integration

In 2021, the first launch took place. Initially, the webshop went online with only the basic functionalities. This allowed products to be sold as quickly as possible. Since then, new features have been continuously developed.

Currently, Hardwaresleutel.nl is temporarily offline. A major maintenance update is underway, modernizing all technologies and implementing a full rebranding.

Plan
Analyze
Design
Implement
Test
Maintain
Plan
Analyze
Design
Implement
Test
Maintain

Screenshots

The webshop homepage.
An overview page of products. These can be filtered based on dynamic properties. This can be managed via the admin CMS.
On each product page, customers can leave their own reviews.
Example of a shopping cart. If a product is not (or no longer) in stock, a notification will appear here.
Homepage of the customer portal.
Partial orders page. Returns can also be registered via this page. The status of the order is retrieved after shipping via the PostNL API.
Through account settings, customers can set up 2FA with a security key. This allows them to try out their keys.
There is extensive customer support that can be fully managed via the admin CMS.
Example of a customer service page about shipping costs.
The admin CMS, from where all webshop operations can be managed.
Overview page of all blog posts. These contain informative posts on related topics.

The webshop homepage.

Need an experienced software engineer?

I help companies with software solutions (SaaS, automation and more) — from backend to frontend. Feel free to contact me to see how I can contribute to your project.

  • Robust backend: Java/Kotlin, SQL, Spring Framework
  • User-friendly front-end: Next.js, React, Typescript, ES6
  • Rapid development: Continuous integration & deployment, Jenkins
  • Efficient collaboration: Agile, Scrum, Jira, Git, Bitbucket, GitHub
  • Freelance software developer from Arnhem, The Netherlands