Case Study: Veronym

WordPress might be the reigning king in web development but that does not mean it is the perfect choice for every business.

One of the first projects we have had in 2019 was for Veronym, a cloud-based security service. They are an awesome startup which provides a wide range of fully automated and perfectly coordinated cutting-edge cybersecurity service for enterprises of any size. Take a free trial test it out.

Now, as many startups do, Veronym opted out for web agency built WordPress as their website solution. However, soon after website delivery, they realized that the limitations caused by WordPress are hurting their business. They had way too many problems with page performance, issues with CSS styles, and weren’t satisfied with the way content changes are delivered.

The Overview

Being an innovative start-up company they wanted a re-do of their website with modern tools that would emphasize their dedication to new and secure technologies, all the while improving page load speed and overall user experience. A couple of requirements stood out:

Since Veronym wanted us to transform their existing style sheets we had to use styled-components, a field-proven CSS-in-JS library. It helped us make the style sheets more maintainable and up-to-date. We've refactored the existing logic of the website using modern JavaScript and React. The old code was using legacy libraries such as jQuery which Veronym wanted gonne.

One of the main components of the re-engineered Veronym website was GatsbyJS. A modern static site generator that allowed us to get incredible results. We paired it with an easy-to-use headless CMS StoryBlok for content management and Netlify for deployment and hosting.

The tech stack we used was:

The Biggest Challenges We’ve Had On This Project

There were a couple of challenges with this build with two being the toughest ones. First of all, implementing internationalization (for 3 languages: EN,PL,DE) on Storyblok pages. Early on we decided to create folders for individual languages and have each one of them hold corresponding pages. This approach proved to be a good solution for the editors as the pages are pre-configured.

The biggest surprise was that Storyblok “knew” that the page has a copy in a different language folder, so if you update the content on the page - for example, en/contact - editor could easily have this content appeared on the same page in the other language version with a single click.

The second one was working with legacy code. The code we had to transform was outdated and required a lot of extra effort. We were keen to re-factor the code to match today's standards and make it work well with React and GatsbyJS. There is no simple way to overcome an issue like that. We had to dive into the older, existing code, and work our way through it with patience.

Gatsby + Netlify a Proven Jamstack Combo

Even if you are not into modern web development tools you have probably heard of Gatsby. In essence, Gatsby is a static site generator that combines the best features of React JavaScript library and GraphQL to give you a fresh, entirely front-end web building experience. Alternatively, you can check our Just Case Study where we talk about it a bit more.

As for Netlify, it is an all-in-one tool that takes away the hustle of managing the infrastructure, allowing the team to focus on coding. Not only does Netlify take care of building and deployment, but they also have a couple of additional features that allow creating a full-featured Jamstack site with ease.

Netlify Functions is the most notable one since it allows you to create serverless back-end logic and deploy it with a push of a button. Netlify Dev is another and it allows you to run their entire platform on your laptop. But all this is for another post.

So what makes these two an awesome pair? Smooth integration between the two. Simple as that.

Storyblok as the Headless CMS

Storyblok is an API-based headless CMS with an amazing visual editor. On this project, we have had a chance to work with GatsbyJS plus Storyblok stack and straight away I have to say they work amazingly well together.

Storyblok offers a plugin for GatsbyJS that simplifies the integration process. Whatmore, GatsbyJS works fantastic with the Storyblok live previews. These allow the editors to see the outcome of their work as they adjust the content.

We haven't had any real issues with both technologies for the most part. The downside of using these two together are some limitations Storyblok places. Basically, since Storyblok works in its own unique way with the live preview editor, some features of GatsbyJS weren't available for us to use.

For example, we had to create a custom component to lazy-load images that would work with Storyblok as gatsby-image wouldn’t work with it. Fetching data when using Storyblok happens in a different manner. This meant our ability to use GraphQL was also quite limited. We weren’t able to fetch content any other way than through the gatsby-plugin-storyblok.

The Results

The end result of the proposed stack was extremely satisfying. The migrated Veronym outdated code to a modern standard allowed the client to get a performance bump they have hoped for. What more distancing from WordPress meant also tighter and better security for their website.

Finally, Veronym loved how easy the content is being accessed on individual pages with Storyblok as headless CMS which made their new website not more maintainable with the ability to extend more easily in the future.

While another happy customer might sounds cliché, in all honesty, we are truly happy we've had a chance to help an amazing company in crafting a unique web experience for their audience.

Concerned about your website performance and security? We can help! Talk to us about your projects' needs.

CLICK HERE and schedule a meeting today.