Setup the API Project

[00:00:00]
>> Steve Kinney: So now that we've explored a bunch of Zod-related things and just like a heads up, there is some additional content for you at various points. I feel like we've covered testing Zod by accident insofar that by learning it we're writing tests. But some other things that you need to pop in or anything interesting to you.

[00:00:21]
But we wanna move into the main event, as we spoke about before, which is taking a look at our application. Where, again, the part to look at that's interesting is obviously our little UI here, but we'll take a look at the Express piece as well. So let's talk about how to get everything started up.

[00:00:43]
If you are using VS code, there is a task in there where you can hit Cmd + Shift + P, Run Task and Start, which will start out both the server as well as the client. But also you can also just navigate with two terminal tabs, one to the client repo, NPM, run dev, one to the server repo, NPM run dev and spin them both up.

[00:01:08]
If you're not in VS code, whatever makes you happiest. But you do need both running in order to have a thing. Otherwise you'll have a UI that can't talk to a API or an API with nothing to look at. And they will be running, the UI will be on 4000 and the API will be on 4001.

[00:01:26]
If those don't work for you, you are more than welcome to change them, but they work for me, so I'm not going to. All right, so there's a whole bunch of places where we can make some improvements. Let's look at it at a high level, and then we will kind of dig in and find a place to start.

[00:01:45]
All right, so if we look at the client folder, it is effectively a fairly standard React jam with most of the actual important stuff being in the source directory. We don't have to deal with a lot of this. I tried to take most of the API related stuff that we care about and put it in this api.ts for us to use, cuz that is, again, when we talk about those boundaries and where stuff from the outside world comes in.

[00:02:22]
Obviously, where you make those fetch calls is one of the bigger places. There are some components, there's a context, so I didn't have to put stuff everywhere. But large majority of what we talk about is going to be in this api.ts in there, and then eventually I will get rid of this and a few other things and replace it in this types.ts.

[00:02:45]
But we might at one point or another pop into another file just to do a little quick refactor, but most of our life is gonna be spent in these two little places. On the server side of the game we've got, again, I chose to just make a simple Express application.

[00:03:08]
In here though, we've got the source directory, which is the one we care about the most. And some of these other files mostly exist to get out of the way. So we can look at server.ts, which we've basically got the ability to crud on these tasks, right? And so we've got those as well.

[00:03:29]
And we'll, there's some prepared SQL statements again. Do they need to go up here? No, was I just trying to get stuff out of the way so that we could like focus on the parts? Absolutely, so most of our time on the server side is gonna be in server.ts, maybe popping into database at some point.

[00:03:47]
And then again, some helper files just to get them out of the way so that we can focus on what we want to cover. And then lastly, when it feels appropriate, there's a shared folder when we'll talk about the idea of where is the source of truth, right?

[00:04:04]
Is like, does it belong in the server repo? Does it belong in the client repo? I can make cases for almost all of them, but then there's also a case to be made of, should they be independent of the two things as well?