Building a fullstack web app | CRUD MERN tutorial

let's try again hi guys it's marina from tech news with another tutorial we are going to cover morn stack crud decorations and we are going to do it now i think was better anyway let's go okay so guys let's open our terminal i will cd into desktop because that's where i want to create the application uh we will make a new directory crad mern and let's cd into credmart here we will npx create react up to create our react application that we will call client while it's installing i'm pushing click i'm pushing pressing command t to open a new window in terminal and here we will npm in it with all default values okay after that we will install only express course and mongoose okay let's let's open this folder in vs code now open our terminal here and let's create as our server oops let's create our server.js file in the root folder and maybe i know okay so now in our server.js we can just const up express equals require express these are our main imports const course equality choir course then we have mongoose requirements and finally we have our app that is an express application here will be our first route here you write the uri it's localhost blah blah blah i think we will be using the port 3001 so it's localhost 3001 slash like a home route and we have a callback function of request and response so we can send the response like express is here and when we set our up to listen at ports 3001 we have a function here that will just console.log that server is running and now with this small amount of code we can say nodemon server.js and our server is running past running it's running okay we can check this if we go to our chrome we can go to localhost uh 3001 and here is our express okay so what we want to do we want to check if our react application is ready happy hacking so it's ready it means that we can city into client and we can install also some packages here in our tutorial we are going to need npm install axios react router dawn and react boot strap and boot strap okay i think we only need this packages one two three four in the meantime let's go to react bootstrap website get started and we will copy the style sheet okay import this we go to the client folder source folder index.js and here we can paste the copied line so now our react bootstrap is working we can open a second terminal window here and finally cd into client and npm start to start our react application if it's working then we can dive right into coding i hope i look okay because i don't see myself so inconvenient in obs studio okay it's working uh now what i want to do first of all let's go to our main component app.js i will close the terminal and instead of doing uh of returning all of this we will just return an h1 that will say home page and we can remove also this unused import home page here i would like to have a button that when we click it we go to the next page where we can create a post let's do that for this let's import the button from react bootstrap and we will return this button here that will say next and on click we want to do something we want to navigate for this we will import something from react router dom new version 6 we need to to import the use navigate hook so this is one of the main differences between the previous version of react router doll we have to declare navigate as use navigate hook and then button on click we can just write an inline function that will be just navigate to some address i think this address will be uh localhost 3000 because react is on localhost three three thousand uh you see and then we want uh to go to slash create page yeah so here we can provide just create it will not work for now because we need to create this component where we want to go let's create a new file here create post dot js here we will have a simple function create post simple functional component that will will return a div with an h1 for now create a post and we will export it as default create post component so now uh that our functional component is ready we can go back to our index.js file and configure the routing with the version 6 of react router dom we do it like that we import browser router routes and route and all we have to do is to wrap all of our components that will be using the routing inside the browser router first and then i will i will cut the this for a while and after that we have the routes and inside the routes we have a separate route for each component and here we do like this element equals up and pass equals just slash just the home route we don't need to specify exact path as in the previous version so it's more convenient now we can also copy this line and import another functional component that we just created that is called create post this will be located as we set at slash create and element is create post so now i think it should be working we have our home page now we click next and we are at the create a post page also we will not be doing the full styling here so i will be just using the inline styling even if it is not such a good practice style equals let's say with uh 90 because now we will minimize our window and the margin auto auto and text align center okay now we will do inspect um that maybe a bit bigger like this what what are we doing wrong uh margin there is a typo margin okay so it will look like this okay and our vs code i will minimize a bit as well so here i would like to have a button that when we click it we go back to the previous component let's do that so for this we import button from react bootstrap and let's say i want the button here that will say back and on click we want to go back so we also need to import user navigate from react router dom and declare it here so now we can use this navigate variable in our on click method so on click to go back we say navigate to -1 okay so go back home page next it's working okay let's do just a basic styling of of our buttons what i would like to do here is just you know uh widths 100 percent um here i would like to delete the class name and also the styles and just do style equals with 90 percent marching auto auto and text align center so okay this button i want a variant of outline dark outline dark so we click next and let's style also a bit this back button what we do is uh style equals width 100 uh variant equals outline dark okay i think looks good so on this create a post page we would like to return a form for the post okay so let's do that let's import the form from react bootstrap and return it right under our header inside the form we have form dot group tag and inside form.group we will we will have two inputs uh post title and post description so first forum control is an input and the second one here the name will be title and here the name will be description okay the placeholder will be also title and here placeholder will be description okay so i will also add some inline styling here just to add some margin at the bottom of one ram and also the same here okay now that we're done with styling let's write our first functions so what we would like to do is when we type something here we want to track what we are typing and to save it to the local state for this let's import let's import the use state hook from react not from react and here we will initiate initialize initiate our state so it will be like post set post equals use state and it will be an object in this object we are going to have two fields in title that will be initially empty and the description that will be initially empty and so in our form control in our inputs we want to add the own change method so on change when we are typing something we would like to launch a function that is called let's say handle change and the same function will be here but for us to track the what we are typing and to save to the state we also need a value for each of our inputs in this case the value of the first input is coming from our state so it will be post.title post.title and here will be post dot description okay now let's create this handle change function so we write const handle change is a function of that takes an event and in our case look console.log event dot target if we just start to type something this function will launch and you can see what we mean by event.target okay refresh the page now marina you see we are just console logging this event on this input now what we want to do we want to extract the name and the value of this event to variables so to deconstruct uh these two variables name and value we use this syntax syntax we say const name value equals event dot target okay and now what we want to do is we want to set our post to something here we have access to the previous input and we want to return an object with the previous inputs and where name dynamic name equals value okay so now when we are typing we are actually saving what we are typing to this state and consequently changing the value of each input to test this let's you let's import another useful hook that is called use effect and we will do like use effect equals uh no use effect is inside takes an anonymous function that we will just where we will just console log the post our state and it will depend on on the state here in the square brackets you write the name of variables or you write some some value that when this value is changes is changing the use effect function launches okay so now let's see what we are logging marina you see and description is kim so we are tracking the states awesome now all we have to do is use axios to send this piece of information to our backend to our server i will delete this function and when we need another button here to save to to send to the server to save to the database in inside our form we will create another button that will say will will be called like save post or create a post and on click it will call a function handle click now we will create this function so we'll say cons handle click it was a function that also takes an event and we want to event dot prevent default behavior so it doesn't reload the page and then what we want to do is to import axios from axios we delete the use effect and we do an api call like this axios dot gear oh sorry dot post because we are posting information to the database at the url http localhost 3001 slash create but for the information we don't have to write all this uri we can cut this part and leave just slash create but to for this to work we need to go to the package.json file inside our client folder and add an additional key that is called proxy and we paste it here okay but when we change the proxy in the package.js json file we usually have to restart both our server and our client so let's do this npm start you see it's restarting and while it's restarting let's go back to our create post page and style a bit this ugly button it will be also width of 100 and margin bottom one ram and maybe it will be variant of outline success because we are creating something and it looks much better already now we said when we click create post function we want to launch this handle click function here what we do is we access dot post at slash create and as a second argument we need to provide a piece of data that we are posting to the database in our case this is simply our state that is called post medicine object so we can just say post and then we do the basics the basic promise error handling and stuff we have access to response here we can just console log the response and after we catch an error console log the error okay so it looks something like this now we are sending this state to the server.js file where we can write our first api app.post at slash create callback function of request and response and for now all we want to do is just to console.log our dot body and see what's happening in our server terminal okay now i will reload the page and say marina kim create post and undefined nice i like it what's up why undefined create rectal body app.post and slash create arc axosport create post hmm let me try again marina kim create post and undefined so nice maybe okay let's do some debugging it's part of the development process here instead of uh calling the api we will console log our state and we will see that we are sending actually some data to the tp title marina description kim i know what is the problem let's go back to our server.js file and we have zero configs here zero middleware we need some middleware to check all the http requests coming in and going out so for this after we declare the app we need to do like app.use express.json okay first middleware then we have app.use dot url encoded where extended equals to false and third one app.use course and that's it and now it should work let's try again hello marina create post and ta-da ta-da we i saw that we are sending this data but we are sending the data we are j we are not sending the data we are just console logging the posts now let's uncomment this line and try the last time now i'm sure it will work try again marina create post and voila we are receiving the data in the back end now what we want to do is to save this data to the database for this we start with our mongoose so after the middleware and before our api routes let's connect to our database for this we write mongoose.connect at local mongodb today we will be using local manga tv but it's uh not a big difference with the mongodb atlas okay next time i will use the mongodb atlas so the local your the local mongodb uri is mongodb colon slash localhost zero one seven slash and we provide the name of our database let's call it uh my db okay mine db and after we connect to the database let's also catch an error if we have and console log the error we need to create our database schema and model for this let's declare a post schema that equals to mongoose dot schema where we have only two fields it's basically the title that is a string and a description that is also a string okay then to create the model we say const post is just a general practice to call it with a capital p capital letter so it is a mongoose.model the first argument is just a string string value of the model and here the name of the schema that we are using post schema okay now that we have configured the schema and the model we can instead of console log in the requested body we can refer to this post schema and save create some data so we can use post.create method inside we provide the like data that we want to create we say title and title equals to something and description equals to something in our case title is our request you remember we were login request dot body so in our case title is requested by the title let's write like this reg dot body dot title and description is rec dot body dot description okay and after we create we want them to we have access to this document that we created we won't just console log the document and after that we want also to catch error console.log error okay so basically it should work now let's test i will reload the page uh title description test create a post okay i think it's created you see but if you're not if you want to track all these changes in the mongol shell we can open a new batch terminal if you have installed the mongodb on your computer when you type you should open a mongol shell so here we can show dbs to see all the databases we have and our database is called mydb so we can say use mydb and here we can say show collections to view all the tables we have so we have posts and now if we save db dot posts dot find all dot pretty we see our created object so we have finished with the create route now that we have finished with it we can proceed to the read route so now we want to see all the posts that we create here on another page uh listed okay so for this let's go to our create post component and when we click handle uh when we click this create posts button we are sending the data to the server but we also want to navigate to another page okay so first of all let's create this page i will [Music] create a new component that will be called posts.js and here we have a functional component where we just return a div with h1 that will say posts page and we export it as default posts okay now we go to our index.js file import it here import posts from posts and create a new route for it for this component okay so here we change to post and then look the path will be slash create slash posts because we are going from create page to the post page the your url will be like that okay now you will see okay so let's go to our create post component and add navigation use navigate we have already imported so all we have to do is when we are finished with our axios function we want to navigate to uh posts here you don't need to write creates let's create slash posts you just write posts and the routing understands that we are going to slash create slash posts let's check marina kim create post and ta-da we are on the posts page now let's go to our first component and make it some style it a bit okay so here the width will be 90 and the text align center and the margin okay some some typo i see some typo what the i think i will two in a rush i'm in a rush okay but no problem text align center okay so here we need to get all the data from our post database for this let's import use effect from react and we also need axios from axios okay so uh first of all we in order to fetch the data from the back end we use the use effect hook with anonymous function and here we leave as a second argument and empty square brackets it's very important to avoid continuous rendering okay so here we just say axios dot get at slash posts we have not created yet this route but we will later for now let's just um finish this axle.get method uh well basically it's just this all we need to do to buy to avoid some errors just to change the then method where we have access to the response from the server and we console lock this response and also catch an error okay so like this now we go to our server.js file and we configure this route um.kit and slash posts function of wreck and dress as usual and here what we want to do is we refer to our post model and we just call the find all methods after we find all we have access to the items all the items in the in this collection uh and then we want to rest.json all these items meaning that we want to send a response from the server to the client um sending these items in the json format okay after that we want to catch an error and just console log the error okay i think should work now let's just reload and see you see we are receiving the data i will just make a bit bigger and in this response we have response.data with the two elements that are currently in our database so what we want to do now in our posts components we want to save this response to the local state and for this we use the use state hook let's configure our state here above the use effect function okay it will be called posts set posts equals use state that is a list now this is also important let's initiate it as a list as an array and here where we are console logging i will add square curly braces and add another line to this function body where we set posts to rest.data because we need because we need res dot data these two uh to this array and now what we can do is we can finally display them on the page and for this we open the curly braces to be able to write some es6 syntax and we say uh by the way sometimes you you don't want to return the data before they are received from the back end so just to avoid any issues i do the ternary operator check here so i ask if posts are available if yes then i do something if not then i don't do anything okay so if posts are available what i do is i i add these empty tags inside which i can safely map through our posts so posts posts.map and for every post we want to return a div where with just to test h4 of post.title okay yes we are receiving and let's say a paragraph of post dot description but okay let's do some styling yeah style because um for example border solid light gray one pixel and let's say border a radius of eight pixels and let's say margin bottle of one ram okay it's good enough i think so now for every post we want also to return two buttons for each post uh first button that we will first import from the bootstrap so first button is update and second button is delete these are two functionalities that we will eventually implement i think on our div we need also to add some uh padding of one gram maybe okay and here we will wrap our buttons inside the div just for the basic acceptable styling okay and on this div we will say display lex flex direction raw and justify content space between okay and on our buttons we'll have the width of 100 and here also margin right of one gram okay i will just add the variant very quickly this will be outline info and this will be outline danger okay good now we have finished the um read route we will proceed now with the delete route because because it's a bit easier than the update and then finally we go to we are going to update them the post okay so delete when we click the delete button that is here so on click we want to launch a function to delete this post but this function will take an argument let's call this function delete post it will take an argument and the argument is the post id and we have access to this post id right here right here so we have pause the title post.description and post dot low dash id that is generated when we are saving this post in the database okay and now we have to write this function above the return statement handle host code delete post so it's called delete post equals a function that takes an id and what we want to do for now is just to console log this id to make sure we are receiving this the correct id so each child in a list should have a unique property let's fix this small issue okay the problem is that when we are mapping through our post we need to provide a unique key to the first returned element in in our case is this dip and we can actually do the post hello dash id also here because it's unique now when we click delete we are receiving the id all we need to do now is um use the axios.delete method where we will have here i use the backticks because we will have the dynamic uri it will be deleted at the api route localhost 3001 slash delete slash and here will be the id okay i will not console log it okay after that we have as usual there access to respond so we want to console.log the response and after that we want to catch error console.log error so something like this now we go back to the server.js file and we write this api app.delete add route slash delete slash and here we use the column id so this is called like request parameters okay and the usual rack and rest function here what we want to do for now is just to console.log what we are receiving as request parameters so reg.params okay back.params let's open our terminal and check this when we click delete we are receiving the id of our post that we want to delete it means that we can use our post model to find the id and delete where the id will be equal to request dot params dot id okay and then we can say dot then we have the access to the document that we are deleting and we want just to console log this document and we want to catch error after that and voila i think we have finished let's test we click delete here we have logged the deleted document if we reload the page here we have only one document but we don't want to reload manually so when we access dot delete when we delete the uh the post and click this button we want to window dot location dot okay so now now what we have is delete and it's updating but i think we also need a button here to go back to the previous page because otherwise what do we do here let's do that let's do this button above our i mean below our header button and back that on click will be i think will be like navigate to -1 but we have not imported the use navigate so let's you import use navigate from reactratum and declare it here okay so now it should work but only if we provide a basic styling here just as usual style equals width of 100 margin bottom of one rim and maybe variant of outline dark okay so now we can go back and we can create new post with new description and we have finished with the delete route delete operation yay now the last one is update and for this i suggest we use a react bootstrap model let's go back to their website components search for model model no no i need a model please yes okay and let's choose the simplest one okay here is a good example i think first of all we need to import a model from model so i copy this line and let's go to our posts component and paste it here then we want to copy this variables and functions okay and finally we want to import the model itself doesn't matter where you paste it i think i will paste it after the back button okay and finally we want to unclick handle show to copy this function and attach it to some of our buttons so the idea is that when we click the update we want to open the model with the form where we can type the updated title and updated description and sent to the database okay so we have to tie it this to tie this function to open the model to this to the update button here it is so let's say on click we will launch a function that will also take some arguments we will call it update post and the arguments will be post id post title and post description in general in general like post i think we can do like post yeah let's do let's try like this and let's write this function const update post equals a function that takes a post and we want just to console.log what we are receiving from this function okay uh update and we are logging the post that we want to update good good good good now we want to up to open the model when we click update so we say handle show let's try okay now let's work a bit on the model instead of this header we are going to have like update a post and inside the model body will delete everything and we will return a form inside which will be form group inside which will be two form controls form controls this one will be placeholder title and this will be placeholder description okay let's do also some margin here uh margin bottom equals one rim uh okay so now we need to track what we are typing here but first when we click the update post we want this model to already be pre-filled with our post information right so for this i suggest we create a new state for example here that we will call updated post and set updated post equal to use state and this will be an object uh some object okay so when we are updating the post we said uh we are receiving this updated post so instead of console.log and we want just to set updated post to this post okay so uh it means that our updated post state is now filled with what whatever post we clicked so if we click this one our updated post information is available for us to use and we will use it in our model for example here in the first input we will say name equal title and value equal uh updated post dot title but we check we check we use the ternary operator here we say is updated post dot title available or is the existing and then return updated title otherwise return nothing okay and the same we will do on the other on the other input so name equal description and value equals updated post dot description if it's available if it's not available nothing so here here is how it looks like and finally what we want to add to these inputs is the own change method that will be handle change and the same methods will be here and we need to write this handle change functional const handle change is a function that takes an event you know what usually we write just the e it's easier uh it's faster we say set updated post to previous input and return a new object where we have previous fields and also where name equals value so we are changing the updated post yes because we need to deconstruct the name and value from event.target if you remember yeah so you see now it is pre-filled and we can't even modify it now what we want to do is when we click save changes we want to send the updated information to the server so what we do is we find this button in our model save changes and on click we write a new function that will be called save update post or maybe save updated post okay now let's write this function somewhere here const save updated first equals a function um maybe it takes an event or maybe not where we want for now just to console.log the updated post just to make sure that we are updating and tracking and we are sending the correct information to the server now let's reload the page click update click new post title and new description testing okay save changes and you see we are logging the updated post with the updated information great now all we have to do is to send this information to the server for this we are using the axios.put method and we also provide a dynamic uri so i'm using the backticks and we will perform this operation at url localhost 3001 localhost three three what what is up with my diction 3001 slash update slash here we will provide the id of the updated post so updated post dot id like this it has a low dash id if you remember we have console logged it so you see id is here and as the second arguments we are sending a piece of updated information an object in our case this object is simply the updated post state okay now we can chain the dot then methods where we have access to the response and we can console log the response and we can also catch error and console lock the error now all we have to do is when we click save changes we want just to close our model and window dot location dot reload the page but this api is not working yet because now we have to configure it in our server let's do like this app.put at route slash update slash because we are sending the request parameters it will be an id usual function of request and response and what we want to do is just console log the request.params and also because we are sending some piece of data we want to console.log request.pari let's open up a terminal and check and test this boy command r to update click update new post title save changes and we are receiving the parameters of request and the body of the request so cool now all we have to do is just refer to our post model and say find by id and update so first curly braces is their id the filter so we say find by id and update where load dash id equals to reg.params.id and the second curly braces is the updated information that in our case is simply let's say title equals to react.body.title and description equals to rec.body.description okay okay so after we call this method we want to change their method where we have access to their dock updated document and we want to console lock the updated document and finally to catch an error and console dot log the error save and now let's test okay so i will reload the page update new post title save and new post title everything is working i hope you liked it i hope it was not too long and too boring if you did subscribe to my channel and i'll see you next time

Channel: Marina Kim

Views: 11,281

Keywords: full stack, full stack developer, full stack project, full stack web developer, react js, reactjs tutorial, reactjs projects, reactjs in english, react js tutorial, react tutorial, reactjs hooks, mern app, mern, mern stack, mern stack project, mern stack tutorial, javascript, javascript tutorial, mongodb, mongodb mongoose, mongodb react js tutorial, mongoose, mongoose node js, node js, node js tutorial, node video tutorial, node js express, node js backend, express js

Id: bRIJQRDI1yg

Length: 54min 49sec (3289 seconds)

Published: Sun Jun 19 2022