Original subtitles

1 1

Hello, and welcome to the biggest 2

2

and most complete project of the course. 3

3

And this is kind of the final project of this course, 4

4

which brings everything that we have learnt, 5

5

up until this point, 6

6

into one big and beautiful project. 7

7

And so, just like with the Mapty project before, 8

8

Let's actually start, 9

9

by taking a look, at this project. 10

10

And, this is it. 11

11

So this is the Forkify application, 12

12

that we will build together 13

13

over the next couple of hours. 14

14

So this application is all about searching for recipes 15

15

and displaying them, 16

16

here in our user interface. 17

17

And in order to get a good idea, 18

18

of how this application actually works, 19

19

you should probably follow along, this demonstration, 20

20

by going to this URL, soforkifyv2.netlify.app. 21

21

And so let's search for pizza here. 22

22

And so you see, that right away, 23

23

here on this left sidebar, 24

24

we get all of these results. 25

25

And when we have more than ten results, 26

26

they actually, get divided up on multiple pages. 27

27

So we have this nice pagination here, 28

28

which is a very common feature of web applications. Right? 29

29

So you've seen this all the time probably. 30

30

And so now in this project, 31

31

you will learn how to implement this yourself. 32

32

Now, okay. And now let's actually click 33

33

on one of these recipes, 34

34

and you see that then it shows up, 35

35

here on the right side. 36

36

So we have the cooking time, 37

37

the servings, all the ingredients, 38

38

and then also a link to the page, 39

39

where the recipe actually comes from. 40

40

Now here in the servings, 41

41

we can actually decrease, 42

42

or also increase the number of servings 43

43

and as you see down here, the ingredients, 44

44

will then automatically get updated. 45

45

Right? Then another cool thing that we can do, 46

46

is to bookmark recipes. 47

47

So as we click here, 48

48

then that button changes, 49

49

and we also got that recipe bookmark, 50

50

here in this nice panel now. 51

51

And here you see, I already had a bookmark before, 52

52

and as we click that, 53

53

it will then of course move to that one. 54

54

Now, if we click here again, 55

55

then that will basically unbookmark the recipe, 56

56

and so you see that now it's gone, 57

57

and let's do the same here 58

58

and so now it's empty 59

59

and we get this kind of warning message instead. 60

60

Now right? Now finally, we can actually also add recipes. 61

61

So, just click on this button, 62

62

and then here, we can just fill in this form. 63

63

Now in this demo version, 64

64

that's actually not going to work, 65

65

because that would very quickly clutter, 66

66

this entire application here. 67

67

Now, what's special about this recipe upload, 68

68

is that, all the recipes that you upload yourself, 69

69

will only be visible for yourself. 70

70

So, here for example, I have this JS PIZZA, 71

71

which was done by me. 72

72

And so therefore, it has this icon here, 73

73

and also this icon here. 74

74

So it means that it was the user itself. 75

75

Now, when you open up this page 76

76

and search for pizza, then this recipe here, 77

77

should probably also appear for yourself 78

78

but that's only because, 79

79

this version has like a fixed developer API key. 80

80

And so each recipe is associated to a certain developer key 81

81

and we will see what that means, by the end of the section, 82

82

when we actually implement this. Now right? 83

83

But I think that's actually it. 84

84

So that's the whole functionality, 85

85

of the Forkify application, which seems pretty simple 86

86

but it will actually be a lot of work, 87

87

to implement all of this. 88

88

And so hopefully, 89

89

it's gonna be a great learning experience for you. 90

90

And once again I tried to design this application, 91

91

like as modern and beautiful as possible, 92

92

so that you end up with a real nice application 93

93

in you portfolio in the end. Now okay. 94

94

But will all that being said, 95

95

let's now actually go plan this application. 96

96

So, now that we know, 97

97

what the project looks like and also how it works. 98

98

We need to go through the same planning steps, 99

99

that we did in the Mapty project. 100

100

Now in this case, we will actually leave, 101

101

the architecture for a bit later 102

102

and only talk about the user stories, 103

103

features and also about the flow chart for now. 104

104

And to start, remember that a user story, 105

105

is a description, of the application's functionality 106

106

from a user's perspective. 107

107

So basically, when we write user stories, 108

108

we need to put ourselves in the shoes of our users. 109

109

Now, all the user stories, put together, 110

110

will then provide a clear picture, 111

111

of how the whole application is gonna work. 112

112

And so based on these stories, 113

113

we will then be able to implement, 114

114

all our application's features. 115

115

all right, so let's say that we are now, 116

116

kind of the project manager for Forkify. 117

117

And let's also pretend, 118

118

that we didn't see the final version of the project yet. 119

119

Because of course, we have to write user stories, 120

120

usually before we implement the project. Right? 121

121

But in this case, 122

122

since we are kind of doing it together here in this video, 123

123

of course it's better when we already know, 124

124

what the application looks like. 125

125

But in the real world, 126

126

this is basically gonna be your starting point. 127

127

So, for this project, the first user story could be, 128

128

"As a user, I want to search for recipes, 129

129

"so that I can find new ideas for meals." 130

130

And so you see again, we are using the format of, 131

131

"As a type of user, I want to..." And then an action, 132

132

"so that..." and then a benefit. 133

133

So here the user wants to search for recipes, 134

134

so that they can find new ideas for meals. 135

135

Then, next up, 136

136

the next user story is, 137

137

"As a user, I want to be able to update, 138

138

"the number of servings, so that I can cook a meal, 139

139

"for different number of people." 140

140

And that of course, makes a lot of sense 141

141

in any application of this kind. 142

142

Then, next. "As a user, I want to bookmark recipes, 143

143

"so that I can review them later." 144

144

And again, this really makes sense 145

145

in any kind of real world application like this. 146

146

Then, "As a user, 147

147

"I want to be able to create my own recipes, 148

148

"so that I can have all my recipes organized 149

149

"in the same application." 150

150

And finally, "As a user, 151

151

"I want to be able to see my bookmarks and my own recipes, 152

152

"when I leave the application and come back later. 153

153

"And so this way, 154

154

"I can close the application safely, after cooking." 155

155

All right, and once again, let's kind of pretend, 156

156

that we came up with all these user stories, 157

157

while kind of brainstorming for this application. 158

158

And so now, we can use all these user stories, 159

159

for our next step and come up with the features, 160

160

that we need in the application. 161

161

So first, the user wants to search for recipes. 162

162

And so therefore, 163

163

our application should have a search functionality. 164

164

Which is basically an input field, 165

165

which will send requests, 166

166

to an API, with the searched keywords. 167

167

Then the application, should of course display these results 168

168

and also with pagination, to make it more user-friendly, 169

169

in case that there are many results. 170

170

And then of course, the application, needs to display 171

171

the selected recipe, with relevant data, 172

172

such as cooking time, servings and ingredients. 173

173

Now the next user story is pretty simple, 174

174

so all we need, is a functionality, to change the servings. 175

175

So basically updating all ingredients, 176

176

according to the current number of servings. 177

177

Then, in order to bookmark recipes, 178

178

we simply need, a functionality for that. 179

179

So basically, allowing users to bookmark the recipe 180

180

and then display a list of all of them, 181

181

somewhere on the page. 182

182

Then for the next user story, 183

183

what we need is basically a feature, 184

184

that allows users to upload there own recipes. 185

185

Which should then automatically get bookmarked, 186

186

so that the user, can easily find all of their own recipes. 187

187

Now, what's important here, is that each user, 188

188

can only see their own recipes 189

189

but not the recipes from other users. 190

190

And, we could go ahead and implement this 191

191

in a very complex way, like, 192

192

for example, creating user accounts, 193

193

but we will keep it very simple 194

194

and basically, simply associate uploaded recipes, 195

195

to an API key. 196

196

And again, we will see by the end of the section, 197

197

how that is going to work. 198

198

Now finally, we are going to need a feature, 199

199

that will store bookmark data 200

200

in the browser using local storage. 201

201

And that we already did before 202

202

and so this part is gonna be fairly simple. 203

203

Then to finish, whenever the page loads, 204

204

we need to then read all the saved bookmarks 205

205

and display them somewhere on the page. 206

206

Great, and with this, we now know exactly, 207

207

what we need to implement. 208

208

But now, let's take this list, of unstructured features 209

209

and actually put it, into a nice structured flowchart, 210

210

which will allow us to plan, 211

211

how exactly the application, is actually gonna work. 212

212

So we're going to start, 213

213

only with these first three features, 214

214

in order to keep it simple now 215

215

and not overwhelm you right from the start. 216

216

So, we're gonna build this flowchart, in three parts 217

217

and now starting with these three features. 218

218

And as always, we're going to focus on events 219

219

and the first event in our web application, 220

220

should probably be, the user searching for a recipe. 221

221

And so that's our feature number one, basically. 222

222

So, when a user searches for a certain recipe, 223

223

then we need to asynchronously, 224

224

load the search results from our API, 225

225

and so of course that happens asynchronously, 226

226

and then once the results are in, 227

227

we will simply render them in our application. 228

228

However, we will not render all the search results, 229

229

right away, because that would be overwhelming. 230

230

And so instead, we also render some pagination buttons, 231

231

in order to hide, basically part of the search results 232

232

on different pages. 233

233

So, that makes sense. Right? 234

234

And then as a user clicks one of the pagination buttons, 235

235

it will then render the search results, 236

236

for the new page that was selected basically 237

237

and it will also render new pagination buttons. 238

238

So for example, when we're on page two, 239

239

then there will be a button, to go back to page one 240

240

and a button to go to page three. 241

241

But when we're on page three, 242

242

then the button to go back will point to page two 243

243

and the button to go forward, will point to page four. 244

244

And so we need to rerender these buttons, 245

245

basically, every time that a user clicks 246

246

on one of them. Right? 247

247

Then, finally, we also need a logic, 248

248

to actually display the recipe. 249

249

So when the user selects a recipe, 250

250

then, we need to asynchronously load, 251

251

all the recipe data from the API 252

252

and then once the data arrived, 253

253

we render the recipe, to the user interface. 254

254

And we will actually also do the same, 255

255

whenever the page loads, 256

256

with a recipe ID, in the URL. 257

257

So, I think I showed you that 258

258

in the beginning of this video. 259

259

So whenever we click on a recipe, 260

260

then the URL will change, with the recipe ID. 261

261

Remember that. And so it's important that, 262

262

for example, if we take that URL and copy it and paste it, 263

263

for example, to another browser, 264

264

that then the recipe corresponding to that ID, 265

265

should also load right away. 266

266

And so that's why, here in this flowchart, 267

267

I have the Load recipe on both events. 268

268

So, when the user selects a recipe from the user interface, 269

269

or also when the page loads, 270

270

with a recipe ID, already in the URL. 271

271

All right, and that's actually it, 272

272

for part one, of the flowchart. 273

273

And in fact, these are basically, 274

274

already, all core features, 275

275

so the most important features, of the application 276

276

So searching for recipes, rendering search results 277

277

and then also rendering, 278

278

the individual recipe that was selected. 279

279

And so all these, will probably take us, 280

280

half of the section to implement. 281

281

So there really is, a lot to do. 282

282

Now, we will start implementing the project, 283

283

only with the recipe displaying. 284

284

So only feature number three, 285

285

which is basically this right part of the flowchart. 286

286

And this will allow us, 287

287

to start implementing some functionality 288

288

and also play around with the application a little bit, 289

289

but still without thinking, about the architecture. 290

290

And so without the rigid structure, 291

291

that might be imposed, by architecture. 292

292

Great. So with this, 293

293

we basically have this part of the application planned 294

294

and so let's now finally get to work.