Creating a mock API endpoint

- [Instructor] We learned a few important React fundamentals in the previous chapter. Let's now start building this app for real. First task, let's render the list of contests here on the main page of the app. The contest's data is in MongoDB. We need an interface to it. That's the job of an API. We make an endpoint on a server to communicate with MongoDB, and make our application communicate with that endpoint with HTTP. We're using one server in this project for everything that we need on the backend. So we're going to build the API here in the same server. This is not always what you do in a bigger project, the API is usually on a different server. So while we're going to create the API here on this server, I'm going to assume that it is on a different server, and I'll show you how to configure that in this example. To create an API, we need another one of these, where we define an endpoint and what to do with that endpoint. The USE method here is a generic one that allows the client to connect to an endpoint with any HTTP verb. There are a few HTTP verbs or request methods that we can use. For example, GET, to retrieve data, POST, to submit data, PUT, to update data, and DELETE, to delete data. There are a few other HTTP verbs. The USE method makes the Express server accept any request method for this path. We actually only need the GET request method for the ROOT path here. So Express provide other functions for that. So we can use GET here, which means only the GET request method in HTTP are allowed to this ROOT, HTTP Call. To define other endpoints, we can do it here in the same file, but it's a good practice to group related endpoints in their own router. So let's do that. Let's create a new file under Server. Name this one api-router.ts, and we import Express. From Express, we're going to be creating an Express router, and the syntax is we create a router variable using this call, express.Router. And that's a function that we call. This create a dedicated router object where we can define routes and then include them on the server. And to define route, it's the same syntax. We can do router.use, router.get, or we can also do POST and PUT when we need to modify data. For this example, we need an endpoint to retrieve the list of contests. So it is a GET method and in here we specify the endpoint. Let's do something like /api/contests. And eventually we're going to add other routes here. For example, get/api/contest to get information about a single contest. So it's probably a good idea to mount this whole router on /api. And here we define the endpoint without the /api. This way when we export this router, export default router. And then we go import that in server.ts, in here we can import, call it apiRouter from./api-router. We can then use it this way. Somewhere in here, we tell the server that we want to use on /api, the API router itself. So all the endpoints in API router will prefixed by /api. This is a cleaner way for defining routes. Excellent. So this GET method takes the usual handler function, which receives request and response, and we can respond with data. For example, let's send an MT array. So the same method in Express where you can send text back to the requester, you can also send back JSON data. Now, I made a typo here and look at the power of ESLint and TypeScript as well here, it's telling me there is a problem. So let's fix the typo and now we can actually test. So if we go to /api/contests, it is responding with JSON and the response is just an MT array. So in here we can get the data from MongoDB. Before we get into the details of retrieving the data from MongoDB here, let's make this endpoint work with mock data first, so that we focus on the frontend part of working with data. I put an example of a mock data object for this endpoint in the README file, so you can copy it from there. But let me show you how to export a snapshot of the test data we have in MongoDB. We can use MongoDB Compass for that. This button here, Export a Collection, and let's export the full collection. And for simplicity, I'm only going to include category name, contest name and ID. And you pick a file here and put it somewhere under the source directory for our project. I named it test-data.json. Export. Completed. And if we go back, we now have a test-data.json file. And we can import this file directly. So import testData from../test-data. And in here, let's return the test data. Save and test. And we have the test data under an API endpoint. It's a fake endpoint but for the purposes of our React application, this is what MongoDB is going to return for us eventually.