Accessing the project
We will be looking at the template project that we will use in this course.
By now, you should be experienced with the basics of Storybook, so it's time to access the main project! The project is called MealDrop, and its purpose is to mimic a food delivery application and serve as a real-life project for us to work on top of for the rest of this course.
In this course, we will be using GitHub, so please go ahead and create an account if you don't have one already.
Using the project template#
Let's proceed and access the project. Go to the Storybok for react apps repo and choose to use the template
Don't forget to check "Include all branches". The template contains branches for every module if you want to use them as reference.
Now, clone the template and open the project in your favorite editor!
Installing and checking project structure#
Let's quickly go through the project's structure. The technologies used in MealDrop are:
React with Typescript
Routing system with React Router
State management with @reduxjs/toolkit
Styles with Styled components
Tests with React Testing Library
The React components can be found under the
templates folders. Redux-related code will be found in
api is where you can find the service that makes API calls. Component, stories, style, and test files are colocated in the same folder for ease of access.
Let me remind you that the focus of this course is Storybook, so we won't get much into detail in the implementation of the components. The main idea is to learn how to configure Storybook in real-life projects, and MealDrop is, in essence, an example of a real-life project.
If you have any questions about specific implementations of this app, feel free to reach out to our Discord community.
Running the project#
Now, let's make sure to install all the dependencies and then run the project:
Your browser should automatically open with the MealDrop application running. Now, feel free to play around with the application to get to know how it looks like and its user flow:
The repo already comes with a simple Storybook configuration setup and a few documentation stories to see as examples. Now, feel free to kill the app that was running before or just keep it running and open a new terminal window. Then, make sure Storybook runs fine before proceeding:
Your browser should automatically open with Storybook running once it finishes building.
If all is running correctly, then you can proceed with the course! In case you found any issues, please reach out to our Discord community for support.
In the next lesson, we will install Storybook in our project and go through its configuration!