Basic project setup - React.js Tutorial

- [Instructor] All right. Well, now that we've seen the basics of user authentication, let's get started actually seeing what this looks like in a full stack React application. Now, in this video, we're going to take a look at how to set up the project that I've created for you and make sure that everything works for you. So if you check out the exercise files at the beginning state of this video, you should see that you have this project that has a number of things in it. You can ignore most of it really, except for the frontend and backend folders. So the frontend folder, this is a React app that's been created using the Vite library, sometimes pronounced Vite, V-I-T-E, is what the library is. And that basically just sets up a fully functional and very fast React app for you. So that's what you see in the frontend. In the backend, we have a simple Node.js and express server, right? There's not really a whole lot going on there yet. We will come in here and add some endpoints a little bit later on as we go through our authentication stuff. And if you take a look at this db.js thing, this is how we're going to work with databases right now. I was thinking of adding MongoDB to this course, but ultimately that was just too much setup and too much extra information besides the core information, which is what we're going to be going through here, right? The core information about how authentication works, things like that. So essentially the way that this database works is it just stores all of our data in a JSON object, a JavaScript object that is, and then when we call this save db function, it's going to write that object to a JSON file. So this will allow us to have some degree of persistence in our application, but it will also greatly simplify the interactions we have with our database and allow us to focus on the core topic of this course. All right, so that's the basics of the frontend and backend. In order to get this started, all you're going to need to do here is, as I said, check out the exercise files for this course. And you're probably going to want to have two separate terminals open here. So you can open those just by going up here, going to terminal, and doing new terminal. The first one you're going to want to have open in the frontend folder, right? And the first thing you're going to want to do here is run npm install, that will install all of the dependencies for you. I don't need to do that because I already have them installed. And then you can run the React app by saying npm run dev. And then you're going to open up a new terminal, which you can also do by clicking this little plus button. And you are going to go into the backend directory there, run the same thing, npm install, which will install all of the dependencies. And then you can run that simply by saying node server.js, and that will run that server for you. So you should see both of these running here, and that should be all we really need to do for setup. There's a few other things we might do a little bit later on, such as opening up these ports, but I'll discuss that when we get there. So anyway, that is the basics of getting this project set up if you want to follow along. And well, now that we've done this, we can get started seeing how user authentication applies in a full stack React app.