Less chaos, more content: sparstrom re-energize content delivery with a slimmed-down tech stack

• Headquarters: Köln, Germany
• Technology Stack: Next.js, Vercel, and Storybook

Sustainable, reliable, 100% green electricity and gas at fair, transparent prices? Sign us up. German-based energy provider, sparstrom (opens in a new window) is on a mission to make energy simple and enjoyable for everyone. Combining clean energy and accessible tech, sparstrom delivers reliable energy and transparent contract management using its mobile application, smart thermostats, and more. But their previous CMS setup was lacking that same power and efficiency to drive the campaign results they were striving for. Enter alm engineering (opens in a new window): a Munich-based software development agency with the expertise sparstrom needed to solve the problem, and it just so happens to be one of our Storyblok partners (you know where this is going). Together, they had spartstrom’s new platform up and running within 3 months, including their component library, which was complete within just 1 month—here’s how they did it. 

Out with the old and in with the new

sparstrom’s previous digital ecosystem was bogged down with monolithic (old) and hybrid technologies that were constantly fighting against each other. Meaning the sparstrom team spent a lot more time conflict resolving than content building, leading to job dissatisfaction, time lost, and mounting costs from maintaining their sprawling tech stack. The team was fed up trying to navigate a setup that was hard enough to understand, let alone manage, and had officially thrown in the towel on their fight with monoliths. They needed a content management system that allowed them to spin up new pages quickly and easily, and execute standout campaigns with their affiliate partners with ease, so they turned to alm engineering to deliver the goods. 

Having worked on a large number of varied projects from a range of industries, alm engineering had walked the walk and came into the project to get things moving. Following an initial discovery process, the project goals were set: 

1. Create a robust, scalable component library. 
2. Provide a tool for content editors to navigate, customize, and edit content easily—no developers needed. 
3. Help sparstrom migrate to the new content management platform so they can start managing their site, content, and campaigns as smoothly and efficiently as possible. 

The component library was priority number one as sparstrom set out to tackle their lengthy development process head-on. The team had been using Scrivito as their CMS for a while, and even small changes had required involvement from frontend and backend developers, often leading to dreaded project delays as the dev team wrestled with their workloads. The team needed a comprehensive component library, one that would enable content editors to use, repurpose, and customize components across all of their projects quickly, easily, and independently. And that’s exactly what they got. 

Saying hello to creative freedom and speedy deployments

After exploring a few CMS options, the teams decided that Storyblok’s features and services met the needs for the task at hand. Allowing the sparstrom team to make gains in creativity, efficiency, user experience, and beyond, including: 

• Atomic design principles (opens in a new window): all structural components are now reusable and easy to share across sub-companies, made possible by Storyblok design principles. Enabling developers to transform rigid web templates into nestable, component-based data structures that can be integrated and repurposed across any digital channel.
• Headless architecture and fast deployment: with a fully decoupled setup and a custom component library in place, devs and editors have real ownership of their workflows. Allowing for a faster deployment process and a quicker turnaround when shipping new features.
• Creative freedom: no more waiting on dev tickets for any content tweak. Content editors can create, preview, and publish across channels independently. That means fewer back-and-forths, less confusion, and more time spent doing actual creative work.
• Campaign delivery: quickly creating and delivering campaign content in collaboration with their partners was a key goal for sparstrom, and the team is now able to do so with minimal effort—huge tick! 

The winning React tech stack

Let’s get into the details: spartstrom’s new, slimmed-down tech stack consists of Storyblok, Next.js, and Vercel. A React stack that provides them with the tools they need to build a complex interface with simple components, connect them to data on their backend server, and render them as HTML. Then it’s over to GraphQL to fetch the data from Storyblok and deliver it to the frontend. A Storyblok workflow that the sparstrom team has adopted for their main site, FAQs, and campaign pages so far.