https://github.com/yannbf/storybook-for-react-apps

https://github.com/yannbf/storybook-for-react-apps

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/yannbf/storybook-for-react-apps
• Owner: yannbf
• Created: 2022-01-23T15:19:54.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-19T16:13:50.000Z (over 2 years ago)
• Last Synced: 2024-10-18T10:43:42.530Z (2 months ago)
• Language: TypeScript
• Size: 15.9 MB
• Stars: 69
• Watchers: 3
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Storybook for React Apps

This is MealDrop, the real-world app used in the [Storybook for React apps](https://www.newline.co/courses/storybook-for-react-apps) course built by [Yann Braga](https://twitter.com/yannbf) to serve as an example for all the cool things you can do with Storybook!

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 [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/)

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.

### `yarn storybook`

Launches Storybook on port 6006.

## Each module has its own branch

Ideally you can just work on top of the main branch of this course. However, if you want to jump into a specific module of the course, each module contains its own branches, both for the beginning of the module and for the end of the module following this pattern: `module-0X-begin` and `module-0X-end`.

For instance, for module 03, you can find the branches `module-03-begin` and `module-03-end`.

## Accessing the final version of this project

The final code for this course can be found in the `module-06-end` branch.

The end result is a limited version of the original MealDrop project, which contains every component in Storybook and more addons etc. and can be found [here](https://github.com/yannbf/mealdrop).

## Accessing the course

To access the course, just click on the image below:

[![](./src/docs/assets/mealdrop-banner.png)](https://www.newline.co/courses/storybook-for-react-apps)