MEVN Full Stack CRUD Application | Vue | Nuxt | MongoDB | Express | Node | Babel | Vuetify

hello and welcome back to another exciting session i'm your host karya you're watching me on youtube now and today i'm gonna take you through the full stack application in node and viewers and we are going to use babel for modern javascript and we are going to use next as uh for futures so without wasting any time let's deep dive into it so i'm going to create a new folder uh mev and we can say maven stack i'm going to be expressing you a node after that will go into it and i'll open my vs code from here only and then we can start i guess so i'm going to create two folders we can open terminal from here as well from here and i'm going to create folder folders like app we can say where we can add view data and here i'm going to create apis a little bit i guess and uh here i inside eps we are going to set uh first of all you have to have yarn available if you don't have it you can grab this uh by this like oh yeah okay i already have it so you can check this like fnf version after installation once you have it after that you have to set up like this or you can use npm as well so i have used so after that the package.json will be created after that you just need to add few dependencies which will be dave dependencies for people node people core and people the city and me that's it i guess so i know one should be there as well and you need to write start script over here okay scripts and here i'll be using nodemon people node and app.js which will be your primary file there will write the initial code so let's create app.js where i'll be using express and all the things and we are going to use src folder inside the src we are going to now put all the mvc structure so this is general format that i always use let it be so here we'll be having config first of all where uh inside config will be having index dot js okay index.js i don't know why okay fine after that here we can create connection between mongodb and uh node and after that we need few other dependencies like express so yarn add express mongoose.env and course to communicate with the vue.js and we have to have um we don't need body parser by the way for now it's fine so norman is remaining still not one should be there so import mongols from oh we can say mongoose and mongoose.connect will be having on localhost slash http colon 27017 and this is it i guess no need to worry about anything else and inside src we have to have models we have to have one controller controllers we will be creating src uh services and inside services would be having user folder but this is a file we don't need file i guess we need folder like user and inside user will be having like gate.js boot.js host.js and delete.js delete torches and after that inside model will be having user.js controller user.js and one more file a route is remaining routes inside routes will be having user.js as well so this is it i guess so we have created this thing after that we need to create dot people rc people rc file to right presets that we are using are at people slash reset env okay this is it that's it i guess and you can create development env and production env okay so for now you need to set up the variable i guess to if if you deploy this app so ah node underscore env is available that we generally use to set up okay that you will get from here inside let's see or you can directly search as env okay setup environment variable inside here you can see no dnv so you need to set up development okay so in production you need to set up production so it will be called so app.js so here i'll be using import express from express and now const app equals to express app dot use and express dot static and set static but for now we need json and app.use we need express dot url encoded extended room so you don't need to use body parcel nowadays and use course okay so here i'll be using import codes from okay cross platform uh have dot listen process dot env dot port and that you will get from config so you need to import import that dot env import star as or you can directly use require as well like this require and inside that you can define the path okay and path will be like this we can say dot slash or you can write like this or process process dot env dot like this dot e and v so it you it will get that node underscore nv global variable and uh for this project it will be called this one so you need to define port here port will be 4000 let's say so this is it and we are good to go now we can use app.use here like i don't use user let's say which will be which i'll create okay so let's import user from somewhere like route let's say that we have just created routes inside src okay and user so we will go there and we'll create import express rom you can directly import router as well where you can create a const user in equal to express dot router like this or else you can directly import like this as well which will be better i guess according to me and once you have it you just need to call the router function and will create a normal gate method here okay like this let's say uh if i'm using a controller okay so first we'll export this thing as default so we can import this into app.js and here i'll be using uh controller user controller let's say that will import from uh yeah import um dot dot slash controller slash users okay so let's say of which all users page users okay users so now let's go here and let's uh create controller so for that you just need to create variable that we have just created let's go to the controller first route let's say inside out we'll get this name and we'll use export export const variable this will get a request and response here after that on the basis of that will go to uh for now we'll just use arias.json to test the message let's say because we haven't tested so message hello world okay so this is it for now and let's uh try to run this thing let's say yarn start now we forgot to install node one i already have it so you need to install node one as well now after that you just need to go to your chrome and go here for localhost colon 4000 let's say okay and okay so now uh we need to find the model is not defined the course is missing i guess let's check into the package.json inside package.json you can see the course is there but we inside app now okay this one so let's try this again okay okay so after that we will get something like this we choose us okay got it so inside route let's go to route inside out with which users so we can say star as features user controller which will be better i guess if we use like this let's try this again okay now this is working so this is the first step that we have uh made after that we can define this uh like uh four times i guess let's close this okay like features now we'll create a fetch user then we'll create a top create user let's say create user then we'll create our videos update user will be there and delete user will be there so these are the basic things that we use in normal restful api so page users uh will be like this which single user okay so now uh the next thing uh let's go to the services okay so for that we need to create models first so let's go to the model let's create a model so uh import let's say mongoose import mongoose from mongoose okay let's create export default let's say and here i'll be using our user user i don't know let me see let's use construction for now and here will be having mobile start model very defined model name is user comma new let's say mongoose dot schema will be having i don't know this is capital small i guess name name emails and let's say password email and password this pre save should be there but we'll see that later for now okay now we'll be uh using this thing inside uh our controller or service we can say so let's go to the gate service first where uh we'll just create const uh export something first export let's say cost and inside that will be having um users or all we can say okay inside that all we will uh return something like return something user user dot find all let's say find and we'll import from here import let's say user from dot slash dot slash i guess model slash user user like this this is it after that we'll be having a buy id method you can create like you can pass id over here you can there is find by the method is that right so i'm not sure but okay like this and let's use a weight and a sink as well here like this okay and let's use of it as well so this will be in single line as well it's all up to you how you use it guys but this is the good practice if we use single line statements like this okay and shift f to format the page and after that let's uh use delete by id as well so find by id and delete method is there okay and let's create update find by idn update okay so update is update and delete should not be here it's it's okay this is it now let's copy this thing and inside put will use this pi id where we need a user as well to update something okay so find the id and update method is there and update i guess i'm not sure why i'm not getting this but yeah this is the method that and delete press delete delete user let's create by id delete user by id so find the id and delete find by id delete let's remove this thing now create is remaining so let's go to the post.js and uh control p i'm using to search for the files like this so here i'll be using create method where we pass user and this will be normal create method where we'll be having the user this is the tigers now we can go to the controller like this you can search like this controller and here you just need to import everything like import u r d import star as get user always let's say off from dot slash or download slash we can use services slash git get service so it's a slash use so we can say so it's a slash user slash git like this so now we need to import this thing for four times use it for put put post post delete and delete so now we have it now here we just need to write try catch let's see just try catch where we'll be having our res dot status for 500 generally for error we sent and json inside json you can pass the error and otherwise res dot status will be 200 and json will be anything that i will get like here i'll be using await again oh wait and this will be my async method okay so await gate user service dot or let's say all method is there and we'll follow this thing rest of methods let's say we'll use which user okay that you will be having pi id okay that will pass id and which will be request dot params dot id okay and then we'll be having gate create user let's say okay and we will be using host user host user where we will pass body and we can extract data here before as well like this like a name email password like this from request.body which will be the good practice if you are um planning for the big project like this and alt shift f don't forget to use and this will be 201 it's created so it's 201 so next thing that you need to know about update user update user where i will get this thing as well and we'll use update i guess uh by id i guess i'm not sure what the method name we have created but put user service that i'm sure about so put user service by id where you need to pass id comma so request dot params params dot id comma this okay so this is it i guess now we can uh proceed ahead i guess it is 200 let's say i'm not sure about the status code okay delete user let's say okay delete user by id let's use delete user which is buy id and here you don't need to pass anything like this here you don't need to pass anything like this and this is it we are ready to go now just need to check route once user dot route where we need to define our rest of the things like this workgate page user for post create user find for delete by delete user okay and let's use id here we need to pass id and post put as well so inside here let's use put method okay update user okay user controller and where we need to pass the id as well okay let's write id here so this is it i guess if i uh start it's let's check for the server okay mongodb is already running inside my system so uh this is already running guys so if you don't have it already you can use this command like if you have docker then docker an one seven coin two seven zero one seven like this and you just need to hit this command so docker will be inside docker it will automatically create mongodb okay so i already have it so you can create your own so we forgot one thing that is config so inside index we need to define this and we need to import this thing somewhere so we are not using inside app we need to import here yes somewhere so let's say import dot slash uh src slash config slash okay so uh this is it is we don't need to worry about rest of the things we just need to hit this before proceeding let's okay anyways let's go here let's uh let's open the post man if you have it let's open the post man it will take some time i guess there's lots of things now okay so inside get get all users you need to set up first okay okay like this here here i'm using user so let's use slash users so every route will be preceded by this thing so let's try this out i'm not sure that it will work uh but okay the 4000 we are using not 3 000 so let's okay the empty thing that we got i don't know why it's not working properly but it's fine okay so users let's use the post method we have it host users let's i already have uh used it before as well so this is not working that we can see this thing uh it might be possible that i have made previous text okay so let's see why this is not working okay let's go here let's refresh the page okay and let's use slash users okay we are getting empty something so let's go there inside users okay inside features i'm getting something like this oh we can use console logs to check that this is executing or not okay it's going here after that git user service we have used okay let's go there search for all all is there okay user not find all this also there so everything is fine it should work i guess so the connection problem should be there if i'm missing something okay let's go here and let's console log something here okay like this also log fast one let's say if i execute this thing again so let's see yeah password is also there so the very next thing wants to use equal to let's say return user let's console.log user okay let's check this out okay so it's it's not working we got something no so this is the type of testing we can say by using console logs so it's not executing once but if i use this like this so it will be executed uh see mention defined so once here yeah i have made something mistake inside user so now we will go to the user so here okay so the problem is in here i guess uh or config file where i missed something like the tv name let's say i have test tv let's try this again it will take some time to make connection i guess okay okay this is fine you can use like this as well to check error so we don't have any errors so i found one thing like it should be like this okay post and delete okay this is the titles it should work now okay so uh the data was already there so that's why i'm getting this and apart from that if i use a post request like this so let's use name name serious name let's use name at one two three so uh we'll get the data so the data is now created so if i go here if i try to delete but before delete let's try to get the single data like this so we'll get we are getting nothing here let's see let's go to the controller this page user okay inside features are get user service let's click here all by d is there okay and by it is that let's use okay let's try this again get user user dot find by id this async method we are passing id over there okay and let's see inside the controller ctrl kw to close this thing let's go to the controller once again request.params.id okay okay b is capital sorry b's bit should be small i guess i'm not sure should be small so yeah we got it so uh let's try to update this thing okay uh we have this thing let's try to update this thing like this it will be so here we got error or something like that okay this is four thousand so okay it's updated uh let's go to the delete now let's delete this thing so it's it will delay okay again this is 4 000 so slash delete is not there let's go to the route okay let's check for the user.delete is there okay id should be there to delete something we need to define the iodine params so then only it will okay it's deleted so now we can proceed for the next part so let's close this up eps part let's create a new terminal from here let's uh define like this cd into app let's say and let's use init why okay let's say install yarn add on next a new xt nux like this and at nox js slash axios at next year's slash beautify uh like this i guess it will take some time to uh watch okay so till then we'll do one thing so we can use the jwt and uh the other things as well like decrypt as well we'll see that later if we get some time so for now and i'll create layout i guess uh we'll create components compo and we'll create a pages i guess now we'll create a nux.config.js dot config torches and inside that will be having i'm not sure but let it be more insights modules at at next js slash axios and build build models build models i guess will be i'm not sure but beautify will go here i guess at next chair slash beautify will go here and components components will be true i guess something like that something something like that but we knew i forgot one thing it should be export default okay like this export default so build models will be verified models will be access and components will be through so this is it i guess uh let's go to the pages and create something like index.js where i'll create a view okay you have to have few plugins available before proceeding or let's go for a v-u-t-r i guess viewer or something the package name is this one you need to install this i don't have it i don't know i don't have it but i'll install this later but uh once you have it then you'll get lots of suggestions okay let's search for view beautify anyways get this letter so inside layout will be having a default dot gsis default.js inside components you will be having a form torches and table.jsis and this is it i guess these four things you need to know okay okay i forgot one thing it should be view just okay so let's use view and this is layouts also rename it after that the form is dot view and uh same goes for table only uh table as well sorry after that uh layout default uh we will start from the default where we you just need to write view and you'll get suggestion i guess this default view you don't need okay after that here you just need to write view div inside that we are using vertify so you need to define app inside app we have main okay inside main we have the app bar okay awp app bar where we'll be having v app bar title okay we'll be home let's say for now and after that we have a container inside container you can define uh like justify uh center and you can define now another a line will be center like this okay so and this is all up to you and here the next part will go okay like this i guess i'll shift f to format the page okay so don't need this space so this is it for the uh default page after that the index page index dot view that is that inside pages we need to rename this thing as well so let's use view okay here again view default here as well uh it's good practice if you use div okay so insider will be having column inside column will be having table okay and inside another column will be having table so first will be the form that will f1 and form so this is it i guess for uh this thing okay now we'll go to the form but before going to form we need to create a store so i will go to the store first so we don't have it so we need to create a store folder where we'll be having user.js and users dot js where we can write the state okay so export cost or state equals to oh we can see id will be having id id name email password like this and here we'll be having export const mutations will be object where you can define like state id so it id will contain state and action or data we can say so you just need to store state dot id equal to data like this and you can define this for all the attributes like name email and password so the process will be same name email email name and password okay and this will be comma separated okay this set i guess our same goes for here inside users but the only changes will use kind of store data the name is store data let's say we will be having state dot theta i guess will be better because it will be the array so we'll use state.data and here we'll be using data only which will be array of users okay for now this empty alt shift f alright shift f to format the page and now we can proceed with the component part so let's uh start with the form in form will be very easy like you need to define div inside that will be having one pr should be there i guess okay now so we can write h2 simply form or add user okay like this after that you can create um then inside form will be having text field text field inside that will be having model let's say v model and the model will be let's say id and after that we'll be having label let's say capital id like this okay now we can use this thing i don't know what happened okay we can use this thing okay for name email and password as well name for edit and update will use same page that's why i have used id or there in case of added title show the edit button so we need to define vbtn which will be on click will uh call something like method like this and we'll pass that id name email password here okay inside here and we'll name it like this if we get id then we'll define edit else we'll define submit like this shift f okay this is it now we can go to the here we can define computed computed will be the object where we can define id okay and where we'll be having data status let's say so get gate will simply return something so what will return it will come from store so this dot store dot state dot user dot id and set will get the value and here we pass this dot dollar store dot commit okay and inside commit you need to define the file name slash state id the function name and the value it will automatically say it okay so the same will go we'll use for name email and password okay so we'll go here we'll write name here as well okay yeah as well function name is name email okay email okay email and here we'll be having password password and here as well like this so we are done with this part as well now we need to define the methods here i guess methods so methods would be the object inside that object will define now async methods is saying let's say submit we have just defined where we'll get the user okay and inside that we'll check that if the user dot idv gate then it means that we need to add it uh this thing so we'll use await this dot dollar axios dot let's say put method where will uh define http colon slash slash local host colon 2000 slash users slash id comma user so it will come from user dot id so this is awit okay else we need to post the data like in that case we'll use post method we don't need id okay and we just need to use alt shift f to format the page and here we can we don't need to define user we will use normal name will be user dot name email will be user dot email password will be user dot password because we don't need id by default it will be 0 or something like that and we can use like this so this is better i guess according to me after that you need to reset the user okay so we need to create a kind of method where we can reset the user and where we can pass the object like the id will be zero let's say name will be empty email will be empty password will be empty so like that and here let's say we will create that method let's say reset user that we just defined so where we'll pass the user and we just need to use this dot dollar store dot commit here will define user file name slash state id where we'll pass 0 or user dot id let's say and we need to define for e name email and password so name email and password here as well password email name so this is it i guess this is it to reset once we edit or add the add something over there we need to define this and we need to do one more thing after resetting the page the table should be refreshed so it means we need to use dollar store dot commit let's say and inside that commit will call users slash store data okay inside that will be having uh let's say a bit of this dot localhost colon 4000 slash users okay dot data like this so it should be like this okay so it means uh we'll refresh the table once we add something okay so this is this is it i guess for the form part now we'll go for the table part so let's go to the table dot view and let's create something inside here uh normally these i always use and br type that will use after that ash2 that list of users we can say okay inside that inside here i'll be having now data that you can search for the beautify as well like this and you will get the this thing so data table uh that just need to click here and search for the components so inside that ui components you will get this or table i guess somewhere so let's search for the table and data tables and inside that data table you just need to check for something like this okay so i am just getting this thing okay and uh and just paste this thing here i don't need this class and this thing i just need users i just need users okay and inside headers i'll use nothing for now so get something from here okay get this data oh no for now okay okay uh so now you can paste this thing inside here i'm not sure but i don't need this thing okay so i need headers i don't need this thing okay inside headers as well i don't need this thing i need let's see id name email password edit and delete okay so delete edit password email name id so this is it i guess and now we need one more thing which is we need to define here okay which will be the template let's say template that's fine i'm not getting suggestion but uh template so inside the template we need to define v slot okay we slot [Music] okay which will be item dot let's say oh edit okay and another thing is which should be equal to item we need to define that buttons right so that's why i'm cutting like this this is this is the perfect way to do this now we can define button here like vbtn okay and where you can define color like this let's say success okay and you can define click events as well okay like this let's say now this will be for edit item okay inside edit item you can define item dot underscore id okay and here as well you need to define underscore id so after that it you can write add it here like this so for delete as well we'll use delete okay and now for that delete you need to pass an id or edit you don't need pass this this is it i guess this is it now we can proceed and this will be danger danger button means it should display in trade and now we can go to the rest of the things like the very first thing that the headers part is fine after that the computed computed should be there where we'll be having users okay and inside that users will be having will return something let's say we written this dot dollar store dot state dot users dot data let's say which will be the area of users okay and after that we need to define methods let's define methods which will be object of methods well we'll be having async using delete item let's say okay that will be having async edit item edit item let's say okay and the very first thing that we have to have that async which page let's say normal fetch which will be like this okay so here you just need to do one thing like this dot dollar dot commit okay and inside that you just need to define users slash store data okay and here we'll be having await this dot dollar axios dot gate okay http colon slash local host colon 4000 slash user slash like this dot data okay so it will get the data and after that um which that you can separate this page here as well okay like this it depends but generally i do i follow this thing okay so if you do this then uh the two things are remaining now are the delete item which will get id and edit item which will get user so start with delete first let's say oh wait this dot dollar axios dot delete okay or where we have path slash plus id like this okay now after that we need to do another thing we need to refresh the page you can call page directly from here as well it depends uh i'm not sure you can use it but for now and the next thing i will use add it okay or add it okay uh once we delete something we need to refresh the data okay and inside edit item what we'll do we'll do one thing like we just we don't need to do anything just get the data and update into the store so this dot dollar store dot commit let's say okay inside commit will be having user slash state id user dot id okay this is underscore id i'm getting confused okay name email password email name id this is it i guess this is it if i want to edit something uh means we are not editing anything we're just getting the data follow so this is it i guess let's try to run this thing by yarn start i hope it should work and okay okay fine yeah start let's go to the package.json and you just need to define one more thing here uh like scripts okay and start script will be next that's it i guess i know sweet on this thing it should it will take some time to compile and all these things make sure that your backend stuff is running over here and your front end is running here okay so let's cannot find model next year slash vu v-u-e-t-i-f-i-o with the spelling mistake v-u-e-t-i y okay let's try this again we are running this for the first time so it might be possible to get some errors it's fine so it's taking time local schooling 3000 okay let's grab this thing let's go here let's wait for the local host going 3000 so okay so we got something i guess error i guess not sure okay fine fine so uh let's see the state the state thing the arrow operator is missing here so let's go to the user dot store and let's uh correct this thing let's define arrow operator and let's go to the users dot store and let's define the arrow operator here as well and let's see after refresh if we get the table or something here i have already the data so i'll get the previous data as well so i'm getting this i don't need to define this password here so i can remove this but literally uh for now we need to define if condition so uh we'll go to ctrl shift f add user you can search like this so here i just need to define capital a and v if so if i get id then only we'll define the first field this one else i don't need to define this for the very first time let's say i'm defining mahesh karya okay email is mahesh gmail.com okay it's define mahesh at one two three dot com whatever so yeah it's working okay let's delete delete delete edit edit so everything is working fine oh one one one so yeah so everything is working fine and you can see the ids it will display id here once we click on add it so um thank you very much all of you guys for being with me supporting me all the time it's been pleasure to be here if you want something from my side please let me know inside comment box and please hit the bell icon and subscribe my channel if you haven't thank you so much bye

Channel: Mahesh Kariya

Views: 13,267

Keywords: Node, VueJs, Express, MongoDB, Nuxt, Vuetify, Axios, Babel, Fullstack, CRUD, Beginner, Tutorial, MEVN Stack, Full Stack

Id: g8zEdgyfKuM

Length: 63min 37sec (3817 seconds)

Published: Tue Sep 21 2021