Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yannbf/mealdrop
Mealdrop is a "real world" app built to show good practices and examples of Storybook
https://github.com/yannbf/mealdrop
react storybook typescript
Last synced: 16 days ago
JSON representation
Mealdrop is a "real world" app built to show good practices and examples of Storybook
- Host: GitHub
- URL: https://github.com/yannbf/mealdrop
- Owner: yannbf
- Created: 2020-09-17T15:19:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T16:40:41.000Z (10 months ago)
- Last Synced: 2024-04-13T17:08:26.818Z (10 months ago)
- Topics: react, storybook, typescript
- Language: TypeScript
- Homepage: http://mealdrop.vercel.app/
- Size: 50.9 MB
- Stars: 161
- Watchers: 5
- Forks: 41
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](https://twitter.com/yannbf) (from the Storybook team). It's a food delivery app built from scratch with:
- Modern React with [Typescript](https://www.typescriptlang.org/) and hooks
- Styles with [Styled components](http://styled-components.com/)
- State management [Redux](https://redux.js.org/) with [@reduxjs/toolkit](https://redux-toolkit.js.org/)
- Tests with [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- Routing with [React router](https://reactrouter.com/)
- Component explorer [Storybook](https://storybook.js.org/)
Every component of the app is developed and documented in Storybook, and the designs are all in Figma.
[](http://mealdrop.vercel.app/)
[](http://mealdrop.vercel.app/storybook)
[](https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop)
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
- Documenting design tokens
- Documenting components
- Accessibility testing
- Network mocking
- Rendering components in isolation, from the simplest to the most complex ones
- Interaction testing
- Design integration (Figma)
- Theme switching
- And much more!