{"id":15437526,"url":"https://github.com/yannbf/mealdrop","last_synced_at":"2025-03-27T00:13:16.317Z","repository":{"id":37607562,"uuid":"296364930","full_name":"yannbf/mealdrop","owner":"yannbf","description":"Mealdrop is a \"real world\" app built to show good practices and examples of Storybook","archived":false,"fork":false,"pushed_at":"2024-04-03T16:40:41.000Z","size":53355,"stargazers_count":161,"open_issues_count":2,"forks_count":41,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-13T17:08:26.818Z","etag":null,"topics":["react","storybook","typescript"],"latest_commit_sha":null,"homepage":"http://mealdrop.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yannbf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-17T15:19:45.000Z","updated_at":"2024-04-30T14:53:52.751Z","dependencies_parsed_at":"2024-04-30T15:03:58.152Z","dependency_job_id":null,"html_url":"https://github.com/yannbf/mealdrop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannbf%2Fmealdrop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannbf%2Fmealdrop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannbf%2Fmealdrop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yannbf%2Fmealdrop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yannbf","download_url":"https://codeload.github.com/yannbf/mealdrop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245755679,"owners_count":20667027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","storybook","typescript"],"created_at":"2024-10-01T18:57:45.109Z","updated_at":"2025-03-27T00:13:16.298Z","avatar_url":"https://github.com/yannbf.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## MealDrop\n\nStorybook 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!\n\nWith 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!\n\nThis 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:\n\n- Modern React with [Typescript](https://www.typescriptlang.org/) and hooks\n- Styles with [Styled components](http://styled-components.com/)\n- State management [Redux](https://redux.js.org/) with [@reduxjs/toolkit](https://redux-toolkit.js.org/)\n- Tests with [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n- Routing with [React router](https://reactrouter.com/)\n- Component explorer [Storybook](https://storybook.js.org/)\n\nEvery component of the app is developed and documented in Storybook, and the designs are all in Figma.\n\n[![MealDrop Demo](https://img.shields.io/badge/MealDrop-Live%20demo-green?style=for-the-badge\u0026logo=vercel)](http://mealdrop.vercel.app/)\n[![MealDrop Storybook](https://img.shields.io/badge/MealDrop-Storybook-ff4785?style=for-the-badge\u0026logo=storybook)](http://mealdrop.vercel.app/storybook)\n[![MealDrop Designs](https://img.shields.io/badge/MealDrop-Designs-eeeeee?style=for-the-badge\u0026logo=figma)](https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop)\n\n![](./.github/media/application-example.png)\n\nYou can check this repo as a reference for:\n\n- The core concepts of Storybook\n- Development workflow with Storybook\n- Using the full potential of Storybook, adding components, features and pages\n- Testing strategies with Storybook\n- Building UI faster\n- Mental models for component development\n- Tools to improve designer-developer collaboration\n- Best practices\n\n## What the demo showcases\n\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/docs/design-system-colors--docs\"\u003eDocumenting design tokens\u003c/a\u003e\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/docs/components-button--docs\"\u003eDocumenting components\u003c/a\u003e\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/story/pages-categorydetailpage--default\u0026addonPanel=storybook/a11y/panel\u0026panel=right\"\u003eAccessibility testing\u003c/a\u003e\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/story/pages-restaurantdetailpage--not-found\u0026panel=right\"\u003eNetwork mocking\u003c/a\u003e\n- Rendering components in isolation, from the \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/docs/components-button--default\u0026panel=right\"\u003esimplest\u003c/a\u003e to the \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/story/userflows-app--home\u0026panel=right\"\u003emost complex ones\u003c/a\u003e\n  ![](./.github/media/restaurant-card-stories.gif)\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/story/userflows-app--to-success-page\u0026addonPanel=storybook/interactions/panel\u0026panel=right\"\u003eInteraction testing\u003c/a\u003e\n  ![](./.github/media/interaction-tests.gif)\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/story/components-button--default\u0026addonPanel=STORYBOOK_ADDON_DESIGNS/panel\u0026panel=right\"\u003eDesign integration (Figma)\u003c/a\u003e\n  ![](./.github/media/figma-connect.png)\n- \u003ca href=\"https://mealdrop.vercel.app/storybook/?path=/story/components-button--default\u0026globals=theme:dark\"\u003eTheme switching\u003c/a\u003e\n  ![](./.github/media/theme-toolbar.gif)\n- And much more!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyannbf%2Fmealdrop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyannbf%2Fmealdrop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyannbf%2Fmealdrop/lists"}