Event Me Project Overview

[00:00:00]
>> Anjana Vakil: OK, so we've been talking about TypeScript syntax and all the good stuff we have in our toolbox now, all these different kinds of types and type manipulators and things like that, but we've also started talking about how we kind of use TypeScript on the daily as part of our general development workflow So for example, by making sure that we have commands that we have a tsconfig.json set up in our project that TypeScript then knows what we want it to do by setting our config up properly and what we're going to be doing now in this part of the course is going further down that pathway and thinking about the nitty gritty of like, how do we actually get TypeScript, massage it into the shape we want it for our particular use case, whatever particular TypeScript project we're working on

[00:01:03]
And so we're going to talk about things like type safety and how we use TypeScript in full-stack projects like backend TypeScript versus frontend TypeScript, and we're going to talk about things like open source tools from the wider TypeScript community that we can use to hopefully make our lives as TypeScript developers much better and easier So our goals for this part of the course are to understand how, like, get a little bit deeper into the tsconfig.json of how we would set up a config for various projects, namely web projects, but we'll talk about there might be other things going on

[00:01:53]
And we're going to, yeah, we're going to enjoy not having to retype the same type in multiple places and being able to reuse types and we're going to talk about why that is joyful and not just convenient And then we'll also talk more about, yeah, some of the wider ecosystem and a few of the bajillions of tools that are out there that Microsoft didn't build for us, but other awesome people did to help us work with TypeScript projects

[00:02:27]
So so far, we've been looking at little toy mini TypeScript snippets, and we started looking at something that actually looks more like a regular JavaScript project with a package.json and so on And now we're going to move one more step towards a real codebase Which is not to say that we're going all the way towards a real like production style codebase, but we have a full-stack project that we're going to be TypeScriptifying

[00:03:00]
It is called Event Me because I just like putting me at the end of all of my projects, I guess, and you can find it in a separate repo, but also on my GitHub and hopefully it's now public Yay, OK So if you check out this repo, and I mean the README is just a very, very brief explainer We'll look at it together and we will go through, but for now, let's make sure we clone the repo and get into that directory

[00:03:37]
So what you'll see is we have a frontend directory and a backend directory Now, this is not how you'd normally see a what's called a monorepo project This is sort of halfway towards the monorepo where we're sort of pretending that these two independent projects like exist very close together And what we're going to do is treat them like basically separate entities We've opened the project

[00:04:08]
And what we're going to do is we're going to launch the backend So what we need to do there is to move into the backend directory, install the dependencies, and then in the package.json there's a dev script that is going to run a server, which serves an API, a very elaborate API, no, but a simple API and you should see it running at localhost 3000 if all goes well So let's try that out

[00:04:44]
I'm going to CD into backend And we can open this up just to see what we're doing here We've got this package.json There's a bunch of dependencies If you have worked with Express before, this is an Express app It's a pretty common server framework for Node.js And then there's a bunch of other dependencies that often go along with Express Now we don't need to worry too much about what these do

[00:05:08]
This is not an Express course There's plenty of other great material on that that you can take other courses on, but suffice it to say we want to install these dependencies and then we have a dev script which is going to run this server, just so we understand what's happening here So if I do npm or package manager of choice, install Now I get my amazing node_modules directory there

[00:05:40]
And if I do npm run dev Now, I should see a little output that says the server is listening at localhost port 3000 And if I go to that localhost URL in my browser What do I get Oh Well, I get a 404 basically, but this is just showing me that the API is alive, the server is alive, and this error message is just saying, hey, you know, there's nothing at the root, but if I go to one of these endpoints like API events

[00:06:20]
I get some JSON And so what we're doing here is we're kind of mimicking how we would have an API somewhere or a backend that is going to be serving that data that so far we've just been kind of inlining in our code All righty So that's alive, awesome So, we're just going to leave that server running We're just going to let that terminal sit there, running, serving data Meanwhile, back at the ranch, in a new terminal, we're going to start the frontend application

[00:06:55]
I'm just going to leave this running We can see some server logs There's some, don't try this at home, kind of very, very lightweight SQL It's called SQLite database that's running here and so, yeah, we were getting all of those events and it's logging all that stuff out Cool, we're just going to let it do its thing Then I'm going to open a new terminal And now I'm back in the root directory, so I want to CD into frontend

[00:07:27]
And let's open up that directory here and see what's going on in our package.json So here what we have is a Vite app, and this is not a Vite or Vitest or anything course, but Vite is a very popular tool that's used It kind of most closely aligns with Vue, but it's also used very commonly in like React apps or in this case we're using it with Vanilla JS because that's just one less thing we need to worry about

[00:07:57]
So in any case, we just have a couple of dependencies there We've already run into Vitest, and now we're actually using Vite to basically do all of the fancy dancy JavaScript build stuff that we need to do in the modern frontend web these days So we're going to kind of gloss over all of this framework stuff, all the Express stuff on the backend We'll look at it as we need to and all the stuff on the frontend we'll deal with it as we need to, but suffice it to say this is just an example, a very lightweight, very minimal, very don't put this code in production example of the types of apps we might have to put TypeScript in

[00:08:46]
All right, so now in the frontend, I'm going to npm i Huzzah, hello node_modules and we're going to npm run dev again, which it's the same name for this script, but it's doing a totally different thing This one is running the frontend with Vite in development mode So hopefully, once I press enter, I now get a bunch of Vite logs and an even prettier link to a different port on localhost

[00:09:22]
So if we go to this localhost 5173 And I'll just do that in a new tab here Hopefully we get some kind of a web page OK, so we're going to look at this very, very exciting site in a moment, but suffice it to say, we have now, and I can see in my terminal, I have two different Node.js processes running One in the backend directory, one in the frontend directory, and we're just going to leave those chilling.