Navigating Your Component Library Journey
Learn how to easily build, manage, and distribute your component library in an ever-increasing complex web development landscape.
Created by Andrico Karoulla
Building a Library is Hard
Every web developer has thought about creating their own component library, and for good reason. Building a library is an opportunity to express your creativity, learn to develop more accessible web experiences, contribute to the open source community, upskill yourself for a better-paid role, or simply become a more well-rounded web developer.
But the web development landscape has also gotten excessively complicated in the last few years. There’s growing pressure to build for different frameworks and runtimes. New tools are popping up every day that claim to “fix” web development, but they just add another decision to the already growing list of choices you need to make.
You want your components to be widely compatible with the web platform, but choosing one framework locks your components out from being used by others. At this point, it feels that ensuring your library work everywhere is nothing short of a herculean effort.
And despite all of this, you want your end-users to have an enjoyable web experience, you want your library consumers to easily build interfaces using your library, and you want a smooth development experience to build, test, and publish your library.
So how can you achieve this?
You could build an open-source library and hope that it gains widespread adoption, enough so your GitHub issues are flooded with feedback, bugs, and feature requests.
You could assemble a component library for your company using the framework-of-the-month. But when your company decides to use a different framework, you’ll need to start from scratch.
You’ll learn a lot with these approaches, but they take too much time and effort.
I want to save you that time, effort, and leave you with the skills to build better components.
With this course, you’ll learn the ins and outs of building a web-based component library. You’ll learn how to build future-proof components, making them interoperable with React, Vue, Svelte, and any other web framework. You’ll also learn how to improve your library’s development experience using automated testing tools and component cataloging tools.
It’s a journey, one that’s both challenging, and immensely rewarding.
Navigating Your Component Library Journey
Tools For Building User Interfaces
Learn about the different ways of writing components, and why this course focuses on web components and CSS utility classes.
Writing your First Component
Dive head-first into web components. You’ll learn what they’re made of, their lifecycle, and more. You’ll even build a bunch yourself.
Styling your Components
Learn how to customise the appearance of your web component, and how variables and theming can provide flexibility to you and your library’s consumers.
Publishing your Library
Automating your Code Quality
Learn how to keep a consistent code style, using tools like Prettier and ESLint, and you can automate this process for hassle-free maintenance.
Writing Tests for your Components
Ensure that your components work across browsers by writing tests. You’ll develop a testing strategy and write tests for your first component.
Automating Your Workflows
Combine your newfound knowledge to streamline your testing and publishing workflow using GitHub Actions.
Creating your Second Component
Flex your coding muscles by building, testing, and publishing an interactive and customisable accordion component. You’ll see just how far you’ve come on your Component Odyssey!
Adding Types to your Library
Learn all about type systems, and how they can make you more efficient. You’ll also learn how types can provide benefits for the consumers of your components.
Documenting your Components
Learn to build a showcase site for your components that serves as user-friendly and clear documentation for your library.
Creating your Third Component
Cap off your odyssey by building, styling, testing, typing, documenting, and publishing a complex component. You’ll create a fully-fledged component development workflow that you can use for your future component libraries.
Meet Andrico Karoulla
Andrico Karoulla is a web developer based in London. He’s worked at a number of startups and has built design system automation tooling at Anima.
He’s also an open-source contributor, involved in projects like the Open UI, where he led the site rewrite.
Andrico’s also built component libraries for fun, like A2K, the Windows 2000-inspired web component library.
We're Not Quite Ready to Embark
Be the first to know when Component Odyssey is ready to set sail and get access to early-bird prices.
What do I need to know before taking this course?
Why aren't you teaching TypeScript in this course?
TypeScript is a great language, and I use it in my day-to-day work. However, I don't think it's necessary to use TypeScript to build a component library. I want to make this course as accessible as possible, and I don't want to add an extra barrier to entry by requiring you to learn TypeScript. JSDoc is a great lightweight alternative to TypeScript, and it's what you'll be using in this course.