Course Introduction

What is this course about?

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 02:02] Hey there and welcome to Storebook for React apps. My name is Yambraga and I'm the instructor of this course I'm a software engineer at Traumatic and I'm part of a storebook team And I want to show you how Storebook can improve developer and designer collaboration by a lot I've set up Storebook and campus companies and I saw how to develop and workflow improved so much after doing that So much that I actually created this course to share all that experience with you We're gonna learn what Storebook is and the key concepts around it like atomic design and component driven development Next we're gonna use Mule Drop to showcase the development process of a feature in the app using Storybook We're gonna learn how to break the design down into components and start adding them to Storybook from the most atomic ones to complex Composition of components in that process We'll use a variety of Storybook add-ons that help increase productivity and will also integrate Figma designs into Storybook We're gonna go through different ways of handling and mocking fetch requests in Storybook using tools like mock service worker And we're gonna even add entire pages to Storybook allowing us to simulate every use case of a page like the success Error loading and more on top of that We'll be using the latest features of Storybook such as interactions Combining the power of Storybook wrappers for testing library and just that run in the browser so that we can write stories with automated interactions We have an entire module about testing of which will learn different testing strategies and automate interaction and accessibility tests using the Storybook test runner And finally we'll be setting up chromatic a cloud-based tool that improves your storybook experience by bringing your storybook hosting And visual regression tests in a way that will help you catch regressions But also improve the collaboration between you and your colleagues while making pull requests By the end of this course You're gonna know so much about Storybook you will be able to impress your entire team by implementing a tool Which will greatly improve their development workflow I'm super excited that you're joining me in this journey and I cannot wait to show you all the wonders of Storybook Let's get to it