The Project.
Implementation of a component library for versatile web presences: A custom solution for digital challenges in the energy sector. badenova, based in the heart of Baden, is much more than a traditional energy company. As one of the leading energy supply companies in southwestern Germany, badenova has committed not only to the reliable supply of electricity, gas and water to its customers, but also sets a clear signal in terms of sustainability and innovation.
Challenge.
Although badenova houses a variety of subsidiaries, they reached operational limits in their effort to provide each of these companies with a unique web presence. This created the need to create a multifunctional component library.
Despite a multi-tenant infrastructure, the existing system landscape had grown historically and was getting on in years. The challenges lay not only in the timeliness and adaptability of the design, but also in the maintenance and functionality of the underlying technology.
"Open communication and comprehensible efforts are the basis of trustful cooperation for me. This is the case with alm."
Goals.
The vision for redesigning the infrastructure was clearly defined. The first challenge was to present our ideas and plans to the experts at alm and check them for feasibility, efficiency and relevance.
During the development phase, the focus was on implementing these optimized ideas in practice, maintaining the balance between badenova's requirements and technological possibilities.
"The cooperation with alm proved to be fruitful and purposeful. Our initial ideas were not only validated, but also further optimized through the technical know-how and industry-specific insights of the alm team."
Solution Approach.
Base Technology: React.js
At the core of our approach is React.js. This JavaScript library enabled us to create reusable UI components that are fast and responsive.
Storybook Integration
To ensure that all components are consistent and well documented, we mapped them in a Storybook. This tool served as a showcase and documentation.
TypeScript for Type Safety
The decision for TypeScript as a programming language ensures stronger type safety and facilitates the maintenance and extension of the code in the future.
Implementation for Sparstrom GmbH
The first project to use this architecture was for Sparstrom GmbH. The frontend was created with Next.js, the backend with the headless CMS Storyblok.
Technologies Used.
UI/UX Design
Figma, Adobe XD
Development
React, Storybook, Vercel, Github
Organization
Notion, Slack, Jira
Project Team.
Christoph Hummel
Frontend Consultant, badenova
Benjamin Konopka
Partner Manager, alm engineering