MERN Stack Course - ALSO: Convert Backend to Serverless with MongoDB Realm

hi i'm beau carnes with freecodecamp.org in this course i'm going to teach you how to make a full stack web application using the mirn stack but i'm going to teach you even more than other mernstadt courses i'm going to show you how to convert the back end of the app to serverless and how to host it for free in the cloud so you don't even need node or express the mernstack is a popular stack of technologies for building a modern single page application mongodb is a document based open source database node.js allows javascript to run outside a browser in places like a web server express is a web application framework that makes it simpler to code a web server in javascript and react is a javascript front-end library for building user interfaces in this course we will be building a restaurant review web app first i will talk about mongodb and how to host your database in the cloud using mongodb atlas then i'll show you how to create the back end of the app using node.js and express our server will interact with the database using the native mongodb javascript library instead of the mongoose library used by many other mirnstat courses why use an extra library if you don't have to next i will show how to create the front end with react and connect the front end to the back end at that point the merge stack app will be complete but i'll have one more thing to show you in the final part of this course i will show you how to replace the node express backend with mongodb realm this is a serverless platform that will allow us to do everything in the cloud without running our own server and with a lot less code then i'll show you how we can use mongodb realm to host our react front-end so our entire web app will be hosted for free on mongodb realm if you already know a lot about the mern stack just skip to this time code and go straight to where i show how to convert the node express back in to use mongodb realm instead let me show you an overview of the structure of the app we're going to build over on this side we have the m of the mirn stack mongodb we'll be hosting this on mongodb atlas we also and then we have the e in the end this is the backend node in express you'll see that express is just part of node and this is where we're going to be running the our backend server here and then we have our react front end and we'll be running our react on a local server too inside node.js and then the client so this is what people will see when they go to the website to our web app so let's start by talking about mongodb first a quick overview of the mongodb database in the tabular or relational world we think of things like databases tables rows etc mongodb has similar concepts that use different terms i'd like to make sure everyone is aware of instead of a table we have collections instead of rows we have documents we can do join operations with the lookup operator and instead of foreign keys we utilize references mongodb is very well suited for handling data with a wide variety of relationships let's have a quick look at the document model to see here's an example of a mongodb document it looks very much like json we can see in here a variety of relationships an address a title here's the different data formats they're all in the document mongodb stores data in bson format or binary json this provides for a wide variety of support for data types like strings or integers and in our code we're sometimes going to have to do some converting between json and binary json specifically for the object id okay let's get started creating our database you can host your mongodb database locally but i found that it's easier to host the database using mongodb atlas so we can do everything in the cloud and eventually we will literally do everything in the cloud where our entire back end and front end is in the cloud and we can actually do it right all on mongodb atlas but for now we're just going to create the database we'll be using the free tier on mongodb atlas in this tutorial so the first step is to create an account or you can just sign in so once you're creating your account for the first time you're going to have to set up the account so you can create an organization everything's going to have to have an organization i'll just call bose org for the project name for our first project i'm going to put mern stack so i'm going to call this the mirnstack project and preferred language well we'll be mainly working with javascript and the mern stack so let's go past this and then i'm going to choose this free tier okay now we're going to be choosing where our our files are going to be stored at and we can just basically choose all these default options if we choose these default options it's going to be on the free tier you probably want to actually choose a location that's close to where you're at so if none of these are really close you can actually check some of these other cloud providers and just kind of pick the one that seems to be closest to where you're currently located i'll just keep on the default and then i'll just do create cluster and you can update the settings depending on what you need um you can actually pay more if you need a bigger cluster but for now when we're just learning it's good to start with the free version okay after the cluster is created you'll have to configure it so you can connect to it so click the connect button here and then we're going to have to have a white list ip so just add the current ip address so we'll be connecting to it right from our computer because we're developing the back end locally so i'll just add my current ip address and then we'll create a database user so i'll just create it as my name and the password is mernstack we'll choose a connection method and we'll be connecting through mongodb's native drivers so this is going to give us the connection string we're going to use to connect from uh from mongodb and node.js now eventually we'll have to come back and copy this but for now we'll just leave it and we'll come back and get this when it's time when we're doing our code in node.js and i can just close this for now and now we'll add sample data to the database one thing great about mongodb atlas is that when you're doing when you're creating a demo app or you're just trying to try things out there's a lot of sample data you can just use so you don't have to do all this work of finding your own sample data so i'm going to click these three dots here and go to load sample data set and then load sample data set and this is actually going to create a bunch of different data sets right within our cluster okay after the sample data set is successfully loaded we can actually use this interface to explore the data status and see what's in it so i'm going to click on collections and then these are all the different data sets are in here there's sample airbnb sample analytics geospatial inflix restaurants supplies training and weather data for this tutorial we're going to be using the sample restaurants data and you can see there's the neighborhoods data and there's the restaurants data and if we look at the restaurants we have a list of a bunch of restaurants in new york so this one's called the riviera carrer i guess i don't know how to pronounce it uh so it's gonna show the cuisine and the burrow and then there's also going to be an address for each restaurant so we are going to be using this data in our app so let's start creating our app we're going to start creating our back-ends so i'm going to go over to the terminal here i've already created a folder called restaurant reviews and i'm going to just make sure i have the right version of node and so that's going to be a good version 12.18.0 and now we are going to first start with our back end we're going to start by creating the back end of the app with nodejs and express and then we'll create the front end with react and then like i said in the final section we'll switch out the node.js express backend with mongodb realm so inside this root folder i'm going to create a new folder called backend and then i'll switch into it okay now that i'm in this folder i'm going to we're going to create a package.json file inside this folder by running npm init and then okay we've initiated our package.json file since we're going to be using node here and now we're going to install a few dependencies so we'll do npm install we're going to do express cores mongodb and dot env so let me tell you a little bit about these so express is going to be what we use for the the web server it's going to help us make the web server cores stands for cross-origin resource sharing and it allows ajax requests to skip the same origin policy and access resources from remote hosts the course package provides an express middleware that can enable cores with different options basically it's going to make it so we can make the right connections on our network that we need to make without that we could have some errors and then the mongodb dependency allows us to interact with our mongodb database the emv dependency loads environmental variables from a dot emv file in the process.emv so this makes development simpler so instead of saying setting environment variables on our development machine they can be stored in a file so that all will all make more sense later once we actually create that file and i guess the last thing we'll do it will installed nodemon so if i do npm install slash g that means it's going to install globally we'll do nodemon and that's going to make development easier it helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected so we don't have to restart the server every time we make an update to our files okay time to create our backend server we're going to separate our main server code from the code that is accessing the database also the routes will be in a separate file since we will be using es6's import statements the first step is to update the package.json file in that file after the line main index.js we're going to add type and then we're going to set that to modules module that's going to allow us to use the import statements from es6 okay i'll just save that and then i'm going to create a new file in the backend folder it's going to be called server.js now in the server file we'll configure an express server we'll attach the cores and express.json middleware since we'll be receiving and sending json and specify routes so let's start by importing everything we need to import let me just zoom in a little bit on this code here we're going to import express from express and then we're going to import cores from cores now i'm going to import a file that we still have to create it's just going to be called restaurants from and then the directory we're going to create it is api slash restaurants dot route dot js okay because we're going to have our routes in a separate file so that's why we're going to that's the file we're going to have our routes in so let's make our express app so const app equals express and that's what we're going to be using to make our server and now we have to apply our middleware so app.use so these are the things that express is going to use and that's going to use our our course our course module and then we are also going to use express.json so this express.json line this in old versions of express if you've ever seen other old tutorials they use a a something called body parser but that's now included in express so just doing express.json means that our server can accept json in the body of a request so if someone sends a get request or a post request to our server it can it'll be able to read json okay now let's specify some of the initial routes so we're actually going to be putting most of our routes in another file but we have to specify what our initial url is going to be so since this is an api the general procedure for api urls is to say it's an api here and then what version version one and then this is the restaurants api so this is going to be the url people go to so our or basically our main url which is going to be localhost with the port number and then it's going to then you put api v1 slash restaurants for our url that people have to go to and the routes are all going to be in the restaurants file which we still have to make but if someone tries to go to a different route let's make a a message that appears if anybody goes to a route that doesn't actually exist so we'll put an asterisk here so if anybody goes to a asterisk means wild card if anybody goes to a route that's not in our in our route file then we're just going to return something so we'll just return a 404 page that just says not found okay and now i'm going to export this we're going to export app as a module we'll then be able to import this module in the file that accesses the database which will be the file that you actually run to get the the server running we just want to separate our main server code from our database code but before we create that file that connects to the database and starts the server we'll create a env file to store our environment variables so i will save this i will create a new file go to new file and then this is just going to be dot e n v so this is where we're going to set the the uri of our database so we need to get the uri so to get the uri we're actually going to have to go right back to mongodb atlas so if i click connect then we go to choose a connection method connect your application and then we have the node.js already selected here so we just need to copy this url here so now let's go back to our emv file so in this.emv file we're going to create the variable for the the database uri so i'm going to be calling this rest reviews underscore db underscore uri and then i'll just paste the uri in and then i'm going to update some things so we got the username bo and the password is going to be mergedack and then i'm also going to have to update this part where it says my first database this database the database we're going to access is the sample the sample restaurants database and then we have to create another variable called rest reviews ns and we're going to set this to the first database again so this is going to be sample restaurants and now we have to set the port this is going to be the the starting port that the server is going to start off to 5000 and then we're going to create a new file i'm going to go new file and it's going to be called index dot js so in this file we're going to connect to the database and start the server so first we're going to just import the file we already created from server.js so that's the file we already created we're also going to import mongodb because we're going to be accessing mongodb and then we're going to import dot e and v this is what allows us to access our environment variables now we have to configure env so we'll load in the environment variables and then we have to get access to our client from mongodb oh this would be const now we have to create our port number or we need to set our port from our environment variable so to access an environment variable we'll just do process dot e and v dot and then we put whatever we specified in our emv file which was porch so port is the port number and if somehow that cannot be accessed we will make it eight thousand okay now we will connect to the database so we go to client dot connect so and once we connect to the database we're going to pass in some information we're going to have to pass in the database uri which is process dot env so this is our environment variable rest reviews db uri so that's the name we created now we'll pass in the options for accessing the database and we want to make it so only 50 people can connect at a time so pool size 50 and we'll set the w timeout to 2500. so after 2500 milliseconds the request will timeout and then use new url parser is going to be set to true that is added because the mongodb node.js driver rewrote the tool that it uses to parse mongodb connection strings and because it's such a big change they put the new connection string parser behind the flag so now we're going to catch any errors so if there's an error we're just going to console.air or log the error stack and then we'll just exit the process after we've connected to the database and checked for errors now we can do something then we're gonna create a function here async client and app.listen and app.listen is how we start our web server so we're finally starting our web server after the database is connected to so we're gonna listen at the port okay we're just going to log that listening on the port and we're done so we've connected to the database and we've started our web server it's almost time to test out the backend server but first we need to make a route so let's create a new directory called api so new folder api and then i can also create a new file that way and the new file is going to be called restaurants.route.js so this is a file that we've already referenced in one of our other files okay this time instead of typing everything i'll just paste in and kind of explain what the code does first we're just going to import express from express then we'll get access to the express router because this is our route file we're going to be creating the different routes that people can go to and then right now it's just going to be one route we're going to be adding more routes and this is just a demonstration route so the route is just slash so just if you just go to the root url then it's going to respond with hello world so let's just save that and now we can actually test our program so far uh just so you remember from in the server.js is where we access the file that we just created and it's going to have to start with this so i'm actually going to copy this because every route is going to start with this and then it will at the end of the route you'll add whatever's here okay let's try starting the server okay since we didn't get any errors that means we successfully connected to our database so we're not accessing anything in the database yet but we're actually at least connected to the database let's go to our browser and check the the url that we created so go to the url bar i'll type in local host 5000 and then i'll do api slash v1 slash restaurants and then i'll just go to that page and you can see right here it says hello world so it worked and if we go to any other url like if i go to slash nine or something it'll say air not found looks like we have a mistake here so let me go and fix that it shouldn't have this little part when it says not found so let's go back to our so let's go back to our code and where do we oh here's where we have the extra character there okay well everything is working now we will make the data access object that will allow our code to access restaurants in the database so let's create a directory called dao for data access object and inside this directory we'll create a new file restaurant dot or d-a-o dot js now in this file i'm going to paste in some code and then i'll show you what all it all means so let me show the code here okay so first we're going to create a variable called restaurants that we're going to use to store a reference to our database and so we're going to export this class called restaurants dao and we're going to have a few methods here's the first methods and these are all going to be async methods and this is the inject database method so basically this is how we initially connect to our database and we're going to call this method as soon as our server starts so as soon as our server starts we're going to get a reference to our restaurants database so if there already is the reference if this is already filled we're just going to return but if this is not filled already we're going to fill that variable with a reference to that specific database so we're going to try to connect so you can see this we're going to wait for this and so connection this is we're trying to connect to our database and this is the name of our database this is our environmental variable and we're specifically trying to get the collection restaurants so let's go back to the mongodb atlas interface and i can show you where this database actually is right from the interface so if i click on collections here and we have restaurants and see in this sample restaurants section of the database we have neighborhoods and restaurants so we're specifically trying to get the restaurants and not the neighborhoods we're not even going to use the neighborhoods data in this project so that's what this collection restaurants is and if we're able to successfully get it then great if not we're gonna send this error message to the console okay so we're gonna we're gonna add the call to this right when we connect to the the database for the first time right when the server runs and then the other function is the get restaurant so this is the only other function that i just added or the only other method that i just added and this is what we'll call when we want to get a list of all the restaurants in the database so first of all there's some options now these are options that we just created that we just made up specifically for this method and you so when you when we call this method you can put in what filters you want if you want to sort things based on the name of the restaurant the zip code or the cuisine what page number you want because there's going to be a lot of restaurants so you may not want to get all of them at once you're only going to get actually 20 at once with this default setting so it's default to page zero it's default to uh 20 restaurants per page and then we're going to put together a query now first it's going to be empty and it may stay empty unless someone has passed the filters unless we've called called the get restaurants method with some filters and there are three different filters that we've set up there's the the name filter so we can search by name of the restaurant or we can search by the cuisine of the restaurant or we can search by the zip code of the restaurant and these are three different types of searches queries are very powerful in mongodb and there's a bunch of different things you can do now i'm just going to show you three of them right here but if you want to learn more about how you can query with mongodb check the resources in the description of this video first of all let's look at the the cuisine and the zip code so we're just seeing if it equals if the cuisine from the database from the entering the database equals the cuisine that was passed in so filters cuisine means that we've called the get restaurants method and we've passed in the a filter of what the cuisine is going to be and so we're actually going to search for that specific cuisine where we're going to search for a an entry in the database where the zip code equals the zip code that was passed in and then this is a little different to search to do a text search um we're going instead of searching for something that's equal we're going to search for any a text search is we're going to search anywhere in that text we're going to search for this name so you can see that here this is a database field this is a database field but when we're searching for the name there's no database field in here so how does it know which field to search for for the name that was passed in well we actually have to set that up in mongodb atlas so we'll do that later but we're going to specify in mongodb atlas that if someone does a text search which fields from the database will will be searched for that specific string so we'll set that up later so we're going to get the filters we're going to set the query to be either to be one of these three queries depending on which filter was passed into this method and then we're going to get a cursor and then we're going to await restaurants dot find query so this is going to find all the restaurants from the database that go along with the query that we passed in if there is no query if we just had this blank query and it wasn't set to anything then it's just going to return all restaurants and then we're going to catch an error and then we'll just return that's an empty list and 0 for the total number of restaurants if there's an error but if there's no error now we're going to limit the results because it return in the cursor is every single result but we're going to limit to restaurants per page the default is 20 and then to get the actual page number we do a skip so we're going to skip from the beginning to whatever page number we're at so we're going to multiply restaurants per page times the page number to get to a specific page of the results then we just set this to an array the restaurants list to an array and then we return the array and this can actually be changed here to get the total number of restaurants we don't need all this here so to get the total number of restaurants we're just going to count the documents in the query and then we can return the restaurants list and the total number of restaurants or if there's an error we just return this okay let me save that now we'll use the methods that we just went over that we just added to this file to access the database from our other files so let's go to index.js and in this one we are going to add at the beginning that we're going to import that file so import restaurants deo from d a o slash restaurants d a o dot j s so we have gotten a reference to this file and i'll just copy that and then it's gonna be right down here so right after we've connected to the database right before we start our server we are going to call that inject db so await restaurants inject db and we're going to pass in the client so this is how we get our initial reference to the restaurants collection in the database okay now we're going to create the controller that the route file will use to access the deo file so let's go let's save this i'll go to restaurants.route.js and we will need to make it so it uses the controller file we are about to create so the controller file is going to to be what is what the route uses so i'm going to import restaurants controller from restaurants.controller.js and now instead of sending this instead of getting this i'm going to do restaurants.controller dot api get restaurants and that's something we still have to create so now we're going to get what's going to be returned at this route that's going to come from this file here the restaurants controller file and then this method which we're going to create right now so let me save that and then inside the api folder create a new file and this one's going to be called dot restaurants.controller.js now it looks like we've got some things in the wrong spot this dao directory should be in the back end directory okay yeah so in the backend directory we have the api directory and the dao directory okay in the restaurant.control.js file i will paste in some code and then we'll go over it like last time so first we're going to import the other file we created the restaurantsdeo.js and then we're creating this restaurant controller class and there's a few methods actually right now there's just one method which is the api get restaurants and when this is when this api call is is called through a url there can be a query string a query string is how we can specify certain parameters and you'll see that when we do a test later but when you're typing in the the url you type in question mark and then the key value pairs that you want to pass in to this to this api and so one of the query strings that we can that we have is called restaurant stop restaurants per page so we are going to set this variable restaurants per page to equal whatever value is passed in through the url the query in the url so first we're going to check if this even exists in the url if this exists then we are going to convert it to an end we're going to get this restaurants per page and convert it to an integer if not the default is 20 here then we are going to do the same thing with the page number we're going to see if we've passed in a page number with the url then we're going to convert it to an end and then if not then we're going to get this zero the page number is just going to be zero now we're going to do the same thing with the filters so the filter is going to start off with as an empty object but if we see the cuisine query string then filters.cuisine is going to be set to the query string if zip code is in the query then we'll set the filter.zip code to the zip code if name is in the query then we'll set the filters.name to the name pretty soon once i get this all set up to show an example i'll show you exactly what those query strings look like and this will make a lot more sense if you're not familiar with what query strings are okay now we are going to call this get restaurants that's the thing that we just created we created before so we are going to pass in the filters the page and the restaurants per page and it's going to return a restaurants list and then the total number of restaurants and that's what we specifically made it return now we are going to get a response we're going to create a response to send to the person or to sit to respond when this api url is is called so we're going to respond with the restaurant list the page number the filters the restaurants per page and then the total number of restaurants and then rest.json response is one we're going to send a rest json response with all this information to whoever called this url okay i'm going to save that and now we can finally test to see if our backend server can actually access the database so let me go back to my web browser and then we're going to go to the api slash v1 restaurants and if i call that we should see okay we have an error it looks like we made a mistake and it looks like i have a spelling error so let's see where that spelling error was right here okay so let's fix that so after some troubleshooting i realized i have this spelled wrong this file spelled wrong someone go to rename and control there's an r in that word controller okay now let's go back to this and refresh and you can see it sends back all the restaurants now we can keep testing the api right within the browser but it's better to use another tool when you're testing api so over here i have a tool called insomnia now another very popular one is called postmen postmen and insomnia basically do the same thing so if you have postmen you can use postman for this i'm going to use insomnia and then we're going to be making a get request so go to uh local shows 5000 slash api slash v1 slash restaurants and now we can see all the restaurants on the side here so you can see each one that has the address it has the burrow the cuisine uh we're not gonna do anything with these grades in this project but we have the name here and now let's check using some of our filters that we created so in our api that we create in our server we can filter by zip code so let's filter by this zip code c10012 so what i'm gonna do is put a question mark now a zip code equals one zero zero one two and i'll send that okay look this zip code is zero zero one zero zero one two let's see if that what the next one is one zero zero one two one zero zero one two so it's all filtered by that zip code if we scroll down to the bottom we can see everything that else that's returned so we have the page number we have the filters which is a zip code and then we have the entries for page 20 and total results 407. there's four 407 restaurants with that that zip code and we could switch to page two so i'll show you how you would do that so we can see the first one right now is a restaurant called angelica film center but if i do and page equals two uh let's see i messed it up two and then i click send okay now the first restaurant is cafe and if we go all the way to the bottom we're now on page two there's still the same number of results and we have 20 per page so let me zoom in even more here and we are going to do a search by cuisine and then i'm going to do american okay so american cuisine american cuisine and now i'm going to search by name now this one actually is not going to work so we haven't got this set up yet but let's search for let's see a name let's see a restaurant name let's just search for um food what restaurant has the word food in its name okay not found this is the thing i said that we need to set up right within mongodb atlas so let's go and do that right now okay i'm on mongodb atlas i'm in my database under restaurants and i'm going to click indexes i'm going to create a new index let me see if i can make it so you can see this better here we go so i'm going to create an index actually i realized before we create it we want to confirm that we know the exact field so let's go go to see what the fields are so we know the only field we want to search for is the name field so let's go back to indexes create index and then we'll do name and for the type it's going to be text i'll review that confirm and now it's going to create our index now let's go back and see if that that search works so i'm going to send the same search and now it works now that we created that index and let's look at the names of the restaurants well this one's all about food this one's feel food this one's king food so it's searching for the word food all about indian food it's searching for the keyword food in the name of the restaurant so we have this part of the api working okay the whole point of this app is that people can leave reviews for certain restaurants so let's go back to our route file and we're going to create the routes for people to post put and delete reviews so post is to create a new review put is to edit a review and delete is if you want to delete your view so let me add those routes right now okay so we have router dot route and so up here we just made a single get request but now we are going to be able to make the post put and delete all within this one router call to the router so for the route review if it's a post acp request it's going to use this method here put this method and delete this method now we still have to create those methods and we actually have to import the file that we haven't created yet but i'll do that right now reviews and then this is going to be the reviews controller okay now let's create these methods that will be called when people go to these different routes so in the api i'm going to create a new file and it's going to be called reviews.controller.js okay so i've pasted in some code for the reviews controller i'm just going to review it so we start off by importing the reviews deo which we still have to create so we'll do that right after this and then we're going to create the reviews controller class and then there's going to be three methods we have the post review method and then we are going to get some information from the body before we got information from the query parameter and now we're going to get information right from the body of the request so we get the restaurant id and we get the text of the review and then for user info we're going to get the the name of the user id from the body and you'll see how all this works when we test it later and i'll show you how you send this information through the body we're going to get a new date and then we're going to put that all together we're going to send that to the ad review data which we still have to create it's going to send this information the restaurant id user info review and date and then in this other file which we're going to create will actually send that to the database but it's going to return success if it worked and then there'll be an error message if it didn't work and our next method is update review and it's pretty similar we're going to get the information from the body the review id the text those are the only things we need they're just the review id and the text we're going to update we're going to automatically create a new date and then we're going to update the review oh we also need the the user id we're going to get that in the body too and we just send it all all over and that's how we know if we're updating the so we get the user id because we want to make sure the user who created the review is the same one who's trying to update the review and then we just check if there's an error and return the error message if the modified count equals zero that means that the review was not updated and then we can throw an error here okay the final method is the delete review this is going to be a little different this is going to actually have a query parameter instead of the in the body the the id to be deleted is going to be a query parameter right in the url and then we're going to get the user id right in the body now this is admittedly non-standard for delete request for http delete requests it's non-standard to have anything in the body but for this example we're going to do it normally you would do this is this is just like a simple version of authentication this is nothing that you would do in a production environment but for this example we're going to check the user id in the body to see if it's the same user id that created the review before it's deleted in a production environment you're going to have a little more complex things you're not going to actually include anything in the body in the delete request and then we are going to call the delete review and then send over the review id and the user id and if it says success will respond with success or else we'll have an error okay i've been talking about the reviews dale a lot so let's create that now i'm going to create a new file and it's going to be called reviews deo dot js okay pasted in the code for the reviews deo it's very similar to the restaurants one first we're going to import this stuff up here mainly so we can get access to object id we're going to have to convert a string to a mongodb object id and that's what we're going to use this for we're going to get three views this is going to just be an empty variable but we're going to fill it with a reference to the reviews collection just like before we're going to have the injectdb and um we're going to see if if the reviews already exist then we're just gonna return but if not we are going to access the database and then we're gonna access the reviews collection and one great thing about mongodb is that it's okay if it doesn't exist already it will just automatically be created if it doesn't already exist whenever we try to insert a document into it and then the first thing we're going to do is to add a review and you can see it takes a restaurant id a user a review and a date and then we're going to create this review dock here and we are going to actually create a an object id from this and then we are going to insert it and then it'll just insert it right into the database with the the rest id converted to a mongodb object id and then if there's an error i'll return the error and then for the update review we're accepting review id a user id text and the date and the text is the text of the review and you can see that we are setting well first of all you can see that we are looking for a review that has the right review id and also has the right user id we only want to update a review if it was created by the same user that's trying to update it and then we'll just set the new text and the new date and then return the update response or return error and then delete review it's the same we're going to get the i we're looking for a review that has the the id and also the user id so it's the same user that created that review and if so we're going to delete that review and then return the delete response or to return the console.log here okay we're going to test out adding review but first let's get a list of restaurants because we're going to need this restaurant id because we're going to add the review to this restaurant id so now i'm going to make a post request and then i make it to review at the end now here's the body that we have to send over so first we have to send over the restaurant id and that's going to be this thing that i just copied from over there and then we need the text of the review which is going to be great food and then we need the user id which is going to be one two three four that can be a string or a number and i will put name so the name of the person leaving the review which will be oh now i'll just send that over success let's go over to the mongodb atlas interface i'm going to refresh and this is how we're going to see if it got successfully put into our database so we're on reviews and here it is look we got text great food we got the user id we got the name we got the restaurant id and everything got entered correctly now let's see if we can edit it so to edit it we are going to need the object id number so let me copy this and we'll go back over here this is going to be a put request instead of restaurant id it's going to be review id and then we'll put that here now we can keep the user id and the name in there because it has to check to see if the same user id is creating that review and then we are going to change the text to [Music] bad food bad food so if i send that success let's go back over here now this whole uh tutorial isn't really about the like the most secure user authentication methods so this is just all about how to use mongodb atlas how to set up the basic mern stack so if you're really looking for how to get the most secure database as far as user authentication you're going to have to check out another tutorial so i'm just using some basic things as far as sending the user id with this request and checking for that so if you want to learn more about security with mongodb and mongodb atlas check the resources in the description but you can see it has changed to bad food so we've updated this item now let's see if we can delete it so let's go back over here again and to delete it we're going to to make this into the delete the query request we can do question mark and then review or wait wait is id let me see it's just id id equals that we'll just delete the stuff in here and it's okay if you send extra stuff in the body just as long as it has the required fields so i'm going to change this to a delete and then click send cannot read property id of undefined so let's see what that means oh this user this one there shouldn't be a dot there okay now let's check this send and success okay so let's go over here we will refresh zero result it's been deleted so now we added a review editor review and deleted a review we are getting close to being done with the back end there's just two more things we're going to add we want to be in the let's go see the routes we're actually going to add two more routes to the route file for the restaurants so i'm just going to paste these in here and i'll explain them so now we're going to instead of getting this gets a list of all restaurants we want to get a list a specific restaurant with a specific id when you get to that specific restaurant not only is it going to give all the information that you get when you get all the restaurants you're also going to get a list of all the reviews that are associated with that restaurant and then we're going to have a route for cuisines we want to get a list of all just return a list of cuisines the reason why we're going to do that is because on our front end we want a user to be able to select the cuisine from a drop down menu instead of just having to have all the cuisines memorized and the way we're going to populate that drop down menu is from this route right here so you can see these are both routes from the restaurants controller file and so we have to make both of these from the restaurants controller so i'm going to save this i'm going to pop over to restaurants controller and then we are going to add so right now we have this method here we just have to add two more methods for those other routes so i'm going to paste in some code here and then we'll look at it so get restaurants by id we're just going to look for a parameter the id parameter so a query is is something that's after the question mark in the url a parameter is just write something that's right after in the url after a slash and then the body is in the body of the request so we're going to get this this item this this id and then we are going to call the restaurants get restaurants by d which we still have to create passing the id and we're going to get the restaurant back there's no restaurant we return an error or we return the restaurant and then we also if there's another air we can return that so also get restaurant cuisines this time it's not going to need to accept any parameters or anything like that it's just going to get get cuisines and that's going to return the cuisines or there's going to be an error okay that was pretty straightforward so now we have to go into the restaurants deo and finish that up there this is where it gets a little more complicated okay so now let me just paste in this new code here and let me review it so get restaurants by id so this is going to be more complicated because we're com we're going to be trying to get the reviews from one collection and put it into the the restaurant so first of all you see that we're using object id we're going to have to add the same code that we had in the restaurants deo to get access to the object id here so let's go over here add this at the top okay so let's look at how this works we are going to create a pipeline so this is uh one thing that's pretty cool about mongodb db is that you can create certain pipelines that help um match different collections together so we're first of all we are trying to get we're specifically trying to match the id of a certain restaurant but then we are going to look up some other items which are going to be the reviews to add to the result this is part of the mongodb aggregation pipeline lookup is only one part of it the aggregation pipeline is a framework for data aggregation modeled on the concept of data processing pipelines documents enter a multi-stage pipeline that transforms the documents into aggregated results it's very powerful and i'm only going to touch on a small part of it in this tutorial check out the resources in the description if you want to learn more about it mongodb atlas data explorer and compass can assist in creating pipelines so from the reviews collection we are going to create this pipeline that's going to match the the restaurant id and then we're going to find all the reviews that match that restaurant id and we are going to set that to be reviews and the result is going to be listed as reviews we're going to add this we're going to add a field of reviews and that's going to be a new thing in the results now if you check the description i'm going to link to a a a guide that shows you how to create these pipelines so if it will give you all the information about creating the exact pipeline that you need if you're trying to do something a little different than this okay then we are going to aggregate the pipeline which is to collect everything together and we're going to return that we're going to return the the next item which is the the restaurant with all the reviews connected and then for get cuisines this is kind of the simplest thing here we have an empty array here we're just going to await restaurants.distinct cuisine that means we're going to get all the distinct cuisines one of each cuisine because a lot of restaurants have the same cuisine so you're going to get each cuisine one time and we're just gonna return those cuisines and that's all so we got that saved it's time to test this out again so let's just look at our routes file again that's not it here we go so we're going to test we've tested this route this route this route this route now we're going to test these two routes first we're going to test the cuisines route so restaurant slash cuisines and then this is going to be a get request if i send for that and now here's all the cuisines you can see it's just a list here and later we can use this to populate the drop down menu now we're going to do the id one so we're gonna look for a well first of all let's get a list we need to get a restaurant id so if i sent oh before that let's make another review because we when we get a specific restaurant id we want the reviews to come back as well so i'm going to make i'm going to get the list of restaurants and get that restaurant id now i'm going to review post and let's do [Music] restaurant id and we'll put that id in there and then we will do the review which is going to be text it's going to say nice and then let's try another one that's going to say bad and this is going to be from a different person i'm going to put one two three four six and this is just going to say quincy now i'll send that okay now we have two reviews and we have this restaurant id so i'm gonna copy that id slash and i'm gonna paste in the restaurant id right there and this time i'm gonna do a get request and see what happens okay so we just got this specific restaurant id if we scroll down now we have the reviews look this is this is an array so remember quincy says bad bo says nice so it worked we were able to get a list of the reviews for the restaurant that way now we never really need to get an individual review so we don't actually have any route we don't have a get rid out around to get a review because we'll we'll never be getting just an individual review we'll just be getting all of the reviews or just editing and editing a review so we are done with our backend server all the route to work and now we're going to create our front end and connect it to our back end okay we got the back end of our project created with node in express now we're going to create the front end so let's go back to our root directory our restaurant reviews directory and now we're going to create the front end so here i'm going to use create react app so i'm going to use mpx you may have to install if you don't already have it installed and i'll do create react app and then i'm just going to call it the front end because it's the front end of our app now this is going to create a basic react project that will be able to update for our purposes now before we start actually actually editing our files and creating our front end we're going to install one more thing npm install bootstrap this is a css framework and it's just going to make designing our app much simpler we're not going to do any custom css for this project we're just going to use what's included in bootstrap and now we're going to install uh npm install react router dom we are going to be using react router to route different urls to different pages on our site so let's go over to visual studio code we're going to close the backend folder and open up the front end folder now in this src folder we have app.js this is the entry point for our react app so this is what we're going to start with modifying i'm not going to go over all the details about how react works so it's good to have some understanding about react but even if you're new to react you should still be able to follow along i'm going to be using some parts of react hooks but again we're not going to go into a lot of detail so if you like are really interested in react hooks there's some other tutorials for that but we will be using that and i'll be explaining them a little bit here so the first thing we're going to do is just do some imports so we're actually going to update pretty much everything in this file and we're not going to use this logo we're not going to use this css i'm going to actually paste in these new imports we're going to import react and we're going to from and then from react router dom switch route and link because we're using react router to create our different url routes that people are going to go to and route to the different react components and then we just have our bootstrap here this is what we're going to be using to style our whole app okay in this app i'm going to erase everything that's being returned here actually just inside this div and for now i'm just going to type in hello world we're going to make sure everything is working so far so if we go back over to our terminal i'm in the front end directory and i can just do npm start on it open up local 3000 in my browser says hello world so let me just zoom in more on that hello world okay let's go back to our code and we're going to start making this a little more complex so this file is going to have a header with some navigation on it and it's going to have a route where the main part of the page can switch between a few different routes so let's start with our component so we're going to start by creating some simple components that then our router will load the different components depending on which url that someone is going to or which route someone's going to so let's open up the file browser here and then under this src folder i'm going to create a new folder called components inside components i'm going to make three new files we're going to have a restaurants list file which will list the restaurants we're going to have a [Music] restaurants.js file which would be a single restaurant we are going to have an ad review which will obviously be used to add a new review and then a login.js which is the login page so now that we have that we're just going to make a a simple thing for each one right now so let me just copy what we have here and i'm going to go to add review we're just going to start off by making something really simple and i will call this ad review and we're going to export ad review and then we're basically going to do the same thing for each with one of these this is going to be login this is going to be restaurants list and then oh this is spelled wrong so let me rename this and this is just gonna be restaurants okay so now that we have all these created let me make sure they're all saved okay now we can start creating the rest of our main file that's going to be the link to those others so since we are going to be linking to those other components i made we have to import them at the top so that's what i'm doing here i just paste it in so we're going to import every view from component slash add review restaurant restaurants list and login and now let's see what we're going to return here okay i just pasted in some new code for what this is going to return and i'm going to go over it right now it's going to start with the nav bar now let me just highlight the nav bar here now this nav bar is just basically copy and pasted from the bootstrap documentation so bootstrap has all these different components and suggested ways of how to make them and so one way you can do if there's a component you want you go over to the bootstrap documentation you can copy the code for that and then you can update it for your purposes so this is just a basic bootstrap nav bar and it's going to have three different links the first link you can see is going to be so it it's all so this is how the navbar style that's going to be these different things are different bootstrap classes that are used to expand to style the navbar the first link is this one right here which is going to be the main almost like a logo that the main the main brand or class name is nabar brand which is the name of the website restaurant reviews sometimes this would be an image or logo this is just me text and it's just going to go to slash restaurants and you'll see soon that slash restaurants and just slash are they going to be go to the same the same url the same component and then there'll be two other buttons in the nav bar and they're going to be set a little different they're they're the nav bar nav so this is the the brand part of the nav bar and these this is the navigation part of the net nav bar and the first item is just going to be to link to restaurants now this link part that's that's imported right from react router dom and that will route to a different url which is going to load a different component so if you click on the word restaurant it's going to link to restaurants and then we have this next section now this is going to be one link but it's going to look different depending on our a variable so it can either look like saying login which will link to the login page or it can say log out and then the user's name the user not that name so it could say log out bow and if it says this on click it's going to run a function the log out function and we still have to create the log out function it's going to determine whether it's going to show log out or log in because of whether the user exists so this is a ternary say statement now in react we can use these brackets here to put in some code so these curly braces not brackets these curly braces are putting in some code and the code is a ternary statement where we're going to say user if that's true or false it's true if there is a user it's false if this is null and then the question mark uh is going to say that the first item after the question mark is what happens if it's true and then we have a colon the second section after the colon is going to be if it's false so if there is a user we're going to return this code if there's not a user we're going to return this which is to log in so while we're talking about the log out function we we we're going to implement the login logout function we're also going to make a user variable state a state variable so right up here actually right here the first line is we are going to create a user variable in the state now here we are going to use react hooks and the method is just like this const user set user react dot u state null okay so the react.ustate is a way to to create and create a state variable that you can use in your react app and this is going to be the initial value which is null and so it's going to set null to the user variable and then we also have a setter so we can use set user this is a function that we can use to update the user variable later in our program so now we have the user variable and now we're going to create two functions the login function and the logout function we'll create these as async functions so async function login and you're going to pass in we're going to pass in the user but we'll default it to null and then we're going to set user to user so now if you call the login function and pass in the user this user variable will be updated with the user that you pass them to that function and then we can also do a similar thing with the logout function so async function log out set user null okay so when you log out it's just making the user null there is no user you've been logged out just so you know for this app i'm not going to be implementing a full login system i'm going to be basically implementing a dummy login system that's a little out a full login system is a little outside the scope of what i want to teach in this tutorial so we're just making a dummy login system which is basically a form that someone when when someone uh fills out the form they click log in it's just going to set the user with that those details and it's not even going to save the user to the database or anything like that this is just kind of a dummy login system that you can easily update with a more fully full-fledged login system you can maybe even set it up to use google sign in or some sort of authentication provider but for now we're just having a dummy system just for this example but we have this login and log out function and so if someone clicks log out it's going to log out the user here and if they click login it's going to go to this url and this is going to be a page we can log in that we still have to create but let's just keep scrolling down we are past the navbar section and now we're going to have basically the the route section or the rest of the page so this is the rest of the page here and it's we are going to use a switch to switch between a few different routes so the first route is either going to be slash or slash restaurant and that's going to load this component restaurants list the second route is one that i don't actually need i was trying something out and i ended up not he's deciding not to use that that thing that last route so the next route is restaurants slash id slash review so up here we do a component equals restaurant list here instead of doing components we're going to do render the reason why we're using render instead of components is because this allows us to pass in the props to the component that we're loading so here we're loading restaurants list here we're loading the ad review component and we're passing in the props we're passing in the user to this ad review component also uh we'll be able to access this id variable from from that component and then we also have the route of the restaurants slash id so this would be loading a spec and this is going to load the the restaurants component and then we have the login route and that's going to load the login component so those are all the routes we have the the route that the restaurant list route the ad review the restaurant route and the login route where it says restaurant that made me realize that this should be a singular okay let's start with creating the restaurant list component which is going to list all the restaurants now a key part of listing all the restaurants is getting the restaurants from the database we have to get a list of restaurants from the backend server that's connected to our mongodb database and then we're going to need to display those in the restaurants list okay i'm just checking over on the browser to see how it's looking and i see an error so it's obviously it's really good to check your to check things and test things frequently to see if you have an error and then it reminded me of something that we forgot to do it says you should not use a link outside a router so let's go back over here and so we had updated the app.js file but there's a file that we need to update also that's actually even loaded right before app.js which is the index.js and this is really what kind of loads everything else and react so most of this stuff we don't even need so we don't need the css file because we're just using bootstrap we don't need this web vitals but we are going to need something from react router so we're going to import browse browser router from react router dom okay and instead of this react strict mode we are going to be using browser router so we're going to put browser router and we don't we're not even going to mess with this web vitals thing so i'm going to save that and then let's go over here and see how it's looking now it says hello world so let's test all of our routes actually so that's the restaurants list we have the login that also says hello world i guess i could have made these say different things so you would know that they're working so like for instance if we switch login we could actually just type in login here if i save that and then now restaurants log in so those routes are working okay well let's update our restaurants list like i was saying we're gonna need to get a list of restaurants and the list of restaurants has to come from the database so we have to figure out we have to we have to implement some code that's going to get information from our backend server we're going to create a separate file for that so this is going to be under a new directory called services so here i'm going to click new folder and put services so underneath source we have components and services and underneath services we're going to create a new file called restaurant dot js and we are going to use a library called axios for the get request the post request the put request and the delete requests and we're going to create a some helper file that's going to kind of set up axios how we want it to work and we're going to import that into this file so in the source directory again we're going to create a new file called http common.js this will be our helper file okay in this http common file i just pasted in some code we're importing axios which while i'm thinking about it let's make sure we install that so let's go over to here wait which one this one we're going to close stop the server and do mpm install axios okay got it axios installed now we'll just restart the server okay back to this http common file so we're just setting two things the base url which this is the url of our backend server locals 5000 slash api plus v1 slice restaurants and then this is the base url and all the other routes for our backend server come after this and then we're just going to set the header and now we're going to be able to import this and make our http post get delete requests and stuff like that more easily with all these things being set automatically i'm going to save this and then i'm going to go back into the services restaurant.js and then i'm just going to import that file that we just created import http from [Music] slash http common and then i'm going to make a class called [Music] restaurant data service this is where we're going to make all the functions that are going to make api calls and return the information from the api calls okay i'm going to just paste in all of these functions that we're going to use for the different http requests so the first request is going to be for get all so if you call get all it's going to have a default page number of zero and it's going to do a hp get request of this url now this url just added this is what's added to the end of this base url so this base url is already the url for doing the get all and then you can add the page number also what what page you want and then if you want to get a specific id a restaurant of a specific id the url is this base url but slash id and then with the id in here and then find the find is going to take three things the query which is the actual search term or number the number if it's a zip code or search term if it's a cuisine or a name and what you're searching by you're you're either going to be searching by a name by a zip code or by a cuisine and the actual search is the query and then what page number you want so it's going to do a get request and this is what it's going to add to the end of the base url and it's going to be like zip code by equals and then the query is going to be what the zip code is and the page number here create review is just going to do a post request this last review with the with the data update review put request with the data delete delete with and but you're going to have the id on the end or get cuisines okay now we can start creating our component our restaurant list component first of all let's import a little more things so we are also going to be using the you state and use effect from react hooks we're going to import our restaurant data service which is the thing that we just created and then we're also going to get a link from react router dom i'm just going to update this so it's a different type of function so this is going to const restaurants list equals props so this is how it's going to be able to take the props and use the props as part of this function this component so we're going to use react hooks to create a bunch of state variables so here we are we're creating the restaurants variable which is going to start as an empty array and then the search name search zip and search cuisine so we're going to keep track of what someone's searching for on the restaurant list and then also the cuisines the reason why we have these is because right on the restaurants list page people are going to be able to search for these all these items so we need to have variables for all the items that people are searching for okay i just put in some more code here that i'm going to review we have here we have the use effect this is the way that react hooks this is the way you tell react that your component needs to do something after render so after rendering it's going to retrieve the restaurants and retrieve the cuisines and these are functions we can look at those functions right now so here's one of them retrieve restaurants so we're doing the restaurant data service dot get all and that's something that we just created in the data services and then it's going to log the data but more importantly it's going to set the restaurants to be the response that restaurant data.restaurants and so this is going to go into the restaurants state and we're also going to retrieve the cuisines very similar we're going to use the data service to get cuisines and we are going to log them and then we're going to set the cuisines now we're going to add so this is going to be in the drop down menu so instead of just putting the response dot data into the cuisines variable first we're going to start with an all cuisine element and then we're going to concat to this array the rest of the data so the first element in the data is going to be all cuisines so that's going to be the first item in the drop down menu if you don't want to select a specific cuisine but you want to show all the cuisines so if we go back up here you'll see soon that there's going to be a form at the top of the page and people can search for by name zip code or cuisine so if someone searches for a name a zip code or a cuisine these three functions are going to when someone types into the search box we're going to take the value of the search box and we're going to set the name or set the zip or set the cuisine to whatever thing that the person typed in or in the case of the cuisine if they selected it so let's keep going down here here's a function to refresh the list of restaurants if that's needed one of the times is if someone searches for all cuisines it will retrieve all the restaurants okay now if someone tries to find something now this function is actually going to be called from these functions so someone's going to type in the name that they're going to search for and they're going to click the button to search once the button is is clicked then we're going to call this function find by name and they want to call the find and pass in the search name and the name if they're finding my zip we're going to pass in the search zip and zip code if they're refining by cuisine we're gonna find by we're gonna pass in the search cuisine that they selected and the word cuisine or if they have selected all cuisine we're just gonna refresh the list so then it goes to this find function the find function is going to pass in the query and the buy so for example here the search name and the buy is the name so we're going to call the restaurant data service with the query and the buy if we go back to the data services we can see the query and the buy so buy would be name so let's say the name we're looking for all restaurants that have the word food and the name so by would say name and then query would say food or by could say zip code and then query could be the number of the zip code so after we get the result of the find we're going to console log the data and then we're going to set restaurants to be whatever comes back from the the backend server okay those are all the functions so let's go really quick over the html that we're creating now we're making heavy use of bootstrap so most of these classes are directly from bootstrap to help style things and we can see that we have an input group because at the top of the page we're going to have three input boxes or or three ways that people can search the first one is searching by name and impop input box which is going to say search by name and the value is gonna be the search name and on change is gonna be on change search name to so as soon as someone types something it gets set as the name and then we have the second one or well then we have the button so if someone clicks this button and on click it's going to find by name then we have this next section which is the search by zip is going to be just like the one we just saw for name but it's going to be for the zip so someone can change the search dip and they click the button it's going to find my zip and then the final one is going to be a little different it's going to be a drop down menu for the cuisines we're going to see all this in just a second on the page but we're going to select unchange so on change it's going to do on change search cuisine it's going to set the cuisine variable to the cuisine that the person selected and to get the cuisines in the list we're going to use this react function this map function cuisines remember cuisines is the list of cuisines and we're going to map it and for each cuisine in that array we're going to return an option for the select box and the value is going to be the cuisine and then the reason why it's substring 0 20 because some cuisines are very very long and we want to make sure the search box isn't too long so we're going to just have it just the first 20 characters or is that 21 characters just the first little bit of the cuisine and so people and search the cuisine and they click the button it'll find my cuisine okay now the next section is we have another row here a row is from bootstrap and we're going to use another map function to map through the restaurants array we're in react this curly braces means that it's going to be some sort of javascript code and for each restaurant we're going to first get the address so we're going to be putting the address of each restaurant and the address in the database is actually three different fields we have the building which is like the number then we have the street then we have the zip code so we're just going to put that on to one string that we can use and so for each restaurant we're returning this whole thing right here which again is directly from bootstrap and there are different cards and each card is going to have the name of the restaurant the cuisine the address and then there is going to be a link to view reviews and if you click this rank link it's going to go to this new route ralph restaurant slash and then it's going to have the restaurant id and then also there's going to be a link here to link to google maps so the reason why we have one of the reasons we got this variable up here so we can use it both here and we can use it for this link to google maps so it's going to use this link from google maps and it's just going to put the address on the end which is actually going to create a link to a google maps of that exact address and then we have a bunch of classes from bootstraps and it's going to be called view map let's test this out and see what it looks like i'm going to save this okay and here's our page so here are the three different search boxes i was talking about and here we can select a cuisine if we want and you can see it's cut off like we mentioned but most of the cuisines are are less than those characters and then we can see all the restaurants and it cuts off at 20. so we can search by cuisine if i click search here now it's just going to show the african cuisine restaurants or i can search by name and put food click search and now all the restaurants have the word food in them or i can search by zip code let's do one zero zero one four and click search and now all the restaurants have the zip code of one zero zero one four and if i click on view map let's see what opens here the google map opens if i zoom in let's see if it even shows the name of that restaurant i zoom in look it says one if by land two if by sea right there and that is actually the name of the restaurant from our database one if by land 2 if by c so that actually took us to the map so let's say we want to go back to all cuisines and all cuisines is also means that you can only search for one thing at a time so if i click all cuisines it's going to go back to every restaurant another thing really quick right now i do not have any pagination and i don't plan to add any pagination but because of how the api is set up it would be pretty simple to add the pagination yourself so you could make something at the end where you can maybe you would make something at the be the end of the data or maybe the beginning of the data where you could click next page previous page and then go through the different pages for the front end we do not current i do not currently have that in the code but that's just like an extra thing you could try to add in but let's go to view reviews well right now it just says hello world because so we the route is restaurant slash the id and we have not created anything for the reviews yet that's what we need to create now we need to create what it looks like when you're viewing an individual restaurant with the reviews so let's go back over to our code we are going to open up the restaurants file and let's update the import so we're going to also import used stay in use effect and the restaurant data service and i'm going to change this to the other kind of function where props now i'm just going to paste in some code again and we'll review it but we're going to create the initial restaurant state which has all the fields but they're just set to empty or null and then we're going to create a restaurant we're going to use the initial restaurant state to set up the restaurant which is just all these null and empty fields and then the use effect okay when the use effect is going to be called when the page when the component first renders and how it has the this array here with just this the id in the end in the array that means this use effect is only going to be called if this id is updated so if this component is called multiple times it's only going to call the get restaurants again if this id is updated so it's going to call get restaurants with the id and that's where it's going to load the restaurant through the data service restaurant data service and they get the id and then it's going to set the restaurant as response.data and it's going to log that or else if there's an error it will log the error and one thing you're going to be able to do in here is delete a review now this will only you'll only be able to delete if you are logged in as the user who created that review but when you do delete a review it's going to need a review id and the index of the review from the review array which is the state the reviews the review variable from the state so we're going to delete call delete review with the review id and then with the response we are going to set the restaurant with to be that array the restaurant array without the restaurant that was deleted so we're going to take the previous state of the restaurant array and we're going to splice the index of the one that was deleted so whatever review is deleted we're going to delete from the reviews array and then we're going to return that previous state with this spliced array with with the array that was deleted removed back into the restaurants array else or i'm not else but if there's an error we're going to log the error now let's update the actual html that's returned from here so we're going to check to see if there is a restaurant so remember whenever you see the squiggly brace we're just about to put in some code and the code is a ternary operator okay so if there is a restaurant well first let's look what happens if there's no restaurant if we go down this line here with the ternary operator if there's no restaurant it will say no restaurant selected so if somehow you get to this you are this route and there's no restaurant i'll say no restaurant selected but most of the time there's going to be a restaurant and it's gonna that's what the so the first thing after the question mark is if it's true if there is a restaurant we're gonna we're gonna put the restaurant name we're going to say what the cuisine is say what the address is what the building the street the zip code and there's also going to be a button add review which will link to this route restaurants slash the restaurant id slash review so that's the route to add a review to that restaurant now we're going to list the reviews so first there's this new heading of the reviews and if restaurant reviews that length is more than zero that means there's some reviews we're going to do something if not it's going to show you what if not it's going to say no reviews yet but if there are reviews we're going to map over the reviews and for each review and then also we're going to get the index of each item in that reviews array for each review now we always have to have a key so the key is going to be the index for each review we're going to put the text now these are going to be cards this is just part of bootstrap to show cards we're going to put the review text and they're going to have the user which is the name the name of the user and then the date and now this is where we are going to show buttons depending on what user is logged in so let's look at this so first of all we check to see if there is a user if there's a user logged in so if there's a user logged in and if the user id equals the same as the review dot user id so if the logged in user has the same id as the user id of the review then now it just says and and again that's just like a a fancy way uh having the these ands is a fancy way of saying if these are true then we're going to put this code in here it so as far as what what javascript you can put inside a react like this this is kind of the best way to do it you put and so it only gets to this last part of adding this last part if the things before are true so if both these are true then it's going to put two different buttons we're going to have this delete review button which see it's going to be delete and on click when you when you click it it's going to call the delete review function with the review id and the index and also we are going to have a link here and this link is going to be an edit button if you click the edit button it's going to call the restaurants it's going to go to the restaurants path the restaurant slash restaurant id slash review so that's the place to edit a review and it's going to pass in the state of the current review so we're going to if we're editing this review we're going to pass in the state of that review so we can fill in the fields with the actual text of the current review on the review page and that's pretty much it because this is going to create a card for each element of the reviews array okay we can test that out so let me save that go back to the all the restaurants and remember we had already added some reviews to this one just from from insomnia so if we view reviews we can see nice so these are the two reviews now we can't delete or edit them because we're not logged in we have to log in as one of these users to be able to delete or edit them so let's click login and we can't because we haven't implemented that page yet so that's what we'll do now okay let's go back to the login.js page this is going to be a simple page with just two text fields for the user and the user id that you submit and then it logs in with that user and user id remember what i said we're not doing a full featured authentication system this is just like a dummy authentication system and you would update this page with something more complex if you wanted to actually use this in anything like production but we're just going to make something simple really quick and i'm just going to update all this with this new page and just go over it so we're going to you we're going to have the use date and then we're going to create the login component so the initial user state is just going to be a blank name and a blank id and then we're going to create the user variable which is the initial user state which is just the blank name and blank id and we're going to handle input change because we we have this form down down here and the form is just going to have two input fields we have this first input field which is the username and you can see we have the id of name a name here uh the value is user.name if you click on it on change handle input change and then this is also handle input change on the id which has the value of user.id and so no matter whether you it's doing a handle input change for both of these for the username and id event.target is going to get the name and the value from the target so so the name is going to be this so if it gets the it knows whether it's the name or the id and then it's going to get the value and then it's just going to set the set the is it going to update the user state with the new name or the new id and then the only other thing would be if you click the login button on click login it's going to call props dot login user and then props dot history dot push slash means it's going to update the url so it just goes through this other route it's going to this route the slash route so it's going to log in the user and then it's just going to go to the home page again now you may be thinking wait where is this login coming from is it calling this login no it's it's actually different this is props.login so if we go back to what pages i think app.js so if you see when we created the the route the route for the login page one thing we passed in as one of the props we passed in as login was login equals login and this login is actually this login so we're passing this function to the login page so on the login page when we do props dot login and pass in the user this is actually the function from from the other page from from the other file so it's actually passing in the user to this we're setting the user into this file and to this into this user variable and then that user variable through these routes see are passed in to the other routes so that's how we get the user from the login page to these other routes so let me go and save this and we'll go try this out so we're on the login page now so click it log in i'll put bo one two three four and click log in now it goes back to the main page if i click view reviews here well look we can now edit and delete this one because the user and user id was bo1234 for this review now i can delete or edit let's try editing oh we haven't made that page yet the editing page and the add page are the same page so add review we can try out the delete though let's see if the delete works yep that works and let's see if i refresh if it's still deleted and it's not so that did not work okay so that delete didn't work and it was because we're not sending the the user id here so the server is expecting a user id to be sent with this and a delete can't send data in the normal way because normally most people don't use a body with a delete request it's not necessarily best practice but again i'm not really focusing on authentication here but what we're going to do to make sure this to pass in the username is this we're going to have to use user id id and when i get this user id here this should be user id and now we have to make sure we call this with the user id so if we go over to where we delete something we're going to pass in the user id so delete reviews review id and then comma props dot user.id okay let's see if that works i'm going to log in with bo1234 view reviews and let's see if i delete enough i refresh it let's see if it stays deleted and it stays deleted so we successfully deleted that review and it's deleted from the database now we have to create the ad review page so let's go to add review here now i'm going to update this code and then we'll go over it so it starts off like the other ones react review state the restaurant data service link from react dom and the initial review state is just going to be an empty string because someone's just going to type in a string for the review and then we're going to keep track of whether this is a new review or if we're editing the review like i could have titled this something besides ad review because we're using the same page to add reviews and edit reviews but the default is false false we are not editing the review we're defaulting to adding the review if we go to this page so now we have to figure out if this editing should become true if we are editing the review the way to find out if we're editing this review is to see if a current review was passed in to this component so if we go back to here if someone clicks the edit review it passes in this state of current review so we're seeing if this state has been passed in so first we need to see if the state even exists and if it does we have to check if the current review is part of that state if so then we'll set editing to true and then we'll set the initial review state to props at location state that current review text so that's the text of the review that we're editing and then we are going to create this review variable using the initial review state which is either going to be an empty string or it's going to be the text here and then we're going to keep track of whether the review was submitted or not starting with false it hasn't been submitted and this is our handle input change function so when someone types into the text box it will change it'll set the review to whatever the person typed in and i can just i'll just i'll just go and look at that right now so first we check to see if there's a user if there's no user you can't actually add a review because you have to be logged in to add review then we're gonna ch so this is a ternary function if so we're gonna do this if not so if there is no user it's going to say please log in see anything after this colon here it's going to say please log in but if we are logged in now we're going to check if it's submitted yet so if it is already submitted it's going to do this so question mark is it submitted right after this question mark is the yes answer yes i'll say you submitted successfully and then there's going to be a link to go back to the restaurant so the restaurant that you started on if it's not submitted yet then there's going to be a form here so this form is going to have a description it's either going to say edit review or create review depending on whether we're currently editing the review or if it's we're adding a new review so if editing is true it's going to say edit review if editing is false that means writing a new review it's going to say create review then the input form is going to have the value of the review and then if you type it will update that value and then if you click it's going to save review if you click submit so this let's look at the save review function the save review function is going to create this data with the text of the review the name which is the props that user.name the user id props user id and the restaurant id props.match.params id the mass.pram's id means it's going to be right from the url we're getting the restaurant id right from the url here and then if we're editing there's also going to be one more part of the data if we're editing the review then we are going to get the review id and add it to it the current review id so if you're not editing there's not the review doesn't have an id because it doesn't get an id until you create the new review review but if you're already editing it you need the review id to say what review is going to be edited and then so if you're editing a review it's going to call update review and it's going to set submitted to true if you create a new review else it's going to create a review in both cases passing in the data in both cases it's setting submit to true it's logging the data and that's pretty much it for the ad review so let's save that and then we'll test it out so click on restaurants we'll go to happy garden this time there's no reviews yet let's see if we can add one well wait to log in first so click login i'll click i'll do bow one two three four log in and then we'll go to view reviews again add review and i'll say worst [Music] restaurant ever submit you submit successfully back to restaurant and you can see here's the review here also let's just confirm we haven't been to mongodb atlas for a while so let's go check to see if it's in there so let me go back to that page and then we'll go to reviews here loading which are refreshing and let's see if we can find the review i just added worst restaurant ever here it is so bo1234 worst restaurant ever so let's go back over and we can edit actually now it is the best restaurant i went to it again and realized i was wrong the first time submit that and now it's best restaurant ever if i log out i can still see the review but i cannot edit it and i cannot delete it so we can see the list of restaurants we can search we can search by kitchen let's try that word all the kitchens we can search by zip code 1001 we can search by cuisine do brazilian we can view maps this one seems to be closed and we can log in and i'll try different name how about abby and we'll do four three two one now i can view reviews but i can't edit that one but i can add another review not amazing if you go back to restaurant i can delete a review and this is basically done we've created a fully functional mern stack app okay we're going to do one final thing we're going to update the title that will be on the tab or in the top bar on your web browser so let's go to the public tab here and then we're going to or the public folder i mean we go to index.html and we'll keep most of this as is but we will update this instead of react app this is going to now say restaurant reviews okay we're done so we finished creating our entire app using the mern stack using mongodb express react and node.js well now i'm going to show you that you don't even need node.js or express because you can do all of the backend right from mongodb realm mongodb realm is a serverless application backend that streamlines implementation of features like user authentication data validation and business logic with configurable functions and services that integrate realms data access and security rules so this is the structure of our app so far but we're now going to replace this e in the n this whole section with mongodb realm and we're also going to replace this section and instead of hosting it locally we are going to host it in the cloud so this is what the new structure of the app is going to look like see the back end is now realm and it's a back end as a service because it's all hosted in the cloud at realm and then the front end is also going to be hosted through realm and it's going to be the same react front-end you see the client is going to look exactly the same now you can see these little lock icons after we get everything set up on realm we're going to have a lot more security between the backend and the front end of the database and the client so let's start setting this up so we are going to completely remove the backend that we made with node.js in express and i'm going to show you how to implement that all with realm and it's way easier and way faster than creating that whole back end with no node in express so we'll still be using the same react front end but i'm going to show you how to just use that front end with the realm back end and after that i'm going to show you how you can use mongodb realm to host the front end as well so the front end and back end will be all hosted in the cloud on mongodb realm so let's get started first i'm going to show you how to use realm to create an api that exposes data and then i'll show you how to update data in a mongodb database inside mongodb atlas so first let's go we're we're starting in our mongodb atlas cluster and then we'll go to the realm tab right here okay it automatically goes into the create a new application section but if you have already been to if you already have an application you may just have to click the create new application button to get to the screen but we're going to call this restaurant reviews and then i'll just click create realm application and i don't need any of these guides here okay we got this set up and realm has a bunch of features and we're only going to scratch the surface of what it can do so you can look through all these things over here we're actually going to mainly focus on third-party services and then later when we want to host our front end we're going to go to hosting but you can kind of play or just look around in here and see the different things that it can do but we're going to start off by just going to third party services here exposing data through third party services is at the heart of creating a realm back in service so that's what we're going to create now this is going to allow us to update the data outside of this website we'll basically be creating the the wrapper for an api so let's add a service we are going to create a service called http now there's some built-in you can choose twilio github aws depending on what type of api you're trying to connect or create or what type of service you're going to create but for our purpose we're just doing an http service and i'm just going to call this restaurants and then i'll click add service okay now i'm going to click add incoming webhook this is what's going to expose this service to the outside world on the internet so we're in the settings first we're going to look at that first and this is going to this will specify the authentication requirements and other behaviors i'm just gonna call this restaurants and this name is basically going to be one of our api endpoints so each name the each web hook or wait each name is going to be a different api endpoint that our front end is going to access if you scroll down here a little bit you can see that you can choose the http method we can we have to actually create a different service for each type of http method like get post put delete so the most popular type is a get request so this first one we're going to make a get request this is going to be so we have the different apa endpoints we're going to recreate all the api endpoints from our node express server right from realm and the first one we're going to create is the one that's going to return a list of all the restaurants you can also set up different types of authentication here or authorization for the request but since this is a pretty uh basic tutorial i'm just trying to show you how to do the basics here so we're not going to get into authentication but one cool thing is that mongodb realm can it makes it easy to either create your own authentication or also hook up with the a google authentication or facebook authentication and so you can use that those authentication pages to authenticate for your mongodb realm app we're not going to go get into that today but i just want you to know that that's a possibility for now we're not even going to implement any authentication because i just want to want you to see the basics of how this works request validation is important to verify requests it helps fight against bots that may attempt to interact with your service an easy way to implement this is to require secret this is just a git argument it's a parameter that's appended to the call then request will only be processed if they include the secret but for now we're just going to do no additional authorization and i'm going to click the save button so now it brings us over to the function editor by the way when you click the save button it actually doesn't deploy anything it doesn't make anything live until you click the review and deploy a button so that's where you can save a bunch of things and then deploy everything all at once you may have multiple changes and then you can deploy all of them but we're not going to deploy yet because we have to create our function so we're just on the settings tab right here but now once we click save it automatically went over to this function editor so now we're on the function editor and this is the function that will be run when someone calls the api to call this api or to send a message to this api endpoint it's just this url here so this url is what we are going to use that our front end is going to send a get request to this url and then this function will be run so this function is basically just like the function from our node express server or it will be once we finish creating it this is just an example when you when you first create one of these services it will automatically put this code in as a function as an example but we're going to update all this to create a function that's very similar to our node express backend okay so first i'll just show you how to create a very simple response and then we'll make it a little more complicated so we're going to actually get rid of most of the stuff but let me just show you this so this is how you get query parameters so payload.query is going to be these arguments right here and then you can get the content types with payload.headers you can get the body with payload.body and then this is just kind of showing how you would log that information here so these are all just examples here but what we want to do for now i'm going to just delete all of this here [Music] and what we're going to do is just try to get remember we're we're trying to return a list of restaurants so what i want to do is just get that collection we need to get access to our collection our restaurants collection right from this function so let's make a variable const collection equals when you're creating a function you're always going to have access to a variable called context and if you do context.services we're going to get the get mongodb atlas [Music] now this is just how you're going to get a your database on mongodb d atlas and then we put db sample restaurants remember that's the name of our database that collection and the collection is just called restaurants okay now let's get the list of restaurants so let restaurants list and this is going to be very similar to the mongodb javascript driver restaurants list equals now we're just going to do await collection dot find dot to array [Music] so this is just going to create an array of our entire collection for this example we don't want to return the entire collection let's limit so we're just going to limit to 20 dot limit limit and then i'll put 20. and then i'm going to return the restaurant list [Music] and since we're using a weight right here we're going to make this in a sync function so async and then we can just click the run button it's going to open up the console and then we have the results right here and if i lift this up here look we got it right here this is the list of restaurants so if i just scroll all the way up to the top we can see riviera carter so that's the first restaurant and so this is the list of restaurants just the first 20 because we've limited it to 20. so now we could actually just put in this url right into our react front end and if we call this url it'll return that list of restaurants but we're not going to update our react code to use that url quite yet what we're going to do is actually just test this in insomnia so make sure you save your own function and then we can test this out so let's click review and deploy and the settings in atlas have a configuration driven approach so before we finalize this deploy you can see the settings that we're about to change this is also the command you would use in a terminal or a program so you can avoid using this interface in this user interface but we're just going to use the user interface so hit deploy here okay deployment was successful so we'll go over here and then i already have the url in here this is our url right from our mongodb web hook in realm and if i click send it's going to see we have our list of restaurants right here so it worked now we're about to use that same url in our react app but before we do that let's improve this function a little bit we want this function to also be able to be used for searches so this api endpoint will be able to return all the restaurants but also if someone does a search for a zip code or a title or a cuisine it will also return the search results for that so let's go back to our code now this is our back-end code this is the restaurants.controller and we're just going to actually copy this code and then make a few changes and then we'll go right back into our function editor and then i'm going to paste the code in here but we're going to make some changes so it works for our purposes here so first of all first of all let's move this down a bit i'm just going to move it just paste it in right here and then let's start at the top here you can see we're getting the restaurants per page and we're getting the page from the query parameter well there's a different way for to do this in this function here we're going to be using payload.query we're going to have restaurants per page and we're going to have the page and let's do some destructuring here equals payload dot query okay so that's how we're gonna get the restaurants for page in the page and we'll have some default parameters so default to 20 and default to zero so if it doesn't have resonance for page if it doesn't have page we'll just default to those numbers and we're going to build up instead of building up the filters we're just going to build up the query the query that we're going to send when we do our find here so wreck that query we're going to use payload.query and then we're going to set the query to equal well we can get the query right from our other code so we just have to go over to the restaurants deo and this is what the query looks like for the cuisine query it's going to look just like this now bring that over and instead of filters cuisine this is just going to change to payload.query.cuisine so you can kind of see we are taking our code from two different files the restaurants controller and the restaurants deo and we're combining them all together into our function so the next thing we're going to be doing is getting our search for the name filter well let's do zip code let's the next thing we're going to do is get the zip code one i'll just copy this whole thing from here bring it over and then we'll use zip code and then this is just going to be payload dot query dot zip code and then the final thing is just going to be the name one just paste that in there so this is going to be payload dot query dot name and to make a text search look work like this we have to i already created a text index so if you just like skip right to this part of this video you may not have seen how i made that text index but in mongodb atlas if you create you can create an index based on any field where you could do a full text search for any field and i did the search for the name field in our database i created an index for the name field in our in our database so we could do a text search of that field okay so we develop our query we're going to get an access to our collection and then we're going to get our restaurants list but let's add a few things here so find out we're going to put the query in here because we're going to find based on the query and we also want to get a certain page number okay because p we passed in the page number and to get the page number it's going to be skip and then we're going to do a calculation here page times restaurants per page and then we're going to limit that to we're not going to limit that to 20 anymore we're going to limit that to restaurants per page and then we keep we're keeping the two array and then i don't need this anymore before we send the response we are going to have to update something in the database all the ids are object ids and we want to create we want to return them as a string instead of an object id so we can just loop through the entire restaurant list and update all the ids to strings and se instead of the object ids so i'll do restaurants dot 4 each and then for every restaurant we're going to call this function and the function is just going to be restaurant dot underscore id equals restaurant dot underscore id dot to string okay and the final thing is that we're going to create this response but we're going to now call this response data and restaurants is still going to be restaurants list page will be paged and then we'll just convert that to a string the filters in this case we're just not going to return anything for the filters we'll just return an empty object because in their front end we don't even use the filters we don't we don't even keep track of the filters on the front end and then for the entries per page we'll do restaurants per page and then convert that to a string and then for the total results we'll do restaurants list dot length dot to string and then we'll return response data okay let's save this and then well let's just do a test we'll run this it says rec not define looks like we must have made a mistake up here somewhere what do we still have oh this should be i forgot to change this payload payload [Music] and then we'll try doing a test here restaurants is not defined what do we must have made a spelling error oh okay restaurants list for each okay so let's run that and then we get the result now we can actually test sending the print the query parameters right in here so let's go to the console and this is how you would test sending the parameters you can actually test sending parameters by using these right here so it has an example here so i'm going to send a page and i'm going to send it to 2 and i'm going to do name and set that to food so now we're going to be searching for by name and we're going to be searching doing the page 2. so let's try that okay well first of all you can see that it returned page two and if i go back up here let's see the restaurant names and let's scroll up and look oh see this restaurant name has the word food in it let's see another restaurant name this restaurant had the name food in it so that worked i did this is a good thing about testing this we can see if there's any mistakes and i need to notice this this total result is 20 so it's not well i wanted to return the total results of this find of with the query but it's actually giving us the total results after we've limited to restaurants per page so there's a few ways we can do this okay so what we're going to do is just copy this here come down here and then the total results is just going to be okay i'm going to change this find to count dot then num num dot 2 string run okay good we got the right total results we'll make sure we're saved and then make sure we deploy and we got that function done let's try adding this to our react app so let's go back into the settings so let's get our url go back to our code and then i'm going to go back go into our front end code so our front end code we're going to need to go into our where is our http common so here's our base url we're going to update this base url and i'm just gonna paste in this url ascot and i'm gonna take off this section here where it says restaurants okay i'm gonna say that and go into our services and then this file are of all of our api calls so get all i'm just going to put restaurants here and then the search should also work if i just put restaurants here so those are the two ones that we've updated this the restaurants the thing where you're going to get everything and we're going find specific restaurants so let me save that okay let's try it and it works in to prove that it's working i'm gonna open up my console i'm gonna go to my network i'm going to refresh here let me zoom in on this if i go to restaurants here and if i hover over you can see it's our url it's our mongodb realm url and you can see the cuisines doesn't work because we haven't implemented that endpoint yet so let's implement the cuisines endpoint right now and by the way all the other endpoints are going to be way easier we started with the hardest one with all the searches and stuff well let's test that first so let's test to see if that works so let's type in food search look all about food feel food now let's try the zip code search one zero zero one four search and yep all the zip codes are one zero zero one four so that works i assume the cuisine search is gonna work but we're gonna have to implement our cuisine's endpoint first so we'll pull that in so to implement a new api endpoint i'm going to go back to here and then i'm going to add an incoming web book so we have the restaurants webhook now i'm going to add another one and this one is going to be called cuisines and everything else is basically going to be the same here oh it's going to be a get request okay let me go over to the function editor now if you're in the github repository there's actually a folder called realm that has the code for all the functions so the rest of these functions i'm just going to paste in here and then i can just go over it again it's going to be way easier these are all going to be way easier than the last ones but all this code is basically just a modified version of the code that was in our node express backend and i just modified it to use this thing specific to realm like the context.services and basically this is pretty straightforward we get the collection and then a weight await collection.distinct cuisine and return the cuisines so let me save that and then i'll review and deploy that and now let's just update back in our react front end let's update the get cuisines and actually that should be right it's just going to have slash cuisines at the end if we go back to our settings and we go to the url we can kind of confirm that see yeah it just ends with slash cuisines our main url ends at incoming web books and then has cuisines at the end so let's test that i'll refresh this page here and now we have all these cuisines it comes in and we can do a search yep we got the chicken cuisine and let me just make sure right from our networks so if i refresh here and we can see the cuisines is actually coming right from the mongodb round website so that that web hook is working okay let's implement all the rest of them so to see which ones we still need to implement we can go back over here so we need the get one which is slash id and then with the id right in there we need the crate review we need the update review we need the delete review and then we'll be done so let's do this one first where we're going to get a single review where we're going to get a single restaurant with all of the reviews so click add incoming web hook this is going to be just called restaurant singular not plural and this is also going to be a get request pretty soon we're going to do a post one but this one's a get request go to the function editor let me save that you can see there's an asterisk there now there's not because it's saved and now i'm going to update this code again you can just copy the code right from the github repository if you're trying to follow along here so let's look at some of things that are specific to mongodb realm we have the payload.query.id so one thing tricky for this one this one uses a path parameter so right in the url as part of the url there's this parameter so it's id slash and then it's the the id the actual id then we get that path parameter to look up the id that's how it is in the node express backend so that's one thing kind of different on realm is that it cannot do a path parameter it cannot get a path parameter it can only get a query parameter so we're going to have to switch this to a query parameter so a query parameter is something that's after a question mark so it's in the url after a question marks me a query parameter if it's just after a slash just like this it's going to be a path parameter so we have to change the path parameter to a query parameter and it's going to be a query parameter called id and so we're going to do something else in react to make it a query parameter instead of a path parameter but it'll be pretty simple i'll show you when we get to that point and so we get a list of the the restaurants just like before and then this pipeline this is basically just copy and pasted right from our express app to get a list of all the reviews so you know we're we're sending it the rest a single individual restaurant but then we have to go to the reviews collection to get all the reviews so that's what this pipeline does and then this is all this information is basically very similar to our express app and then right here we're converting we're going through each review and we're converting the date to a string and we're converting the id to a string if we don't do that our react app won't work with it correctly okay i'll save that and then i'll just do review and deploy and then we have to deploy here so if we go to our url it's just going to end with restaurant so let's see how we have to change the path parameter to a query parameter so it no longer is going to be id here this is going to be restaurant and we're going to get rid of this slash here because now it's going to be a query parameter which is pretty simple we're going to do question mark id equals and now we change the path parameter to a query parameter so save that and now let's test it in our browser okay i'll just use leave this network tab open and i'll click view reviews and let's see okay it's getting our restaurant is coming right from our mongodb realm api so that worked and we even got the review here so that worked too so now the final things are adding reviews editing reviews and deleting reviews so let me go back to the list of all our web hooks i'm going to add an incoming web hook i'll call it review new and we're finally going to be using a post request here instead of a get request go to the function editor and then i'm going to paste in some code here and now we're finally using the body so the body of the request payload.body if at first it checks if there is a body and if there is a body this is how we have to get it from the payload body that was sent to this web hook we'll get the text and then we'll have to convert it from bson to an e json object e json is basically json with a few extra types this body includes the name user id and the other data sent to this web hook so this is something kind of specific to mongodb atlas for realm but we got the body and then we have to get a list of the review or not a list but we have to get the reviews collection a reference reference to the reviews collection and then we have to create our document that we're going to insert with by name by.user.i user underscore id a new date body.txt and now we're converting this string to an object id with bson.object id and then we are just inserting it into their database await reviews.insert one review doc so that's pretty straightforward and i'll save that and deploy it and we're not going to put into our react app yet let's just create all of these and then we'll put them all into our react app so add incoming web hook this is going to be the editing one so review edit and then this is going to be a put save that function editor i'll paste that in and it's pretty similar to the last one we check to see if there's a body and we get we get the body into this variable here we get a reference to the reviews we create a new date and then we update so reviews.update1 first we have to just like in our express app we're searching for the one to update by the id which we do have to convert to an object id here and we also are making sure that the user id is the same as the id that created that review and then we just have to update the text and the date and then we return the update response so save that view and deploy now i actually don't have to be deploying this each time i can create all of them at once and then deploy it but it's good to kind of get in the habit or you'll just forget to deploy then you won't be able to figure out what the error is okay this is the final web hook that we're creating and it's going to be review delete and this will be a delete request here and then function editor i'm just going to paste in the code again keep in mind there's no authentication on this function so this is there's this is not for use in a production environment it's just an example to see how how this thing would work because you're probably going to want to have some authentication before someone's able to delete something obviously in a production environment but let's just let me just we'll just do it this way for now and we can see if it works so we'll just save and we'll review and deploy okay let's update our react app with the new urls so this review is going to review new and an update review is review edit and then delete review is review delete that should be done let's test it okay let me log in here view reviews and review best ever today okay submit back to restaurant let's see if i can edit it and let me just check the network tab so i can see where the requests are going to so edit and the best ever yesterday submit and then you can see yep it uses mongodb realm okay let's see if it deletes right and deleted and yep it's at the restaurant view it's it's the mongodb realm url and we're able to successfully delete so we just created the entire node express backend all in mongodb realm and it was way quicker it didn't really take that long to to put it all together and now it's all in the cloud it's and it's connected right to our mongodb database it's just a lot simpler way to create a merge stack app basically a merge stack app without the e and the n and now i'm going to show you how you can very simply and quickly host your react front end right from db realm and it's completely free okay if you still have your react app running stop that and i'm in the directory for the react app the front end directory and i'm just going to do npm run build and this is going to create a build directory that we can upload directly to mongodb realm okay back in realm let's see where we're going to upload our frontend well look at this section right here hosting so click hosting host your website here enable hosting now i just have to drag over my build folder right over to here okay so i'm just gonna grab select all the files in my build folder not the folder itself just the files in the build folder i'm just going to drag them over here and then they will upload i can overwrite index.html and then after they're uploaded i'll just click review and deploy deploy and it deployed was successful and it says your site is in the process of being created which may take up to 15 minutes so it could take a little while before you're able to access the site but it has the url right here so we'll just go right to this url but first let's go into the settings and look at some of the settings so you can actually use a custom domain so you can use any domain you like i'm not going to go through those instructions here but if you just click view instructions it's going to show you everything you need to know to how to use your custom domain so i'm just going to copy this url here and look it already works i just went to the url and it's hosting my react app right on here and let's see if we can do a search how about ice okay everything that the names that have ice we can try a cuisine that works let's see if we can do a review first of all i'm going to go to all cuisines and we'll do happy garden add review oh login oh one two three four oops one two three four and we can edit it [Music] and this is all working everything that you're seeing including the front end the back end the database it's all through mongodb and mongodb realm and even delete works it's done our entire app is hosted for free in the cloud everything about our mirnstack app is hosted for free in the cloud through mongodb and mongodb realm well thanks for watching everybody remember to use your code for good

Channel: freeCodeCamp.org

Views: 160,153

Rating: 4.954165 out of 5

Keywords:

Id: mrHNSanmqQ4

Length: 163min 19sec (9799 seconds)

Published: Wed Apr 28 2021