Transcript from the "Course Project Setup" Lesson
[00:00:01]
>> So, if you go to the readme, after reading who this course is intended for, we begin the instructions for your project setup. So first, just in case you're new to using GitHub, you have to make sure that you have an SSH key set up with GitHub and you can test that this works by trying to SSH into github.com.
[00:00:22] And GitHub will basically tell you that I have successfully authenticated you and then it will hang up, which is exactly what you wanna see, right. In fact, if it can recognize your username and say it back to you, that's pretty conclusive proof that it understands who you are.
[00:00:41] So next we're going to install a tool that might be new to some of you, this is called volta. And if you click this link, it'll take you to the volta homepage, the install process just is basically this. This first step you can do the second one if you like, but this first step is the important one.
[00:00:58] What this tool is designed to do is ensure that as you're working in the project we're focusing on today, you get the right version of node and the right version of yarn. And if you do not have those correct versions, volta will download them on the fly for you.
[00:01:15] You don't have to tell it to do anything, it just does it by themselves by itself. Now after you install this, you have to make sure you look at the terminal output. It will likely tell you that you have to close your terminal and open up a new one.
[00:01:28] This is because of changes some add something to your bash profile using sh RC. And that has to be run which happens when you open a new terminal and in order for it to take effect this needs to happen. So you've installed volta also, I think a lot of you probably are using this but just to make this super clear, visual studio code is by far the best TypeScript authoring experience available today.
[00:01:58] I strongly recommend that you use Visual Studio code, it is possible to get the TypeScript language server working in other places. But there are certain things that only VS code does today, that's not to say that it has some proprietary thing where Microsoft only allows VS code to do certain things.
[00:02:20] It's more that VS code is the bleeding edge and other editors have not implemented certain things yet. So make sure we're using VS code today you're going to clone this repository, you're going to enter the folder, and then you're just going to run yarn to install dependencies. So I'm going to go through that process right now just so we can see that everything works.
[00:02:49] So I'm going to clone the repo. I'm gonna enter the directory, and then I'm just gonna run yarn. This is gonna go get all my dependencies bunch of babble stuff and then when once this is all done, we're going to run yarn dev. And that will start up the development web server where as we change files in the source folder this will pick up on those changes, rebuild the app.
[00:03:29] And we'll get that nice, nice responsive development environment, all right, there we go, so now I can just run yarn, Dev. And you should see some activity, like for building index HTML and some JavaScript files. We're starting out with pure JavaScript in this project, eventually, it's going to say, I'm serving this app on localhost 1234.
[00:03:56] So what we're looking at here if I open up this code base. So we have a bunch of different folders here and I want to draw your attention to the things we're paying attention we're mostly focused on today. So first off in the notes folder we have for each of the major topics we're hitting today, we have a dedicated markdown file.
[00:04:24] So, for example, converting JavaScript to TypeScript, we have a lot of different notes here. This is to help you Easily copy and paste things, so you do not have to worry quite so much about looking at every, every piece of code I write. There is something there that that you can easily consult and paste right into your, your local code.
[00:04:48] This source folder is where we're going to spend most of our time, so this is the client side of the app that we're looking at today. Within the source folder, we have sort of a data layer, just like how we make our API calls. We have a folder called UI and this contains some react components.
[00:05:07] We have utilities, which is just low level, like there's a date formatting function in there. And then finally, index JS is the entry point for the application, that's really all that's going on here. And the only thing I want to also draw attention to is this DB dot JSON file.
[00:05:22] This is all the data that's driving your application, so as you fetch records, you'll see some of this data here appearing in API responses. And this is where it's coming from and in fact, if we get to making a POST request and creating new data that should appear here as well.
[00:05:40] One last thing to draw your attention to is this API examples folder so if you have something, a VS code extension called REST client And it's this one right here, right, the one with 1.1 million downloads, so it's The most popular restclient thing. You get these little things, this little annotations on top of these lines of text in this text file and you can actually forget rid of that sidebar.
[00:06:13] If I click Send request, we can see that we get an API response, so it's a little guide to using the API that works. So long as you were running yarn Dev and the API is running, you should get real HTTP responses. And this will be useful in terms of helping us understand how this API works.