Course details
Contents
Learner outcome
- Confident navigating Storybook UI
- Confident in creating new components and stories
- Competent in domain terminology and concepts
- Capable of finding answers utilizing docs and community
- Deploy Storybook to a Chromatic
Curious about visual regression testing using Chromatic
Topics included
- Navigate Storybook UI
- Inspect and manipulate Stories with essential addons
- Write static stories using CSF + Args
- Write interactive stories using CSF + Play functions
- Install and register addons
- Basic documentation with Markdown
- Add global stylesheets and fonts
Apply continuous visual regression testing with Chromatic
Topics excluded
- UI libraries (React, Vue, Svelte, etc)
- Framework integrations (Next.js, SvelteKit, Angular, etc.)
- Builders (Vite, Webpack)
- Integrate with specific frameworks
- Data mocking and API integration
- Storybook v1-6
- Integrate with test-runner
- Advanced Docs (MDX is React-specific)
- Renderer-specific features, e.g. Decorators
Education style
Two-pass approach. Like Genesis 1. Say what happened in the abstract. Then say it again in concrete terms.
- Demonstrate features is the example stories
- Write new stories from scratch
Sandbox
| Builder | Language | Renderer |
|---|---|---|
| Vite | JavaScript | React |
This framework should provide the fastest, most approachable experience for most people.
Next courses…
- Storybook in TypeScript
- Advanced Storybook for {renderer} Developers
- Build a Living Design System with Storybook and Figma
Suggested by GPT4:
1. **Mastering Advanced Storybook Workflows**
- Dive into sophisticated workflows and techniques to maximize your Storybook efficiency.
2. **Dynamic Storybook: Beyond the Basics**
- Explore dynamic aspects of Storybook, including real-time data handling and advanced state management.
3. **Customizing Storybook for Enterprise Applications**
- Tailor Storybook to fit the unique needs of large-scale, enterprise-level applications.
4. **Automating UI Testing with Storybook**
- Learn how to automate UI testing within Storybook, integrating with CI/CD pipelines for streamlined development.
5. **Storybook for Design Systems: A Deep Dive**
- Explore in-depth techniques for leveraging Storybook in maintaining and scaling design systems.
6. **Integrating Storybook with Modern Frontend Frameworks**
- Advanced integration techniques for using Storybook with frameworks like React, Angular, Vue, and Svelte.
7. **Performance Optimization in Storybook**
- Techniques for optimizing the performance of Storybook instances, particularly in large-scale projects.
8. **Collaborative UI Development with Storybook**
- Focus on collaborative features of Storybook that enhance teamwork in UI development.
9. **Extending Storybook with Custom Addons**
- A guide to developing custom addons to extend Storybook’s functionality tailored to specific project needs.
10. **Storybook and Microfrontends: A Comprehensive Guide**
- Exploring the role of Storybook in developing and managing microfrontends.
11. **Storybook for Mobile App Development**
- Adapting Storybook for mobile app development, including React Native and other mobile frameworks.
12. **Scaling Storybook Across Large Teams and Projects**
- Strategies and best practices for effectively scaling Storybook usage across large teams and projects.
13. **Storybook and Accessibility: Advanced Techniques**
- Advanced strategies for ensuring and maintaining accessibility in UI components using Storybook.
14. **From Stories to Screens: Storybook in the Design Process**
- Integrating Storybook into the UI/UX design process for a seamless transition from design to development.
15. **Leveraging Storybook for Full-stack Development** - Utilizing Storybook in a full-stack development environment, aligning front-end and back-end aspects effectively.
Each of these courses can target specific pain points or areas of interest for advanced Storybook users, providing them with deep dives into topics that can help them make the most out of this powerful tool.