Case Study: Veronym

Back to blog

5 min to read

Case Study: Veronym

Blazing fast JAMstack website built with Gatsby, Storyblok and Netlify for a cloud-based security service Veronym.

Michal Zielinski

By Michal Zielinski
May 27, 2019

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 cyber security 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.

veronym quote

The Overview

Being an innovative start-up company they wanted a re-do of their website with modern tools which 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:

  • keep the existing design
  • add multiple language support for 3 languages
  • they wanted to be able to gather users input from a static page
  • an easy registration with social-media account sign in option
  • separate content management system from content serving engine
  • and finally, with scalability in mind, they insisted on using cloud-solutions as much as possible

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 existing logic of the website using modern JavaScript and React. The old code was using legacy libraries such as jQuery which Veronym wanted gone.

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:

Sign up for our JAMstack newsletter!

Get our EXCLUSIVE web development case studies in your mailbox!

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 approved 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 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 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, 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 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. Whatmore 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 need.

CLICK HERE and schedule a meeting today.

Share

About author

Michal Zielinski

Michal Zielinski

Aspiring software engineer with passion for front-end and serverless solutions. Enjoys solving problems and I'm always eager to learn new skills. A technology enthusiast with love for both programming and human languages. Privately loves hiking and brewing coffee.

Readers also enjoyed