1 00:00:01,110 --> 00:00:04,010 Hello, and welcome to the biggest 2 00:00:04,010 --> 00:00:07,420 and most complete project of the course. 3 00:00:07,420 --> 00:00:10,850 And this is kind of the final project of this course, 4 00:00:10,850 --> 00:00:13,280 which brings everything that we have learnt, 5 00:00:13,280 --> 00:00:14,580 up until this point, 6 00:00:14,580 --> 00:00:17,700 into one big and beautiful project. 7 00:00:17,700 --> 00:00:20,610 And so, just like with the Mapty project before, 8 00:00:20,610 --> 00:00:22,000 Let's actually start, 9 00:00:22,000 --> 00:00:24,493 by taking a look, at this project. 10 00:00:26,040 --> 00:00:27,980 And, this is it. 11 00:00:27,980 --> 00:00:30,573 So this is the Forkify application, 12 00:00:30,573 --> 00:00:32,510 that we will build together 13 00:00:32,510 --> 00:00:35,090 over the next couple of hours. 14 00:00:35,090 --> 00:00:38,620 So this application is all about searching for recipes 15 00:00:38,620 --> 00:00:40,003 and displaying them, 16 00:00:40,937 --> 00:00:42,290 here in our user interface. 17 00:00:42,290 --> 00:00:44,490 And in order to get a good idea, 18 00:00:44,490 --> 00:00:46,870 of how this application actually works, 19 00:00:46,870 --> 00:00:50,220 you should probably follow along, this demonstration, 20 00:00:50,220 --> 00:00:53,537 by going to this URL, soforkifyv2.netlify.app. 21 00:00:57,340 --> 00:01:00,663 And so let's search for pizza here. 22 00:01:02,100 --> 00:01:03,910 And so you see, that right away, 23 00:01:03,910 --> 00:01:06,280 here on this left sidebar, 24 00:01:06,280 --> 00:01:08,320 we get all of these results. 25 00:01:08,320 --> 00:01:10,530 And when we have more than ten results, 26 00:01:10,530 --> 00:01:14,700 they actually, get divided up on multiple pages. 27 00:01:14,700 --> 00:01:17,180 So we have this nice pagination here, 28 00:01:17,180 --> 00:01:22,180 which is a very common feature of web applications. Right? 29 00:01:23,690 --> 00:01:26,350 So you've seen this all the time probably. 30 00:01:26,350 --> 00:01:27,940 And so now in this project, 31 00:01:27,940 --> 00:01:31,130 you will learn how to implement this yourself. 32 00:01:31,130 --> 00:01:33,930 Now, okay. And now let's actually click 33 00:01:33,930 --> 00:01:36,230 on one of these recipes, 34 00:01:36,230 --> 00:01:37,960 and you see that then it shows up, 35 00:01:37,960 --> 00:01:39,890 here on the right side. 36 00:01:39,890 --> 00:01:41,310 So we have the cooking time, 37 00:01:41,310 --> 00:01:44,150 the servings, all the ingredients, 38 00:01:44,150 --> 00:01:46,040 and then also a link to the page, 39 00:01:46,040 --> 00:01:48,053 where the recipe actually comes from. 40 00:01:49,440 --> 00:01:50,930 Now here in the servings, 41 00:01:50,930 --> 00:01:52,670 we can actually decrease, 42 00:01:52,670 --> 00:01:56,220 or also increase the number of servings 43 00:01:56,220 --> 00:01:58,660 and as you see down here, the ingredients, 44 00:01:58,660 --> 00:02:01,483 will then automatically get updated. 45 00:02:02,600 --> 00:02:05,860 Right? Then another cool thing that we can do, 46 00:02:05,860 --> 00:02:08,550 is to bookmark recipes. 47 00:02:08,550 --> 00:02:10,130 So as we click here, 48 00:02:10,130 --> 00:02:12,980 then that button changes, 49 00:02:12,980 --> 00:02:15,680 and we also got that recipe bookmark, 50 00:02:15,680 --> 00:02:18,140 here in this nice panel now. 51 00:02:18,140 --> 00:02:21,870 And here you see, I already had a bookmark before, 52 00:02:21,870 --> 00:02:23,490 and as we click that, 53 00:02:23,490 --> 00:02:26,143 it will then of course move to that one. 54 00:02:27,950 --> 00:02:29,690 Now, if we click here again, 55 00:02:29,690 --> 00:02:33,300 then that will basically unbookmark the recipe, 56 00:02:33,300 --> 00:02:35,063 and so you see that now it's gone, 57 00:02:36,690 --> 00:02:38,930 and let's do the same here 58 00:02:38,930 --> 00:02:40,450 and so now it's empty 59 00:02:40,450 --> 00:02:43,833 and we get this kind of warning message instead. 60 00:02:46,240 --> 00:02:50,763 Now right? Now finally, we can actually also add recipes. 61 00:02:51,770 --> 00:02:53,873 So, just click on this button, 62 00:02:54,870 --> 00:02:58,620 and then here, we can just fill in this form. 63 00:02:58,620 --> 00:02:59,890 Now in this demo version, 64 00:02:59,890 --> 00:03:01,940 that's actually not going to work, 65 00:03:01,940 --> 00:03:04,780 because that would very quickly clutter, 66 00:03:04,780 --> 00:03:06,293 this entire application here. 67 00:03:07,500 --> 00:03:10,600 Now, what's special about this recipe upload, 68 00:03:10,600 --> 00:03:13,740 is that, all the recipes that you upload yourself, 69 00:03:13,740 --> 00:03:16,023 will only be visible for yourself. 70 00:03:16,920 --> 00:03:20,140 So, here for example, I have this JS PIZZA, 71 00:03:20,140 --> 00:03:22,980 which was done by me. 72 00:03:22,980 --> 00:03:25,660 And so therefore, it has this icon here, 73 00:03:25,660 --> 00:03:27,750 and also this icon here. 74 00:03:27,750 --> 00:03:30,550 So it means that it was the user itself. 75 00:03:30,550 --> 00:03:32,490 Now, when you open up this page 76 00:03:32,490 --> 00:03:36,710 and search for pizza, then this recipe here, 77 00:03:36,710 --> 00:03:39,620 should probably also appear for yourself 78 00:03:39,620 --> 00:03:40,800 but that's only because, 79 00:03:40,800 --> 00:03:45,380 this version has like a fixed developer API key. 80 00:03:45,380 --> 00:03:49,900 And so each recipe is associated to a certain developer key 81 00:03:49,900 --> 00:03:53,150 and we will see what that means, by the end of the section, 82 00:03:53,150 --> 00:03:56,710 when we actually implement this. Now right? 83 00:03:56,710 --> 00:03:58,950 But I think that's actually it. 84 00:03:58,950 --> 00:04:00,106 So that's the whole functionality, 85 00:04:00,106 --> 00:04:04,570 of the Forkify application, which seems pretty simple 86 00:04:04,570 --> 00:04:07,260 but it will actually be a lot of work, 87 00:04:07,260 --> 00:04:09,200 to implement all of this. 88 00:04:09,200 --> 00:04:10,033 And so hopefully, 89 00:04:10,033 --> 00:04:13,650 it's gonna be a great learning experience for you. 90 00:04:13,650 --> 00:04:17,070 And once again I tried to design this application, 91 00:04:17,070 --> 00:04:20,010 like as modern and beautiful as possible, 92 00:04:20,010 --> 00:04:22,390 so that you end up with a real nice application 93 00:04:22,390 --> 00:04:26,130 in you portfolio in the end. Now okay. 94 00:04:26,130 --> 00:04:27,860 But will all that being said, 95 00:04:27,860 --> 00:04:30,663 let's now actually go plan this application. 96 00:04:32,270 --> 00:04:33,680 So, now that we know, 97 00:04:33,680 --> 00:04:37,220 what the project looks like and also how it works. 98 00:04:37,220 --> 00:04:39,760 We need to go through the same planning steps, 99 00:04:39,760 --> 00:04:42,620 that we did in the Mapty project. 100 00:04:42,620 --> 00:04:44,690 Now in this case, we will actually leave, 101 00:04:44,690 --> 00:04:47,490 the architecture for a bit later 102 00:04:47,490 --> 00:04:49,870 and only talk about the user stories, 103 00:04:49,870 --> 00:04:54,360 features and also about the flow chart for now. 104 00:04:54,360 --> 00:04:57,700 And to start, remember that a user story, 105 00:04:57,700 --> 00:05:01,190 is a description, of the application's functionality 106 00:05:01,190 --> 00:05:03,810 from a user's perspective. 107 00:05:03,810 --> 00:05:06,870 So basically, when we write user stories, 108 00:05:06,870 --> 00:05:10,940 we need to put ourselves in the shoes of our users. 109 00:05:10,940 --> 00:05:13,720 Now, all the user stories, put together, 110 00:05:13,720 --> 00:05:16,060 will then provide a clear picture, 111 00:05:16,060 --> 00:05:19,250 of how the whole application is gonna work. 112 00:05:19,250 --> 00:05:21,090 And so based on these stories, 113 00:05:21,090 --> 00:05:22,820 we will then be able to implement, 114 00:05:22,820 --> 00:05:25,610 all our application's features. 115 00:05:25,610 --> 00:05:28,410 all right, so let's say that we are now, 116 00:05:28,410 --> 00:05:31,960 kind of the project manager for Forkify. 117 00:05:31,960 --> 00:05:33,570 And let's also pretend, 118 00:05:33,570 --> 00:05:37,060 that we didn't see the final version of the project yet. 119 00:05:37,060 --> 00:05:39,990 Because of course, we have to write user stories, 120 00:05:39,990 --> 00:05:44,720 usually before we implement the project. Right? 121 00:05:44,720 --> 00:05:45,760 But in this case, 122 00:05:45,760 --> 00:05:48,880 since we are kind of doing it together here in this video, 123 00:05:48,880 --> 00:05:51,380 of course it's better when we already know, 124 00:05:51,380 --> 00:05:53,200 what the application looks like. 125 00:05:53,200 --> 00:05:54,430 But in the real world, 126 00:05:54,430 --> 00:05:57,203 this is basically gonna be your starting point. 127 00:05:58,070 --> 00:06:02,267 So, for this project, the first user story could be, 128 00:06:02,267 --> 00:06:05,357 "As a user, I want to search for recipes, 129 00:06:05,357 --> 00:06:09,150 "so that I can find new ideas for meals." 130 00:06:09,150 --> 00:06:12,667 And so you see again, we are using the format of, 131 00:06:12,667 --> 00:06:16,887 "As a type of user, I want to..." And then an action, 132 00:06:16,887 --> 00:06:20,080 "so that..." and then a benefit. 133 00:06:20,080 --> 00:06:22,850 So here the user wants to search for recipes, 134 00:06:22,850 --> 00:06:26,590 so that they can find new ideas for meals. 135 00:06:26,590 --> 00:06:28,360 Then, next up, 136 00:06:28,360 --> 00:06:29,927 the next user story is, 137 00:06:29,927 --> 00:06:32,777 "As a user, I want to be able to update, 138 00:06:32,777 --> 00:06:36,307 "the number of servings, so that I can cook a meal, 139 00:06:36,307 --> 00:06:38,690 "for different number of people." 140 00:06:38,690 --> 00:06:41,240 And that of course, makes a lot of sense 141 00:06:41,240 --> 00:06:44,160 in any application of this kind. 142 00:06:44,160 --> 00:06:48,497 Then, next. "As a user, I want to bookmark recipes, 143 00:06:48,497 --> 00:06:51,060 "so that I can review them later." 144 00:06:51,060 --> 00:06:53,330 And again, this really makes sense 145 00:06:53,330 --> 00:06:57,170 in any kind of real world application like this. 146 00:06:57,170 --> 00:06:58,397 Then, "As a user, 147 00:06:58,397 --> 00:07:01,657 "I want to be able to create my own recipes, 148 00:07:01,657 --> 00:07:04,577 "so that I can have all my recipes organized 149 00:07:04,577 --> 00:07:06,850 "in the same application." 150 00:07:06,850 --> 00:07:08,977 And finally, "As a user, 151 00:07:08,977 --> 00:07:13,147 "I want to be able to see my bookmarks and my own recipes, 152 00:07:13,147 --> 00:07:16,797 "when I leave the application and come back later. 153 00:07:16,797 --> 00:07:17,997 "And so this way, 154 00:07:17,997 --> 00:07:22,190 "I can close the application safely, after cooking." 155 00:07:22,190 --> 00:07:26,330 All right, and once again, let's kind of pretend, 156 00:07:26,330 --> 00:07:29,050 that we came up with all these user stories, 157 00:07:29,050 --> 00:07:32,900 while kind of brainstorming for this application. 158 00:07:32,900 --> 00:07:35,840 And so now, we can use all these user stories, 159 00:07:35,840 --> 00:07:39,120 for our next step and come up with the features, 160 00:07:39,120 --> 00:07:41,640 that we need in the application. 161 00:07:41,640 --> 00:07:45,650 So first, the user wants to search for recipes. 162 00:07:45,650 --> 00:07:46,550 And so therefore, 163 00:07:46,550 --> 00:07:50,330 our application should have a search functionality. 164 00:07:50,330 --> 00:07:52,390 Which is basically an input field, 165 00:07:52,390 --> 00:07:53,960 which will send requests, 166 00:07:53,960 --> 00:07:57,620 to an API, with the searched keywords. 167 00:07:57,620 --> 00:08:01,610 Then the application, should of course display these results 168 00:08:01,610 --> 00:08:05,500 and also with pagination, to make it more user-friendly, 169 00:08:05,500 --> 00:08:07,513 in case that there are many results. 170 00:08:09,866 --> 00:08:11,560 And then of course, the application, needs to display 171 00:08:11,560 --> 00:08:14,900 the selected recipe, with relevant data, 172 00:08:14,900 --> 00:08:18,763 such as cooking time, servings and ingredients. 173 00:08:19,630 --> 00:08:22,930 Now the next user story is pretty simple, 174 00:08:22,930 --> 00:08:27,230 so all we need, is a functionality, to change the servings. 175 00:08:27,230 --> 00:08:29,600 So basically updating all ingredients, 176 00:08:29,600 --> 00:08:32,930 according to the current number of servings. 177 00:08:32,930 --> 00:08:35,710 Then, in order to bookmark recipes, 178 00:08:35,710 --> 00:08:39,163 we simply need, a functionality for that. 179 00:08:40,580 --> 00:08:43,490 So basically, allowing users to bookmark the recipe 180 00:08:43,490 --> 00:08:45,860 and then display a list of all of them, 181 00:08:45,860 --> 00:08:48,120 somewhere on the page. 182 00:08:48,120 --> 00:08:49,980 Then for the next user story, 183 00:08:49,980 --> 00:08:52,690 what we need is basically a feature, 184 00:08:52,690 --> 00:08:56,410 that allows users to upload there own recipes. 185 00:08:56,410 --> 00:08:59,430 Which should then automatically get bookmarked, 186 00:08:59,430 --> 00:09:03,823 so that the user, can easily find all of their own recipes. 187 00:09:04,850 --> 00:09:07,760 Now, what's important here, is that each user, 188 00:09:07,760 --> 00:09:10,310 can only see their own recipes 189 00:09:10,310 --> 00:09:13,840 but not the recipes from other users. 190 00:09:13,840 --> 00:09:16,160 And, we could go ahead and implement this 191 00:09:16,160 --> 00:09:18,350 in a very complex way, like, 192 00:09:18,350 --> 00:09:20,770 for example, creating user accounts, 193 00:09:20,770 --> 00:09:22,660 but we will keep it very simple 194 00:09:22,660 --> 00:09:26,830 and basically, simply associate uploaded recipes, 195 00:09:26,830 --> 00:09:28,620 to an API key. 196 00:09:28,620 --> 00:09:31,160 And again, we will see by the end of the section, 197 00:09:31,160 --> 00:09:33,410 how that is going to work. 198 00:09:33,410 --> 00:09:36,233 Now finally, we are going to need a feature, 199 00:09:36,233 --> 00:09:38,340 that will store bookmark data 200 00:09:38,340 --> 00:09:41,500 in the browser using local storage. 201 00:09:41,500 --> 00:09:43,690 And that we already did before 202 00:09:43,690 --> 00:09:47,440 and so this part is gonna be fairly simple. 203 00:09:47,440 --> 00:09:50,560 Then to finish, whenever the page loads, 204 00:09:50,560 --> 00:09:53,670 we need to then read all the saved bookmarks 205 00:09:53,670 --> 00:09:56,800 and display them somewhere on the page. 206 00:09:56,800 --> 00:09:59,940 Great, and with this, we now know exactly, 207 00:09:59,940 --> 00:10:02,140 what we need to implement. 208 00:10:02,140 --> 00:10:06,460 But now, let's take this list, of unstructured features 209 00:10:06,460 --> 00:10:10,070 and actually put it, into a nice structured flowchart, 210 00:10:10,070 --> 00:10:11,710 which will allow us to plan, 211 00:10:11,710 --> 00:10:15,063 how exactly the application, is actually gonna work. 212 00:10:16,810 --> 00:10:18,150 So we're going to start, 213 00:10:18,150 --> 00:10:20,950 only with these first three features, 214 00:10:20,950 --> 00:10:23,080 in order to keep it simple now 215 00:10:23,080 --> 00:10:26,650 and not overwhelm you right from the start. 216 00:10:26,650 --> 00:10:30,110 So, we're gonna build this flowchart, in three parts 217 00:10:30,110 --> 00:10:33,230 and now starting with these three features. 218 00:10:33,230 --> 00:10:36,450 And as always, we're going to focus on events 219 00:10:36,450 --> 00:10:39,270 and the first event in our web application, 220 00:10:39,270 --> 00:10:43,370 should probably be, the user searching for a recipe. 221 00:10:43,370 --> 00:10:47,200 And so that's our feature number one, basically. 222 00:10:47,200 --> 00:10:50,660 So, when a user searches for a certain recipe, 223 00:10:50,660 --> 00:10:52,830 then we need to asynchronously, 224 00:10:52,830 --> 00:10:56,420 load the search results from our API, 225 00:10:56,420 --> 00:10:59,670 and so of course that happens asynchronously, 226 00:10:59,670 --> 00:11:01,900 and then once the results are in, 227 00:11:01,900 --> 00:11:05,430 we will simply render them in our application. 228 00:11:05,430 --> 00:11:08,520 However, we will not render all the search results, 229 00:11:08,520 --> 00:11:12,060 right away, because that would be overwhelming. 230 00:11:12,060 --> 00:11:16,040 And so instead, we also render some pagination buttons, 231 00:11:16,040 --> 00:11:19,780 in order to hide, basically part of the search results 232 00:11:19,780 --> 00:11:21,760 on different pages. 233 00:11:21,760 --> 00:11:24,550 So, that makes sense. Right? 234 00:11:24,550 --> 00:11:28,430 And then as a user clicks one of the pagination buttons, 235 00:11:28,430 --> 00:11:30,640 it will then render the search results, 236 00:11:30,640 --> 00:11:34,020 for the new page that was selected basically 237 00:11:34,020 --> 00:11:37,460 and it will also render new pagination buttons. 238 00:11:37,460 --> 00:11:40,030 So for example, when we're on page two, 239 00:11:40,030 --> 00:11:43,110 then there will be a button, to go back to page one 240 00:11:43,110 --> 00:11:45,890 and a button to go to page three. 241 00:11:45,890 --> 00:11:47,810 But when we're on page three, 242 00:11:47,810 --> 00:11:50,890 then the button to go back will point to page two 243 00:11:50,890 --> 00:11:54,800 and the button to go forward, will point to page four. 244 00:11:54,800 --> 00:11:57,090 And so we need to rerender these buttons, 245 00:11:57,090 --> 00:11:59,870 basically, every time that a user clicks 246 00:11:59,870 --> 00:12:01,793 on one of them. Right? 247 00:12:02,820 --> 00:12:05,110 Then, finally, we also need a logic, 248 00:12:05,110 --> 00:12:07,453 to actually display the recipe. 249 00:12:08,290 --> 00:12:10,940 So when the user selects a recipe, 250 00:12:10,940 --> 00:12:13,440 then, we need to asynchronously load, 251 00:12:13,440 --> 00:12:16,200 all the recipe data from the API 252 00:12:16,200 --> 00:12:18,060 and then once the data arrived, 253 00:12:18,060 --> 00:12:21,560 we render the recipe, to the user interface. 254 00:12:21,560 --> 00:12:24,100 And we will actually also do the same, 255 00:12:24,100 --> 00:12:26,090 whenever the page loads, 256 00:12:26,090 --> 00:12:29,260 with a recipe ID, in the URL. 257 00:12:29,260 --> 00:12:30,890 So, I think I showed you that 258 00:12:30,890 --> 00:12:33,140 in the beginning of this video. 259 00:12:33,140 --> 00:12:35,699 So whenever we click on a recipe, 260 00:12:35,699 --> 00:12:39,460 then the URL will change, with the recipe ID. 261 00:12:39,460 --> 00:12:42,950 Remember that. And so it's important that, 262 00:12:42,950 --> 00:12:47,420 for example, if we take that URL and copy it and paste it, 263 00:12:47,420 --> 00:12:49,133 for example, to another browser, 264 00:12:50,160 --> 00:12:52,350 that then the recipe corresponding to that ID, 265 00:12:52,350 --> 00:12:54,750 should also load right away. 266 00:12:54,750 --> 00:12:57,150 And so that's why, here in this flowchart, 267 00:12:57,150 --> 00:13:00,740 I have the Load recipe on both events. 268 00:13:00,740 --> 00:13:04,430 So, when the user selects a recipe from the user interface, 269 00:13:04,430 --> 00:13:06,840 or also when the page loads, 270 00:13:06,840 --> 00:13:10,760 with a recipe ID, already in the URL. 271 00:13:10,760 --> 00:13:12,930 All right, and that's actually it, 272 00:13:12,930 --> 00:13:16,200 for part one, of the flowchart. 273 00:13:16,200 --> 00:13:18,020 And in fact, these are basically, 274 00:13:18,020 --> 00:13:20,380 already, all core features, 275 00:13:20,380 --> 00:13:23,570 so the most important features, of the application 276 00:13:23,570 --> 00:13:27,640 So searching for recipes, rendering search results 277 00:13:27,640 --> 00:13:29,030 and then also rendering, 278 00:13:29,030 --> 00:13:32,700 the individual recipe that was selected. 279 00:13:32,700 --> 00:13:35,330 And so all these, will probably take us, 280 00:13:35,330 --> 00:13:37,890 half of the section to implement. 281 00:13:37,890 --> 00:13:40,980 So there really is, a lot to do. 282 00:13:40,980 --> 00:13:43,970 Now, we will start implementing the project, 283 00:13:43,970 --> 00:13:46,330 only with the recipe displaying. 284 00:13:46,330 --> 00:13:48,830 So only feature number three, 285 00:13:48,830 --> 00:13:52,960 which is basically this right part of the flowchart. 286 00:13:52,960 --> 00:13:54,460 And this will allow us, 287 00:13:54,460 --> 00:13:57,470 to start implementing some functionality 288 00:13:57,470 --> 00:14:00,660 and also play around with the application a little bit, 289 00:14:00,660 --> 00:14:03,920 but still without thinking, about the architecture. 290 00:14:03,920 --> 00:14:06,390 And so without the rigid structure, 291 00:14:06,390 --> 00:14:09,710 that might be imposed, by architecture. 292 00:14:09,710 --> 00:14:11,500 Great. So with this, 293 00:14:11,500 --> 00:14:15,160 we basically have this part of the application planned 294 00:14:15,160 --> 00:14:18,023 and so let's now finally get to work.