1 00:00:00,300 --> 00:00:07,700 All right, so let's get familiar with the star project now, of course, since this is the bigger project, 2 00:00:08,100 --> 00:00:15,480 I believe it's the biggest one in the course, there's more info that we need to cover as far as they 3 00:00:15,480 --> 00:00:16,510 are now. 4 00:00:16,530 --> 00:00:18,720 Start very simply with the public one. 5 00:00:19,140 --> 00:00:23,550 Remember, we had the redirects and that was for an amplifier. 6 00:00:23,790 --> 00:00:27,930 So the fly and react router would play nicely. 7 00:00:28,090 --> 00:00:33,060 And I have covered that already before and of course, so I would just leave it at that. 8 00:00:33,450 --> 00:00:38,990 Then we have it next to them now and here we really only care about the title. 9 00:00:39,330 --> 00:00:42,590 So in this case it says comfy slot star. 10 00:00:42,850 --> 00:00:47,420 So if you change this round, of course, the title will also change. 11 00:00:47,760 --> 00:00:54,480 Now, as a side note, if you do want to get a favor, you just need to get it online and then replace 12 00:00:54,480 --> 00:00:58,010 it, because at the moment, of course, we just have the react one. 13 00:00:58,350 --> 00:00:59,850 So that should do it for the public. 14 00:00:59,970 --> 00:01:01,670 Nothing really interesting over there. 15 00:01:02,670 --> 00:01:09,360 Then we have a source, of course, this is where we'll do all of our work, essentially, and in here, 16 00:01:09,360 --> 00:01:11,940 like I said, this is a much bigger project. 17 00:01:12,160 --> 00:01:14,780 So essentially we have way more folders. 18 00:01:14,790 --> 00:01:19,900 And also you'll notice that way, more files here as well. 19 00:01:20,220 --> 00:01:21,380 Let's start very simply. 20 00:01:21,630 --> 00:01:22,620 We have assets. 21 00:01:22,630 --> 00:01:28,390 So this is where I keep the images that I will use in the project. 22 00:01:28,440 --> 00:01:33,860 So here I have the logo, essentially the country slot and also two hero images. 23 00:01:34,200 --> 00:01:39,930 Now, rest of the images, if we take a look at the project, are going to be coming from the API. 24 00:01:40,230 --> 00:01:44,730 So I set up my own API where, of course, all the products have the images. 25 00:01:45,010 --> 00:01:51,190 That's why when we talk about assets, we to talk about this logo here and these two images, that's 26 00:01:51,240 --> 00:01:54,270 all we've got over there and we have components. 27 00:01:54,600 --> 00:02:00,330 So, of course, these are all components that we'll use throughout the project. 28 00:02:00,880 --> 00:02:07,950 Now, not only I set up the imports since I avoided to retyping the boilerplate. 29 00:02:08,100 --> 00:02:09,870 And of course, I'll cover that in a second. 30 00:02:10,350 --> 00:02:14,900 But you'll also have the styled component over here. 31 00:02:15,060 --> 00:02:17,280 So don't freak out if you go through the components. 32 00:02:17,610 --> 00:02:19,260 And then, of course, you can see the imports. 33 00:02:19,470 --> 00:02:21,810 We should be already familiar with that, correct? 34 00:02:22,620 --> 00:02:29,730 And then not only there's a boiler plate for the component, there's also some funny looking scissors. 35 00:02:30,120 --> 00:02:36,780 Now this funny looking Jesus is styled component that I'm going to cover in the next videos just to 36 00:02:36,780 --> 00:02:38,910 give you a general idea how it works. 37 00:02:39,300 --> 00:02:46,110 But essentially, the idea is following where once we used style components, I don't have to jam all 38 00:02:46,110 --> 00:02:48,360 my styles in the indexes. 39 00:02:48,620 --> 00:02:50,930 Now, you will find some global styling here. 40 00:02:51,180 --> 00:02:55,650 Norrish here we have some typography stuff and things like that. 41 00:02:55,650 --> 00:03:01,610 But when it comes to individual components, we'll set up all our success over here. 42 00:03:02,010 --> 00:03:05,280 And of course, I said I'll talk about it in greater detail. 43 00:03:05,280 --> 00:03:07,040 Next video, but don't freak out. 44 00:03:07,500 --> 00:03:12,180 This doesn't mean that I already prepared some functionality for, you know, because it just means 45 00:03:12,180 --> 00:03:15,900 that I placed all my styling right away in the component. 46 00:03:16,230 --> 00:03:19,680 And I'm going to cover that how it works a bit later. 47 00:03:19,890 --> 00:03:26,760 So, again, if you visit any of these components, what you find there is just some boilerplate, just 48 00:03:26,760 --> 00:03:33,060 some basic boilerplate, because, again, we have done this already quite a few times. 49 00:03:33,540 --> 00:03:40,230 And for the bigger project, if we would have to write all the imports, if we would need to create 50 00:03:40,230 --> 00:03:47,160 all our files, if we would need to create all the folders and everything together, you need to understand 51 00:03:47,160 --> 00:03:51,180 that, of course, that would add two or three hours to the project. 52 00:03:51,480 --> 00:03:57,090 And I don't mind adding two or three hours to the project when it comes to functionality, because dad, 53 00:03:57,090 --> 00:03:58,080 of course, is interesting. 54 00:03:58,500 --> 00:04:05,070 But when we talk about boilerplate, I don't really think that you're getting anything out of the fact 55 00:04:05,070 --> 00:04:11,070 that you need to create a file, then you need to create a boilerplate and hopefully you get the idea. 56 00:04:11,100 --> 00:04:17,670 That's why, yes, all the components are already prepared for you as far as the boilerplate and as 57 00:04:17,670 --> 00:04:18,870 far as the import. 58 00:04:19,200 --> 00:04:21,300 So I'll never get back to the content. 59 00:04:21,310 --> 00:04:22,350 I'll just save it. 60 00:04:22,650 --> 00:04:29,050 And then if we take a look at the next folder, we can say that it is going to be a complex. 61 00:04:29,610 --> 00:04:32,870 So, yes, we'll use, of course, the context API. 62 00:04:33,210 --> 00:04:39,410 Now, why this project is going to be interesting because we will use multiple contacts. 63 00:04:39,750 --> 00:04:44,130 So there's going to be one for CA, there's going to be one for filter and there's going to be one for 64 00:04:44,130 --> 00:04:45,660 product and the user. 65 00:04:46,050 --> 00:04:49,910 And you also notice that we'll use use a reduction. 66 00:04:50,070 --> 00:04:54,030 That's why we have special reducers folder. 67 00:04:54,300 --> 00:04:58,550 And in there we have files, we have all the reducers. 68 00:04:58,560 --> 00:05:05,550 And here I right away have all the actions because again, if you take a look at the actions, I did 69 00:05:05,550 --> 00:05:09,780 not really see the point of us typing this together. 70 00:05:10,170 --> 00:05:15,420 So essentially we have the actions and I have the variables that have the string value. 71 00:05:15,930 --> 00:05:21,750 I didn't see any benefit of typing this together with you, since we already know how to create them. 72 00:05:22,170 --> 00:05:26,820 And now back to the context, first of all, why we use use ergaster. 73 00:05:26,820 --> 00:05:33,960 And the story is somewhat simple where when it comes to bigger project, you definitely want to have 74 00:05:33,960 --> 00:05:34,590 the structure. 75 00:05:35,040 --> 00:05:39,000 And previously, before we use reducer, that was a reduction. 76 00:05:39,150 --> 00:05:46,740 Now, with the arrival of user Douceur, it provides that functionality, that structure, because you 77 00:05:46,740 --> 00:05:52,920 need to keep in mind that the bigger your project gets and the more features you're trying to add, 78 00:05:53,220 --> 00:06:01,020 the easier it is to add some kind of box, especially especially if you work as a team. 79 00:06:01,870 --> 00:06:08,250 That's why when it comes to bigger project through enterprise projects, there's always some kind of 80 00:06:08,250 --> 00:06:13,310 structure previously before user register that was a redux. 81 00:06:13,830 --> 00:06:22,350 Now with arrival of user dicer, you can essentially set up everything using the user producer instead. 82 00:06:22,890 --> 00:06:27,810 But I just want to let you know that technically you could have slapped the use state. 83 00:06:28,230 --> 00:06:33,660 So essentially, instead of using user Doozer, you could have set up the state values and you would 84 00:06:33,660 --> 00:06:34,530 be in good shape. 85 00:06:34,530 --> 00:06:41,100 But you need to understand that, of course, eventually, as your project gets bigger, you might run 86 00:06:41,100 --> 00:06:44,820 into some weird bugs because there is no structure. 87 00:06:45,150 --> 00:06:51,300 So even though you might be tempted to think, hey, listen, this user user is way too much work, 88 00:06:51,660 --> 00:06:57,930 you need to understand that it's not because we have a hello world, that it's not like we have just 89 00:06:57,930 --> 00:07:00,230 a simple to do list or whatever. 90 00:07:00,510 --> 00:07:04,480 We have an app where we constantly will be adding more and more features. 91 00:07:04,770 --> 00:07:12,540 So in order to avoid introducing some kind of weird and hard to find bugs, yes, there's going to be 92 00:07:12,540 --> 00:07:16,200 a structure which just means that as we're building the project. 93 00:07:17,020 --> 00:07:21,190 It might get annoying, especially in the beginning, because you might be tempted to think, hey, 94 00:07:21,190 --> 00:07:26,140 listen, I could just add a stat value and I would be in good shape. 95 00:07:26,620 --> 00:07:34,230 Now, if you're familiar with redacts, you know that there's a store and usually there's multiple reducers, 96 00:07:34,720 --> 00:07:36,100 not what user, Dirceu. 97 00:07:36,100 --> 00:07:39,050 It's somewhat of the pain to have that kind of setup. 98 00:07:39,070 --> 00:07:42,420 So instead, we're going to have multiple contacts. 99 00:07:42,880 --> 00:07:46,930 So like I said, we have one for card, one for filter, one for product and one for years. 100 00:07:47,530 --> 00:07:54,280 And also, I wouldn't want to mention that technically we could have set up one global context and then 101 00:07:54,280 --> 00:07:55,460 only one reducer. 102 00:07:55,960 --> 00:08:02,260 Now, what you need to understand, though, is that this global context would be giant because, of 103 00:08:02,260 --> 00:08:05,990 course, we have all this functionality in here and the same would be for reducer. 104 00:08:06,470 --> 00:08:15,580 That's why I split them up, because in my opinion, it is much more easier to navigate around the project 105 00:08:15,580 --> 00:08:18,330 if you have separated the concerns. 106 00:08:18,640 --> 00:08:24,940 Now, if you need to brush up on user user, please do so because of course, I'm assuming that you're 107 00:08:24,940 --> 00:08:30,910 already familiar with, you know, what are the actions, why we're passing in the state and this patch 108 00:08:31,090 --> 00:08:32,650 and all that good stuff. 109 00:08:32,860 --> 00:08:35,140 Then we have the pages. 110 00:08:35,560 --> 00:08:38,830 And essentially these are the same area components. 111 00:08:39,280 --> 00:08:45,220 And of course, the difference is that we will use them as pages in our reactor. 112 00:08:45,640 --> 00:08:47,320 So essentially same components. 113 00:08:47,770 --> 00:08:53,440 We have ones that we're going to use in the pages and then we have the ones that are going to be pages. 114 00:08:53,830 --> 00:08:57,460 And I just split them up in the pages directory. 115 00:08:57,670 --> 00:09:02,790 That's the only thing that I'm doing, because then we have reducers which we already covered. 116 00:09:02,800 --> 00:09:07,810 We have a bit of Yuto functions and I'll talk about them once we get there. 117 00:09:07,960 --> 00:09:13,350 There's really no point of making it more difficult than it should be for now. 118 00:09:13,360 --> 00:09:14,250 Don't worry about them. 119 00:09:14,650 --> 00:09:20,440 And like I said, actions which we're going to use in our use, the reducer, of course, Apgar's. 120 00:09:20,620 --> 00:09:23,020 This is where all our application will meet. 121 00:09:23,440 --> 00:09:24,190 In this case. 122 00:09:24,200 --> 00:09:30,250 We have, of course, the router, we react router and also some components that I would want to display 123 00:09:30,250 --> 00:09:31,480 in every page. 124 00:09:31,900 --> 00:09:37,420 Like I already mentioned, in the US, we have the global styling, but there's going to be specific 125 00:09:37,420 --> 00:09:45,670 styling for the components of that we're going to set up using the excess in jazz style components in 126 00:09:45,670 --> 00:09:46,240 the case. 127 00:09:46,510 --> 00:09:48,250 And then we have indexed jazz. 128 00:09:48,550 --> 00:09:54,430 And in that index, just notice how I'm importing all the contacts. 129 00:09:54,760 --> 00:10:01,230 So I have one for product, one for filter and against card user and also eventually auth provider. 130 00:10:01,600 --> 00:10:07,270 So unlike the previous project where we had one global context and we just wrapped the up. 131 00:10:08,150 --> 00:10:15,860 In this case, you'll see how nasty those particular context, just because we would want to get some 132 00:10:15,860 --> 00:10:23,120 data from one to another one, and when it comes to boilerplate, if you take a look at the any context, 133 00:10:23,120 --> 00:10:25,390 of course, there's going to be the actions that we're going to use. 134 00:10:25,670 --> 00:10:30,420 There's going to be that specific producer that is responsible for filter. 135 00:10:30,590 --> 00:10:36,380 So, for example, filter context is going to filter reducer because, of course, I will use my user, 136 00:10:36,390 --> 00:10:40,790 Dirceu, and then we have some initial site which always is going to be the object. 137 00:10:41,120 --> 00:10:45,620 And then remember the boilerplate, we had some kind of context, whatever is the name. 138 00:10:45,640 --> 00:10:49,910 So whether it's called filter or whatever, then we create that context. 139 00:10:49,910 --> 00:10:57,410 We have the provider that is responsible for wrapping our application and providing this value, which 140 00:10:57,410 --> 00:10:59,390 is just going to be strong at the start. 141 00:10:59,720 --> 00:11:06,320 And then, of course, we use the children since we would want to render whatever is inside of the component 142 00:11:06,650 --> 00:11:08,510 and then we have our hook. 143 00:11:08,930 --> 00:11:11,600 So we have in this case use filter context. 144 00:11:11,840 --> 00:11:18,410 But then you can already guess that for the user, this is going to be use user context and then so 145 00:11:18,410 --> 00:11:19,160 on and so forth. 146 00:11:19,430 --> 00:11:20,690 Hopefully everything is clear. 147 00:11:21,440 --> 00:11:29,810 Hopefully you understand the setup and I guess we'll start by getting to know the styled components.