Breaking down our use-case

[00:00 - 01:08] In the previous module, we learned about component driven development and atomic design, both of which revolve around starting from the bottom and going all the way to the top when building UI, making sure that you have the most atomic pieces first and then you compose them into bigger, more complex structures. We want to apply these concepts while developing a feature in meal drop. So let's start with the use case. The project manager comes to you and says, we're not really happy with the homepage. The homepage does not provide all the information we want and the restaurants are not as discoverable as they can be. So the project manager comes up with a proposal. The proposal is to add a new section to the homepage with a list of favorite restaurants in a counter cell so that they are more discoverable and accessible for the users. So once you're assigned to this task, you need to make sure that you have all the information necessary to build it. And the first thing is, if this is all the asset that you have, just an image of the design, this is not enough. You need to make sure that you have access to the actual design files so that you have access to typography, to colors, to spaces and other design tokens.

[01:09 - 02:35] And this way, you're making sure that you have a proper collaboration with the designers instead of taking assumptions right into the first place and having them request changes because you ended up making something that they were not happy with. So let's open the designs from the link in the description of this lesson. And once we're in the design, we can start analyzing this feature and break it down into sub components. If you want, you can pause the video for a second and try to do yourself. Otherwise, let's do it together. Over here, we have a typography component, which is used also at here and there. There is also a badge component, which shows the category of the restaurant, as well as a review for the restaurant. There is an image and all of these together, they compose a restaurant card and these restaurant cards are grouped into a carousel, which contains this round button that serves as a way to navigate. And we also can notice that this component is actually also used in the categories detail page, although not in a carousel. As well as the restaurant detail page, we also see that the review component and the badge component are used. So this is actually very interesting because first of all, these components, they should be reusable and they should be part of some sort of component library so that we can access them in different pages and components.

[02:36 - 03:30] Overall, the component breakdown will look like this. The restaurant section containing a title and a carousel of restaurant cards is broken down into a restaurant card, which then is broken down into all of these atomic components. And this is pretty interesting because we essentially already structured all of the react components that we need to build. This is a very interesting exercise that you should always apply whenever you're working in building UIs. And the very interesting fact about the design is that if we go back to Figma, the designs were already made thinking of components. If you double click in this restaurant card, you will see on the right side the name of the component and different states of it. If you go deeper, for instance, into the badge component, you will see it's also a component. The same goes for the review. And in fact, if you select the restaurant card, you can click on this button, which will go to the component definition.

[03:31 - 04:30] And this is actually part of the component library overview. And over here, you can see all of the visual states of the restaurant card, which is great because it serves for us as a visual indication of how our component must react. And if you, for instance, if you clone this component and put it to the side, you will see on the right side, there's a different property for state. It's called normal, but you can also select closed. It will change how it visually looks like. And the same goes for new and loading. And what are these things, if not just react props, right? These urges component props that we can think of when building our component. And this is a great thing that has been happening on the design tooling side of things, because all of the design tools are introducing the concept of components and variants, which actually makes the designers think just like the developers. And that makes life easier for all of us, which is great. So given that we have all of this information and we've got our component breakdown, I think it's time to start building them. So I'll see you in the next lesson.