Component Library

Alps Alpine Europe GmbH · Automotive audio & in-car systems

Months of engagement, from 2019 to 2020

People from alm carried the engagement

Handed over

Internal Alps Alpine teams have carried the library forward since the engagement ended

Challenge

Every tool from scratch

Configurators, dashboards and tools for production and sales run for years and have to stay consistent, maintainable and quick to extend. Without a shared foundation, every internal tool gets reinvented.

A shared component foundation

A component library reused across several internal tools, with central build and test standards.

How it works

React component
Storybook
Storyshots
GitHub Actions
Internal tools

Each component is built, documented and visually tested once, then reused across several internal tools.

Solution

Library built on React Hooks

Documented in Storybook, with Storyshots for visual regression testing.

Apollo and GraphQL

Connecting the components to the existing backends.

Custom Webpack setups

Custom compiler configuration for the requirements of the internal tool landscape: SASS, SVGO, Formik and internationalization.

Backend in Node.js

New endpoints and services where the tools needed them.

Test environment and CI

Jest, Storyshots and GitHub Actions as a clean setup, so maintenance stays friction-free.

Result

Handed over and carried on.

After the engagement ended, internal Alps Alpine teams carried the component library forward, because the setup was designed for handover from day one. As the first major engagement after alm was founded, it became the template for later component library and design system projects such as badenova and NotarPartner.