Okay.
And once we're done discussing the new features, let's set up a basic crud.
Now, if you're not familiar with crud, crud stands for create, read, update and delete.
And in my opinion, essentially it's a most important building block regardless of the application you're
creating, because everything else is basically built on top of it.
And I want to start somewhat.
Nice and easy and I want to build a Crud application with the local data.
Now what do I mean by that?
Eventually we will connect to our database and of course we'll create everything in a database and it's
going to be persisted over there.
But totally honestly, some of the functionality actually is going to be very similar to the local data.
And in my opinion, it's very useful to set up the entire Crud application where we can create, read,
find and delete jobs with the local data.
And long story short, I just think that it's really going to help you grasp the entire concept.
Now, in order to have some kind of data, we'll need to use the IDs.
Basically, each item will have a unique ID and of course you can hardcode.
And when it comes to our database, it will do for us.
So we'll right away grab that ID.
But for the local data, since I didn't want to type one two and then start calculating the values when
we create the job, actually we'll install a nice package called Nano ID, which provides that unique
ID and this is super useful if you want to use it in your applications, you can use it in the node
project.
You can use it actually also in React projects.
It just provides a nice unique ID and that way again, you don't need to do any acrobatics.
So long story short, in order to get started with nano ID package, you need to install it.
We want to import it and then let's set up some local data again.
Eventually, of course, we'll have more data and it's going to be stored in the database.
But for now we simply want to start with three things.
ID company and the position.
And then we want to set up a route which essentially sends back all of the jobs.
So let's say user requests all of the jobs, and we just nicely send it back.
And also, as far as the setup, we'll be able to create the entire structure in the Thunder client.
And this is something that I'm going to repeat probably 15 times during this video.
The main ideas will stay exactly the same, whether it's a local data or it's a data stored.
In the database.
Hopefully that is clear.
So let's navigate back to the server.
Eventually we will of course set up the separate files and all that, but for now we just want to.
Import the package first.
Effectively, I'm looking for import, then we want to go with nano ID from nano ID and let's create
that local array.
So I'm going to close the sidebar.
I'm going to call this jobs.
Essentially it's a jobs array and we just want to provide it.
So we're going to go here with ID in order to get the unique ID, we simply need to invoke it.
Of course, if you want to log, you can do it.
But remember, we'll be sending back those jobs, so you'll clearly see the values anyway.
Now, as far as the company, I'm not going to be particularly original.
I'm just going to go with Apple because why not?
And then position is going to be equal to front end.
Beautiful.
Let's save let's copy and paste.
Let's add here a comma.
This one stays the same again.
They will be unique and you'll see that in a second.
And then we want to go with Google.
And position is going to be backhand.
And once we have the array in place, now we want to set up a route which essentially is going to serve
all of the jobs.
Again, at this point, it doesn't really matter where we place it because we will remove the post eventually.
So I'll place it right after both of the requests.
We're going to go with App and what is the method we're going to use?
Well, get since we're providing those jobs.
So.
Anyone can access those jobs with a get method.
And then we need to decide on the URL.
In my case, I'm going to go with API version one and then the jobs.
So effectively this is going to be the starting point for all of our requests.
And this is quite common because that way you can control the versions.
And also keep in mind that normally on a server there's more than just an API.
So this is very useful to distinguish.
Okay, so these are going to be my API requests and then I have, I don't know, something else on the
server, some other resource.
And lastly, we just add here jobs.
So the full URL is going to be the domain then API forward slash version one forward slash and then
the jobs.
So this is a get request to get all jobs and then of course we'll work on the rest of them as well.
Again, we have our route controller and here we want to go req and res.
And as far as the response, let's go with res then.
This is technically an optional, but it's a good practice to add the status.
Or essentially you're saying, well, what is the status of requests?
So if I'm sending back 200, that means that everything went smoothly.
If I'm going to go with 404, then in that case it's a resource not found.
And of course, we'll cover those other options as we're working on this project.
And I want to send this back as a Json response.
So I'm going to go with dot Json and effectively I'm sending back an object and in there there's going
to be a jobs property which is going to be equal to my local data.
And with this in place we want to navigate to a Thunder client and we want to set up a collection because
essentially we want to create quite a few requests and it's nice if we can structure them, right?
So technically, again, this is optional.
You don't have to do it, but this is really going to make things easier later on as your project grows.
So we want to go here with new collection and I'm going to call this job fi recording since I already
have one.
While I was creating the application and inside of the recording.
Let's go with new folder.
And we'll call this job route.
So in this folder, we'll keep all of the routes that do something with the jobs, whether that is to
get the jobs, create a job and all that.
And then inside of the job routes, we want to create a new request and we're going to go with get all
jobs.
And like I keep saying, we can technically copy and paste the URL each and every time we create the
new request with the Thunder client.
But a better option is to create the Env variable.
So first let's just set up a request and then we'll set up that value as env variable.
So it's much easier for us to reuse it in our upcoming requests.
So for now.
I'm going to go back to the get one.
Basically, the first request we made, again, we're looking for this get all jobs.
Then remember, it's API version one forward slash end jobs.
And if everything is correct, we should see this array in the response.
And notice how nano ID package adds these unique IDs.
And then let's take everything up to a jobs so effectively localhost 5100 API version one.
Let's cut it out.
Let's go to Env.
We have multiple options, but I'm going to go with Global one.
So let's click on it.
We want to come up with the variable name.
In my case I'm going to go with URL, then let's copy and paste.
So this is going to be the value.
Let's save it over here and then let me navigate back to all jobs.
And I think I can close this one at this point.
And instead of hard coding or.
Copying this value.
We simply want to go with double curlies.
And right over here, Earl.
Yeah, that's the syntax.
So double curly.
Then the name of the variable.
Then send.
And if everything is correct, we should get the same response.
So now we have successfully set up our first route to read, basically to allow the user to read all
the jobs, to access all the jobs.
So we have our local data.
This is a get request and the URL is API version one jobs.
And once we hit this URL and as a side note, we can actually do it in the.
Browser as well.
So let me go over here.
API version one and jobs.
And remember, by default browsers perform get request and therefore in the browser I'll see my Json
data.
And if you have the same result, we can move on to the next step.