Mealdrop

MealDrop

Storybook is an open-source tool that helps you develop UI components in isolation. It runs in your codebase, but separately from your application. It's like a sandbox, allowing you to not get distracted by incomplete APIs, flaky data, and other external dependencies. It integrates with frameworks like React, Vue, Svelte, Angular, and many others!

With Storybook, you can ease the development of a design system and share a common language with Designers. QA's can get an overview and test functionalities in isolation. Stakeholders can use it for demo purposes. Overall, Storybook helps connect all of these people, greatly improving collaboration!

This is MealDrop, a real-world like project made by Yann Braga (from the Storybook team). It's a food delivery app built from scratch with:

• Modern React with Typescript and hooks
• Styles with Styled components
• State management Redux with @reduxjs/toolkit
• Tests with Vitest and React Testing Library
• Routing with React router
• Component explorer Storybook

Every component of the app is developed and documented in Storybook, and the designs are all in Figma.

You can check this repo as a reference for:

• The core concepts of Storybook
• Development workflow with Storybook
• Using the full potential of Storybook, adding components, features and pages
• Testing strategies with Storybook
• Building UI faster
• Mental models for component development
• Tools to improve designer-developer collaboration
• Best practices

What the demo showcases

• <a href="https://mealdrop.vercel.app/storybook/?path=/docs/design-system-colors--docs">Documenting design tokens</a>
• <a href="https://mealdrop.vercel.app/storybook/?path=/docs/components-button--docs">Documenting components</a>
• <a href="https://mealdrop.vercel.app/storybook/?path=/story/pages-categorydetailpage--default&addonPanel=storybook/a11y/panel&panel=right">Accessibility testing</a>
• <a href="https://mealdrop.vercel.app/storybook/?path=/story/pages-restaurantdetailpage--not-found&panel=right">Network mocking</a>
• Rendering components in isolation, from the <a href="https://mealdrop.vercel.app/storybook/?path=/docs/components-button--default&panel=right">simplest</a> to the <a href="https://mealdrop.vercel.app/storybook/?path=/story/userflows-app--home&panel=right">most complex ones</a>
• <a href="https://mealdrop.vercel.app/storybook/?path=/story/userflows-app--to-success-page&addonPanel=storybook/interactions/panel&panel=right">Interaction testing</a>
• <a href="https://mealdrop.vercel.app/storybook/?path=/story/components-button--default&addonPanel=STORYBOOK_ADDON_DESIGNS/panel&panel=right">Design integration (Figma)</a>
• <a href="https://mealdrop.vercel.app/storybook/?path=/story/components-button--default&globals=theme:dark">Theme switching</a>
• And much more!