Accessing the project

[00:00 - 00:04] By now, you should be experienced with the basics of Storybook. So it's time to access the main project.

[00:05 - 00:15] The main project can be found in GitHub in the link provided in this course. It includes Mule Drop, which is a real-world application that will serve as an example for us to do all kinds of stuff throughout the course.

[00:16 - 00:37] So this is the repository. It's a template that we can use, and it explains just a little bit what exactly Mule Drop is, as well as the scripts that you can run, and also it mentions that each of the module has its own branch. So essentially, not only you have the main, which is the initial version of the project, but also you have a branch for the beginning and the end of each module, in case you want to use it as a reference.

[00:38 - 00:53] So let's go ahead and start a project if you like, and click on the button "Use this template" so that we can clone this into our own project. So I'm going to call this Storybook for React Apps, which is the name of the course, but you can call it anything you like.

[00:54 - 01:00] The important part here is that you have to click on "Include All Branches". If you do want to get the branches from each module that I just showed you.

[01:01 - 01:15] So click on this button so that we have our own project in our own user, and once this is done, all we have to do is click on "Code" and copy this so we can clone to our computer. So I'm going to bring up the terminal right here.

[01:16 - 01:29] I'm going to do "Get Clone" with that URL, which we just copied. Now it's time to open that project in our favorite editor of choice. In my case , I'm going to be using VS Code, so Storybook for React Apps.

[01:30 - 01:34] There you go. And over here you have the initial version of the project.

[01:35 - 01:47] And by the way, if you're also using VS Code, there are some configurations here, which will allow you to get all kinds of suggestions so that your experience in VS Code is similar to mine. So let's just quickly go through the structure of this course.

[01:48 - 01:58] So we've got a source folder with some API specific code, some state management specific code. Under components you have the shared components which are used throughout the application.

[01:59 - 02:09] You've got some hooks and some pages which are using those common components, but at the same time they also contain their own specific components. And a bunch more stuff.

[02:10 - 02:19] And also it's very important to go into the app.jsx file, which is basically where the main things start happening. And the reason that everything is red is because we haven't installed the dependencies yet.

[02:20 - 02:27] So let's open the terminal and type yarn so we can install them. And while this is happening, let's go through what's going on here.

[02:28 - 02:42] So the app.jsx files normally the place where most of the wrappers are put in, so that you can know what exactly the application needs and uses. So over here we see that this is using React Router DOM, as well as a store provider, which means that we're using Redux.

[02:43 - 02:49] And a theme provider from style components. And then we've got some global styles and some application routes.

[02:50 - 03:01] So a lot of stuff happening over here, but you don't need to care about the details right now, because we're gonna go through it in the next lessons. And once this is done, let's run the application to get to know more about it by typing yarn starts.

[03:02 - 03:14] So meal drop is a restaurant application where you can find all kinds of different food and you can order them. If you click on view all restaurants, you go into the category list page and then you can select different categories.

[03:15 - 03:24] So let's just say burgers and then you go ahead into the category detail page. Once you select a restaurant, you go to the detail of that restaurant and then you can interact with it.

[03:25 - 03:31] This page is hooked to Redux. So when you make changes here, you see that they are reflected on the sidebar over here.

[03:32 - 03:43] And you can also change them back, which will also get reflected in the component. So if you go to the checkout page, you fill in the forms, you complete the order, you finish basically the flow of meal drop.

[03:44 - 03:50] Also, every component is themed. So if we go back to the home page and we click on this button, you'll see that every component has dark and light mode.

[03:51 - 04:01] So meal drop is this composition of a bunch of reusable components that you can see over here. For instance, the category, if you go to view all categories, it actually looks different, but it's the same component in different shapes.

[04:02 - 04:09] And the best way to get a visual overview of your components is by having them all in storybooks. So this project contains a storybook in a very basic form.

[04:10 - 04:34] So let's go back to this and open a new terminal to run storybook by typing your own storybook. So essentially, this project contains a basic page that gives you some guidance in the course with some links for the lessons, some links for the designs, also the actual meal drop application, a link to the repository, as well as a link to the Discord chat community so you can ask any questions over there.

[04:35 - 04:51] And if you want to follow me for any updates, there's also my socials over here . And if you look on the sidebar, there's also a design system documentation example containing colors for both light and dark mode, with the name of the variables and their values so you can access for reference , as well as some examples for the typography of the app.

[04:52 - 04:59] If you've managed to get everything up and running so far, this is great. The idea of this lesson is just to get to know more about the application.

[05:00 - 05:06] If you've had any trouble so far, please reach out to the Discord community and we'll help you from there. Otherwise, I'll see you in the next lesson.