Hello, and welcome to the biggest
and most complete project of the course.
And this is kind of the final project of this course,
which brings everything that we have learnt,
up until this point,
into one big and beautiful project.
And so, just like with the Mapty project before,
Let's actually start,
by taking a look, at this project.
And, this is it.
So this is the Forkify application,
that we will build together
over the next couple of hours.
So this application is all about searching for recipes
and displaying them,
here in our user interface.
And in order to get a good idea,
of how this application actually works,
you should probably follow along, this demonstration,
by going to this URL, soforkifyv2.netlify.app.
And so let's search for pizza here.
And so you see, that right away,
here on this left sidebar,
we get all of these results.
And when we have more than ten results,
they actually, get divided up on multiple pages.
So we have this nice pagination here,
which is a very common feature of web applications. Right?
So you've seen this all the time probably.
And so now in this project,
you will learn how to implement this yourself.
Now, okay. And now let's actually click
on one of these recipes,
and you see that then it shows up,
here on the right side.
So we have the cooking time,
the servings, all the ingredients,
and then also a link to the page,
where the recipe actually comes from.
Now here in the servings,
we can actually decrease,
or also increase the number of servings
and as you see down here, the ingredients,
will then automatically get updated.
Right? Then another cool thing that we can do,
is to bookmark recipes.
So as we click here,
then that button changes,
and we also got that recipe bookmark,
here in this nice panel now.
And here you see, I already had a bookmark before,
and as we click that,
it will then of course move to that one.
Now, if we click here again,
then that will basically unbookmark the recipe,
and so you see that now it's gone,
and let's do the same here
and so now it's empty
and we get this kind of warning message instead.
Now right? Now finally, we can actually also add recipes.
So, just click on this button,
and then here, we can just fill in this form.
Now in this demo version,
that's actually not going to work,
because that would very quickly clutter,
this entire application here.
Now, what's special about this recipe upload,
is that, all the recipes that you upload yourself,
will only be visible for yourself.
So, here for example, I have this JS PIZZA,
which was done by me.
And so therefore, it has this icon here,
and also this icon here.
So it means that it was the user itself.
Now, when you open up this page
and search for pizza, then this recipe here,
should probably also appear for yourself
but that's only because,
this version has like a fixed developer API key.
And so each recipe is associated to a certain developer key
and we will see what that means, by the end of the section,
when we actually implement this. Now right?
But I think that's actually it.
So that's the whole functionality,
of the Forkify application, which seems pretty simple
but it will actually be a lot of work,
to implement all of this.
And so hopefully,
it's gonna be a great learning experience for you.
And once again I tried to design this application,
like as modern and beautiful as possible,
so that you end up with a real nice application
in you portfolio in the end. Now okay.
But will all that being said,
let's now actually go plan this application.
So, now that we know,
what the project looks like and also how it works.
We need to go through the same planning steps,
that we did in the Mapty project.
Now in this case, we will actually leave,
the architecture for a bit later
and only talk about the user stories,
features and also about the flow chart for now.
And to start, remember that a user story,
is a description, of the application's functionality
from a user's perspective.
So basically, when we write user stories,
we need to put ourselves in the shoes of our users.
Now, all the user stories, put together,
will then provide a clear picture,
of how the whole application is gonna work.
And so based on these stories,
we will then be able to implement,
all our application's features.
all right, so let's say that we are now,
kind of the project manager for Forkify.
And let's also pretend,
that we didn't see the final version of the project yet.
Because of course, we have to write user stories,
usually before we implement the project. Right?
But in this case,
since we are kind of doing it together here in this video,
of course it's better when we already know,
what the application looks like.
But in the real world,
this is basically gonna be your starting point.
So, for this project, the first user story could be,
"As a user, I want to search for recipes,
"so that I can find new ideas for meals."
And so you see again, we are using the format of,
"As a type of user, I want to..." And then an action,
"so that..." and then a benefit.
So here the user wants to search for recipes,
so that they can find new ideas for meals.
Then, next up,
the next user story is,
"As a user, I want to be able to update,
"the number of servings, so that I can cook a meal,
"for different number of people."
And that of course, makes a lot of sense
in any application of this kind.
Then, next. "As a user, I want to bookmark recipes,
"so that I can review them later."
And again, this really makes sense
in any kind of real world application like this.
Then, "As a user,
"I want to be able to create my own recipes,
"so that I can have all my recipes organized
"in the same application."
And finally, "As a user,
"I want to be able to see my bookmarks and my own recipes,
"when I leave the application and come back later.
"And so this way,
"I can close the application safely, after cooking."
All right, and once again, let's kind of pretend,
that we came up with all these user stories,
while kind of brainstorming for this application.
And so now, we can use all these user stories,
for our next step and come up with the features,
that we need in the application.
So first, the user wants to search for recipes.
And so therefore,
our application should have a search functionality.
Which is basically an input field,
which will send requests,
to an API, with the searched keywords.
Then the application, should of course display these results
and also with pagination, to make it more user-friendly,
in case that there are many results.
And then of course, the application, needs to display
the selected recipe, with relevant data,
such as cooking time, servings and ingredients.
Now the next user story is pretty simple,
so all we need, is a functionality, to change the servings.
So basically updating all ingredients,
according to the current number of servings.
Then, in order to bookmark recipes,
we simply need, a functionality for that.
So basically, allowing users to bookmark the recipe
and then display a list of all of them,
somewhere on the page.
Then for the next user story,
what we need is basically a feature,
that allows users to upload there own recipes.
Which should then automatically get bookmarked,
so that the user, can easily find all of their own recipes.
Now, what's important here, is that each user,
can only see their own recipes
but not the recipes from other users.
And, we could go ahead and implement this
in a very complex way, like,
for example, creating user accounts,
but we will keep it very simple
and basically, simply associate uploaded recipes,
to an API key.
And again, we will see by the end of the section,
how that is going to work.
Now finally, we are going to need a feature,
that will store bookmark data
in the browser using local storage.
And that we already did before
and so this part is gonna be fairly simple.
Then to finish, whenever the page loads,
we need to then read all the saved bookmarks
and display them somewhere on the page.
Great, and with this, we now know exactly,
what we need to implement.
But now, let's take this list, of unstructured features
and actually put it, into a nice structured flowchart,
which will allow us to plan,
how exactly the application, is actually gonna work.
So we're going to start,
only with these first three features,
in order to keep it simple now
and not overwhelm you right from the start.
So, we're gonna build this flowchart, in three parts
and now starting with these three features.
And as always, we're going to focus on events
and the first event in our web application,
should probably be, the user searching for a recipe.
And so that's our feature number one, basically.
So, when a user searches for a certain recipe,
then we need to asynchronously,
load the search results from our API,
and so of course that happens asynchronously,
and then once the results are in,
we will simply render them in our application.
However, we will not render all the search results,
right away, because that would be overwhelming.
And so instead, we also render some pagination buttons,
in order to hide, basically part of the search results
on different pages.
So, that makes sense. Right?
And then as a user clicks one of the pagination buttons,
it will then render the search results,
for the new page that was selected basically
and it will also render new pagination buttons.
So for example, when we're on page two,
then there will be a button, to go back to page one
and a button to go to page three.
But when we're on page three,
then the button to go back will point to page two
and the button to go forward, will point to page four.
And so we need to rerender these buttons,
basically, every time that a user clicks
on one of them. Right?
Then, finally, we also need a logic,
to actually display the recipe.
So when the user selects a recipe,
then, we need to asynchronously load,
all the recipe data from the API
and then once the data arrived,
we render the recipe, to the user interface.
And we will actually also do the same,
whenever the page loads,
with a recipe ID, in the URL.
So, I think I showed you that
in the beginning of this video.
So whenever we click on a recipe,
then the URL will change, with the recipe ID.
Remember that. And so it's important that,
for example, if we take that URL and copy it and paste it,
for example, to another browser,
that then the recipe corresponding to that ID,
should also load right away.
And so that's why, here in this flowchart,
I have the Load recipe on both events.
So, when the user selects a recipe from the user interface,
or also when the page loads,
with a recipe ID, already in the URL.
All right, and that's actually it,
for part one, of the flowchart.
And in fact, these are basically,
already, all core features,
so the most important features, of the application
So searching for recipes, rendering search results
and then also rendering,
the individual recipe that was selected.
And so all these, will probably take us,
half of the section to implement.
So there really is, a lot to do.
Now, we will start implementing the project,
only with the recipe displaying.
So only feature number three,
which is basically this right part of the flowchart.
And this will allow us,
to start implementing some functionality
and also play around with the application a little bit,
but still without thinking, about the architecture.
And so without the rigid structure,
that might be imposed, by architecture.
Great. So with this,
we basically have this part of the application planned
and so let's now finally get to work.