Storybook & Atomic Design – 1.0. – Introduction and Final Product

The Final Product

What we'll be building

View the full course playlist at -

In this course, we'll be building the front-end components required for a new e-commerce website named 'Celtic Elements', a spa-focused product range which promotes self-care.

We'll be using Storybook with a Component Driven Approach to develop our designed website into components ready for use in a production application.

Throughout the course, we'll cover the following lessons -

  1. Atomic Design principles
  2. Getting started with Storybook
  3. Building our stories
  4. Building our application wrapper
  5. Building our button (atoms)
  6. Styling our button
  7. SVG Support
  8. Storybook Add-ons
  9. Building our navigation (molecules)
  10. Building our footer (organisms)
  11. Building our header
  12. Building our post template (templates)
  13. Building our Homepage (pages)
  14. Apollo Provider
  15. Responsive Styled Components
  16. Deploying our pattern library to Netlify

What is Storybook

Storybook is a popular design system/pattern library framework which helps document components within a given system.

The Storybook documentation and developer support is great at the time of writing this, especially when compared to alternative platforms. It has one of the largest contributor bases, add-on support and flexibility with many starter kits available for HTML, Vue and most importantly React!

Importance of Documentation

Throughout this course, you'll focus on building components in Storybook first before integrating them into your application later. This has it's benefits, most notably that the same components could be imported to any React context in the future, allowing for consistency across web products.

We'll also be adding support for notes, knobs and design previews to our pattern library in a lesson that covers add-ons.

This will allow all stakeholders of a project to instantly view, experiment and learn about components used within the end-applications.

I can't count the number of times I've been onboarded to a project where I've thought, "if we just had documentation on these components I'd be up to speed in a day".

Instead, developers either have no documentation around components or they've simply dumped all of the components on a private master page which gives no explanation or context to the components.

Let's make it easier for developers to join your efforts in building products, make it easier for stakeholders to be kept in the loop, and future-proof your project so that when you revisit it later on, you aren't spending time relearning what you've built.

Scaling a System

When scaling a website product, you'll often find one of the biggest challenges is in maintaining legacy components, speed or performance, and the largest of all consistency.

With a design system in place, you can isolate components, creating a high-level of precision in your development process. Shipping components which are consistent and focus on their performance both in and out of the context of your application.

You'll easily be able to identify different variations of components (button variations in size or colour) and supply these components to developers looking to build a new page. Removing their itch to build a blue button which has a slightly different shade of blue than that of the defined brand's colour palette.

In the next lesson, we'll be covering the foundational design methodology taken on this project 'Atomic Design' before we jump into developing components in Storybook and start writing our stories.

Continue Reading 📚