Fullstack CRUD Nextjs 14 Contact Book Application | mongoose mongodb Beginner Project LIVE BUILD

for all right so today I want to BU build a full stack crud application contact book application used in NEX js14 and I want to experiment using server actions um I've been using them quite a bit here over the past couple weeks and I like the performance and I think I prefer it over the app router although there's a need to use um the app router in some instances so we'll just build a simple crud contact book application that does all of the um create read update and delete functionality and we'll also um add some styling with Tailwind CSS and use Daisy UI to kind of help a little bit with that so the kick us off will start um with a project folder that's located on the desktop and we're going to open it in vs code and in your terminal we'll type in the command MPX create-- apppp at latest and we're going to name this directory my app and hit enter and in this project we're not going to use typescript we will use the es lint we'll say yes to Tailwind no SRC um yes to the app router uh no import Alias and we'll give it a few minutes to complete this installation all right it is still going all right and once it's complete be sure to CD into that directory and we'll need a couple of dependencies and we'll add some of the front end libraries as we move along but for right now um let's go ahead and type in um which is what we're going to use to interact with our database and the DB of choice for today's video will be DB and I think that'll be all that we'll need for right now we can always add more later but make sure you're into that directory let's go ahead and install mongus and mongodb and then we'll press enter and we'll give it a couple moments to install all right so now that we have that installed let's go into the project folder and first thing I like to do is within the get ignore file let's add ourv file just to make sure that we are not uploading it to um to our repository and within the my app directory let's go ahead and add the file name EnV and if we want uh let's go ahead and add another directory within my app app called lib and this is just going to hold um some of our utilities and for this video we'll add a file name db.jpg repositories um that way we don't have to type this out and we minimize the likelihood of an error um so once you have this typed out just pause the screen here um we do want to copy this um this environment variable name um monguor URL and let's just paste it into ourv file this is going to hold the connection string to mongodb that way we don't have to worry about um having it within the actual code itself we'll use it as an environment variable um and it'll help us with that connection to the database so um with that we'll go into mongodb so I already have it um up and open and if you don't already have um mongod DB um um an account with mongodb just be sure to sign up is free and you can walk through the steps of creating a project um it only takes a couple seconds and that'll take you back to this particular window so what I'm going to do is um I don't recall what password I use for the connection string so first what we'll do is we'll go to um database access and we'll go to edit and for password we'll click on edit and I'm just going to ask it to autogenerate one show it I'm going to copy it and I'mma paste it right here and once we've done that I think that's all we need we'll go to um update user we'll go back to hide we'll go to update user and once we have it updated let's just click on database click on connect and the first option connect to application click on drivers and once you click on drivers it's going to take you to connecting to mongodb uh excuse me connecting with mongodb driver um of course this is a node project we've already project excuse me we've already installed mongodb so we'll come down and we'll copy this connection string and let's just click close and reduce the size of this window and go back to Google Now within ourv file let's paste in that connection string and grab this password that we just created and we can delete the password Place holder replace it with the autogenerated password and we can go ahead and close out these two files because we shouldn't need them anymore um throughout this application all right so now that we have our database connection setup let's go ahead and create the model um that's going to organize the data within our database So within the my app folder let's create a directory called models and we're going to call our schema a contact schema so I'm just going to name this file contact.jpg our data within um our mongodb so first thing want to do is um we want to import because that is what we'll be using to query our database and once you have Mongoose we want to create a contact schema May and we want to set that equal to new mango. schema and within this object we want to have um some features uh we want to have some some data that's going to be organized within the database the first data that we want to store is a first name and this is going to be a type of string um because this is going to be characters that will enter through our um nextjs front end and we can just set this to required as true just for um checks and balances you can leave it blank I'm just going to set it required true and let's make it a little easier on ourselves and let's copy this and we're going to paste this in um two more times one for last name one for email and we'll do one more for phone so let's just update this code and change first to last change first name to email and let's change this first name to phone and the type for the phone is a number so we'll change it to number and I also like to store the timestamps as well I don't think we're going to included for this project but um as we're building you never know we may want to add it in and we'll set the timestamp um storage to true and then now that we have the schema built let's export it that way we can access it throughout the uh application and we're just going to name this models and this is going to be contact which is going to be the name of the schema the way that we'll access it in the uh server files and we'll go with mango. model and we're going to name it contact well its name is contact excuse me and we'll go contact schema all right so let's go ahead and save this file I think we've typed everything in correctly if not we will certainly be notified as we continue to build out the project and now that we have that install um we can go ahead and start to actually work on our front end so before we spin up the application let's do a little bit of cleanup within the app and Pages directory so first we'll go in the app folder and we'll click on page.js and within this file let's remove the main HTML tags that are currently holding the borderer code for the project and I'm just going to name the homepage um homepage well excuse me you know what let's remove this code and let's change this to a uh let's use the the RFC uh Visual Studio code uh react template and let's change the page name to homepage because we're using server actions we're going to need asynchronous functions and it's just a little easier to um change this to a async function and then to to do an a wait call back within the uh function itself so with that um on this homepage we'll just click save and the next cleanup I want to do is within the global CSS file let's just go ahead and remove all of the uh Boiler code within it and in our terminal um we haven't started it just yet so we will need a couple other dependencies um for styling purposes but we'll get to those in just a moment but right now let's just make sure that our server is running or that our project Works without any error So within the terminal and within the project directory let's type in the command npm runev and press enter and this should spin up our nextjs application provided we don't have any uh any errors or any issues so we'll give it a moment and it looks like it is up and going so I'm just going to open another Tab and we'll go to Local Host 3000 and voila as you can see we have our home screen listed here or home homepage listed here on the window so before we in install any more dependencies um let's just go ahead and work on some styling of our overall layout and within the myop folder let's create another directory called components and the first thing I want to do is just add some heading text and I'm going to create a reusable heading text file because I want to use the same um fonts and styles and on different pages of the application and versus just retyping it in we'll just create a reusable component so we'll create a file within the components directory call heading text and this is strictly optional feel free to use or not use this based on your preference so I'm going to use the react template to create a little boiler and once I have the boiler the next thing we want to do is pass in some children within this that way we can dynamically change this or that way we can change this on various pages and what I want to have here is a title and description d s c r i p t o n and we can remove this code and let's replace it with a section tag now um this code is going to be inserted at the top of the page so I want to give it a little bit of padding so we'll start with padding on the X then padding on the Y and within this we'll have a div to hold the um the H1 H2 or H3 elements that we're going to use and we want them to be um we want this div to be flexed and we want the direction to be a column let's make the item centered and we're going to say justify Center to have the Tex centered on the um um x axis excuse me on the the um on the Y AIS and the um item Center for it centered on the x- axis so now I want a H1 and we'll give it a class name for styling we'll say text centered although it should be centered let's just make sure we'll go small text uh put a l instead of a colon small text um let's go 3XL and then let's go text 2 XL and I want to set the font to medium and we'll set margin bottom to two we'll go text Gray and let's set it to 800 and this will represent the title so we're going to pass this in as uh we're going to use the curly braces for denounce that this is Javascript and we're going to pass in the title that way we can reuse it and anything that we set the title will have this styling that's within this heading text component then underneath it we want to have a H3 and give it a class name and we're going to give it of text of extra small because this is just going to be the uh description text and I want to set the color to this text to Orange and we'll set it orange 400 we'll go tracking widest and this is just for styling of the font we'll go font medium again and we'll give it a little bit of margin bottom of two and this will represent the description and we'll pass in description here that way it can be um the description will have this styling and then last but not least I just want to have a little border at the bottom totally optional you don't have to um included all of this is for that matter um it's not necessarily a part of the CR crud um functionality but I did want to give a little bit of styling um to our app so that it's not so um it's not so generic so once you um add this code in just to give a little bit of styling or for a border let's save the file and go back to our page.js and within our page.js let's remove this div and give it a main HTML tag excuse me and within the main the first um component we want to have is the heading text that we just created and we'll create the closing tag and we want to give it a let me save and refresh the screen so you see the border is already appearing which is great so with the Border appearing now we just want to add in the title um for the page that we want and I'm going to name um the title um for the page to be contact book cuz that's basic that's what we're building and we'll give a description of all contacts below that way we know we're on the home screen and we know that all contacts um for our application are listed here below so now that we have this portion taken care of next we'll want to add a Navar and it's going to be a very simple nav bar it's just going to have a button to take us uh to take us to the contact page um to create a uh new contact and also a link back to the homepage um so let's go ahead and add that now so we can close out the heading text file because we should be done with it and within the component directory let's add another file named navbar doj and within the navbar we'll start with the um the RFC template and let's just save this and add it to the um homepage that way we can see it real time as we're building it so if we add it in we see that we now have navbar listed on our main home screen So within the Navar we're going to um update the div by removing it and replacing it with nav and inside of nav let's give a class name we want the items to be set to flex we want to give it a little bit of we want to give it a gap of six and I tell you what let's add in link and we'll set this link um name to home that way we can um see the home screen if we click on it so let's just click on it and we have home listed here and in the terminal I'm going to open up another um terminal and let's go ahead and CD into our project directory and I want to install react icons we're going to use um a couple icons on the page totally optional just for styling purposes so in the terminal type in the command npmi react icons and then press enter and I tell you what we only need one more dependency so let's just go ahead I want to use Daisy UI um to help us with one of the models um we could style it um style it we could code it with just JavaScript um but that's going to that'll be a little more lengthy of a video and I don't want to take up too much of your time for a simple CR app so first thing we'll do is we'll install the U the dependency of Daisy UI and then we'll press enter and as that being installed the next thing we'll need to do is grab the plugin and this plugin is going to be used on the Tailwind doc config file so if we go back into our Mya directory and we click on the Tailwind doc config file we have plugins listed here just paste in the plugin that we got from Daisy UI save that file uh oh I typed another character and I can go ahead and close it out and let's close the terminal for right now we'll probably use it later on for troubleshooting purposes if needed but um that should conclude the dependencies that we need for right now so now that we have Daisy UI and react icons installed excuse me let's go ahead and install a few icons so we'll go import the um open and close braces and we'll go from and if you type in react icons SL I like to use the FI icons personally feel free to use whatever icons if you want to use icons at all you can use Font isome isome F font awesome excuse me svgs box icons there's several out there so the first one we're going to add is the plus um Circle and I also want to add a uh fi for home as well to go with our home link so um let's update this to remove the um home for right now and let's add the FI icon and next to um let's add a span the FI icon let's add span and let's type home let's hit save and as you can see we have a icon and the um the word home listed here on the screen so now to bring those in a uh in a row versus stacked as a column on the link let's add a class name and let's just set it to flex and let's set the items to Center that way they are aligned with each other and you can see it's centered now and let's add a gap of four just to give it a that's too much let's go Gap with two and let's make it one there we go so you see we have a little space between the two characters so that that works out perfectly and with those uh we can actually um just copy this and paste it in again so you see now that we have we pasted it again we actually have two so I want to have some space between these two so let's go justify between we'll go and save it so we can see it yep we'll go item centered and let's go cursor pointer right here that way there we go all right and let's change this icon to a plus Circle and save and we see we have it updated and let's change this from home to create and we'll also final well last but not least we'll update the um hre to be um SLC create and we need to create the create page so if we open our um editor and go into the app directory the beauty with nextjs is in order to create a additional route or page all we need to do is add the page name excuse me and add page we need to add a folder with the page name excuse me and then within that directory add page.js so we're going to name this page create and inside of the create directory we'll add a file named page.js actually you know what let's let's change this name to contact versus create no we'll keep it create we'll keep it create and we'll click save and let's go back and we'll give it the RFC template we'll go create page we hit save and we should be able to close this out let's just check it and as you can see it's taking us to the create page so then we'll H back so uh with the create page set up that's going to basically um lead us to the next section of our project which is um having the ability to create a uh contact within our database so um on the create page let's remove um let's let's remove this div and let's replace it with a section and for our section let's um how do we want to do this let's add a um what do we do on our main screen so we didn't have anything extra so we'll just keep it consistent let's bring in the uh heading text and let's add a title H sorry about that let's call this um create contact well we we can go add contact add contact and let's just see what we have on the screen let's go to create so there we have add contact and we'll go with description and we'll say add contacts below and then let's hit save so now we have our uh create page here um let's just build out the um I tell you what so before we build out the contact page we'll need a way to interact with our database um and we're going to use server actions so that that really minimizes the amount of code that we need to use in order to build the function that's going to go from our user interface interact with our server and our database so let's create or tell you what let's not create within our lib directory let's add a file named action. JS and this is going to represent the actions within our application so we're going to have a couple well we're going to have three total actions and we'll build them one by one the first action will be to add a contact the second action will be to delete a contact and The Last Action we're going to add is to update a contact so this is going to this particular file is going to hold all of the actions of our database and as I mentioned we're going to be using server actions so because this file is going to be a server file um we have to um distinguish it as a server file so at the top of this file let's type in use server that way um NEX knows that this is going to be a server file that we're using and then once we've typed in use server let's import our contact model and this is what we built earlier to organize the contacts within our database and then we want to add in then we want to add a uh connection to the database so we'll go import DB and this was the database function that we created earlier and then we'll need to um to um add in um a couple Imports to validate and to um to uh redirect us once we have created our um once we've created our contact so we'll go import and we'll go revalidate path uh and this is coming from next p cast and we'll also go with redirect RCT and this is going to come from next SL navigation um we'll hit save and then let's go with you know I'm not sure we're going to need this one so I'm going to comment it out for right now so we'll go with export default let's create the function and we're going to call this function add contact and we're going to use this function within the form on our contact page um as the action instead of using the use State and use effect hooks so we'll go with um add contact and it's going to be a asynchronous function and we're going to pass in the form data that we get from our front end and within our add contact UM function we'll start by creating um by grabbing the um the objects that come from our um form so we're going to pass in a first name a last name email and phone the exact same fields of the model that we created for our contact and we're going to set this equal to um object. form entries and the form entries are going to come from form hold on form entries and wrong one form data and within this or underneath this excuse me we want to have a TR catch block to catch any errors and we'll always start by connecting to our database so we'll go db. connect and we'll create the variable to save the new contact so we'll go cons new contact and we'll set that equal to um new contact and we want to pass in the information that we're getting from the form using this model for those contacts so we'll have first name last name email and phone and then and once we pass it in we want to make sure that we await this validation and then we want to save our new contact so we'll go new contact. saave and if we get any errors we don't need to return anything to the browser for this and if we get any errors we want to throw new error and we'll go failed to create contact and it will get the error listed here that way if we get an error we can see what the error is and it'll be fairly easy for us to uh to troubleshoot it so with that let's go ahead and save this file cuz that just allowed us to create our first action and we'll go back to our page.js and underneath the header let's add another div and we'll go class name we'll go flex we'll go flex column and let's see what it looks like let's just go test okay yeah that's fine so um here and we'll go items centered justify Center and now we want to create the way to interact with our database and of course we're going to use a form to do so so um instead of passing in the form directory directory directly um and that form will need to have client side functionality and this is going to be a uh server side page let's go ahead and add in another component that way we can pass the form to this page and we'll call this component the file name for it create form. JS and we'll start with the use client um um um distinguishing up top that way we know that this is a client side component let's save that file and create the RFC or add the RFC template now if we save this and we go back to our create page let's type in create form and close it off and hit save and as you can see we have our create form listed here so now if we go back to the form itself let's start by um adding in um let's start by adding a um well actually we don't need to add anything right now um let's start by removing the contact form word and just having the div listed here first thing we want to do is add our form and with this form we're going to pass in a action and the action we're going to pass into it we want it to call the add contact that we just created cre it let's see export cont add contact why is it not let me see did I save it no I didn't put the con export const not default there we go um sorry about that so now if we go back to the create form and let's just remove the see there we go so now we could just import this a add contact within our form and we see that is now imported into the contact form directory so with that we can go ahead and continue to build out the contact form itself so I'm just going to give this form a little bit of styling this is totally optional feel free to use it or style your uh form to your liking but I'm going to give it a little background color of 100 um I want to set the items centered um we'll give it a little bit of padding and I want the edges to be rounded and we'll hit save I know you can't see anything just yet so first things first let's add a div so now we want to update the inputs and um this is just going to be a little bit of styling to the inputs um you don't have to follow this this is irrelevant to the actual server action itself so I'm going to set the first div with a class name of flex and give it a margin bottom number four and within this div I want to add one more div and we'll give it a class name of one excuse me of wi um-1 SL2 to give it to take up half of the space and we'll give it a um a padding right of two and within this div let's add a label and we'll set this um actually we it's pretty simple we shouldn't have to let's set the class name I want to set the text color to gray let's make this 700 and the first one is first name let's see what we get okay and we see that we have the gray padding or the gray background with some padding that's on our form and we see we have the label of first name underneath this div um we're going to add in you know what instead of having to retype in these inputs over and over um using the same code let's just create a uh reusable input component so in the components directory let's add a file named input with a capital i. JS and we'll give it the RFC react template and we're going to make this a reusable prop as well so I want to pass some information to it that I can um use to rec create or to make unique throughout the application the first thing is going to be a placeholder Place hold on a type because we're going to need to change the type everything is going to be a type of text except for the phone which will be a number so we'll need to change it and the last thing we'll certainly need to change is the name excuse me this is going to represent the names of our uh input fields that we that will be distinguished by the server when we're looking to add in new contacts in the contact form so within this div we want to um add some styling that way we don't have to continue to um to retype the same thing so first up is sorry about that first up will be uh input we can remove this and we'll just type in the element input and we'll add the closing tag we'll first want to give a placeholder and we'll set this equal to placeholder that way we can change it we'll set type equal to type and we'll set name equal to name and the last thing we want to add is a class name for styling because we don't want to continue to have to retype this um this styling over and over I mean we guess I guess we could have copied and pasted but the more formal way to do it is to create a reusable component so um The Styling that we want to have for um our input is pretty lengthy so just bear with me um we want to set it rounded to large we want to set the border to transparent uh we'll go flex one which sets the size uh we'll go appearance none we'll go border we'll set the border to gray uh just a little darker than that we'll go 300 um the width is going to be full not F full padding on the Y of two padding on the X of four uh we'll set the background to White we'll set the text color to gray of 700 um we'll add the placeholder color to um I think yeah that's just gray all you got to do is placeholder Dash gray- 400 um let's give it a little bit of shadow of small um we'll also add um the text as base um let's go with Focus we'll set the focus to outline of none let's go with Focus uh f o c u s uh ring of two and we'll go with Focus ring of uh let's go with orange and I think we set it to 400 that way we have a little bit of consistency and last but not least we'll have the focus border set to transparent now if we save this I don't think I have any typos here full with book boom now if we save this file that concludes what we need for the input so we can close it out and let's go back to our uh create form and within the create form let's go ahead and um utilize that input that we just created and if we type in the capital I input uh we don't want to use this one we want to use make sure yep saved it let's go back back to the form UT make sure you get the one that is the dot slash meaning that it's coming from the same components or the same directory that this is in that's going to give you the input um prop that we just created let's add the closing tag and if we save it we see that we um we have an input here but it's blank because we haven't added in any of the uh information so we'll start by going with a type of text we'll go with a uh placeholder of first name and I want to go with no space we'll add a um we'll add a name uh first name and that's it so that gives us the first name and what we can do is we can go ahead and just copy from the div class we can copy this first div and let's just um go underneath the closing tag of this div and let's add in another let's paste in the the copi div that we just added and if we hit save we see that we have the first name two first names right next to each other so let's update this let's change this first to last uhoh n a and we'll change this placeholder to last and we'll change this name from first to last just be sure that this casing the main thing is the exact same casing that you use for the um the properties within the um schema model so if you have the camo you have the lowercase first letter uppercase um distinguishing of the the next name uh make sure you have the same format other otherwise it won't work but once you've updated the last name the type is text the placeholder is last name and the name is last name you're set so now um what I want is I want a separate row to have the email and the contact number so what we'll do is we'll just go ahead and copy this initial div uh say copy and underneath that second closing div tag uh we're going to paste in what we just copied and if we hit paste and hit save you'll see that we have it duplicated to the second row so what we'll do here is we'll change the first label to email keep the text or excuse me keep the type the text and we'll change the placeholder to email save so you can see it so you see it updated there and very very very important is that you change this name to email and hit save and then this last label I'm going to change the last name to um we'll go contact number and we'll keep well excuse me we'll change this type to number remember the phone we have it the type for our database the database is going to be looking for a number and then we'll hit save and then we'll change this placeholder to um uh contact number to match the label and then the name is very important if I recall we changed the model excuse me we have the phone number um portion named as phone and if you forget just go back to the model to be sure yes we have it listed as phone so we'll close this file out and we have the um the contact number listed as name excuse me we have the contact number name listed as phone the type listed as number and the placeholder this contact number so the last thing we'll need to add on this to ensure that we can actually utilize this form is a button and we'll set the type to submit and we'll just add in we'll say create contact hit save and I'm going to add a little bit of styling to our but to the button we'll go with class name and I'm going to go BTN BTN wide this is from Daisy UI and if we save it we see that we have a button right here that is the wide uh property and I'm going to change the background to Orange r a n g e and I'm going set it to 400 to keep it consistent excuse me and let's go with justify Center no we'll keep it we'll keep it as is and with that that sets our uh contact form now we can actually try this out by uh we can try this out by typing in our first Contact so I'm going to type in JJ and I'm going to type in um J that's the last name email will be Jace Gmail phone numbers will be all nin if we hit create contact I should have sat to redirect so let's just check the database to see if it connected we'll go to browse and let's just open this up log back in give it a moment we'll go to database browse collection and we see we have our first Contact that we just created so it did work um but what I do need to do and I don't know why I didn't think I would need it um let's go back to our actions and let's add in the U well I see I didn't add either one so that that's part of the issue but let's add in the revalidate path I'm going set that to slash and I'm going to go ahead and add in the uh the redirect as well and we'll set the redirect to go back to the homepage so now we'll close this file out temporarily let's go back to our project refresh the screen and let's go with um r r red and let's go with red let's go with @gmail.com let's set that as our number let's hit create and you see it took us back to our homepage so it should have worked I didn't see any errors and we can close our daui and if we go back to our database and let's just click on test so it reloads and go back to our documents you see that we now have the second contact listed within our database so we see that we have the ability to create new contacts so now that we can create new contacts it'll be awesome if we could actually see those contacts um in particular on our home screen so let's add in the function that's going to allow us to get all contacts from our database so uh within the lib directory let's add another file name um data to represent the data itself. JS and within this file um we're going to start by importing we'll start we'll set this set to use server and I don't think you have to on this one but we're going to try if we get an error we'll remove it we'll start by importing the database first and we need the contact model so we know what we're grabbing and let's go with export cons and we'll call this get contacts and well let me slow down for a second so this file is going to contain all of the get requests um that we're going to make to our database and for this project we're only going to need two the first one is going to be to get all contacts and the second one is going to be to get the contact by ID if we want to update delete or uh just view that contact individually but we'll start with getting all contacts first so we'll go export cons get contacts we'll set the um we'll set it equal and remember it needs to be a asynchronous function we're not going to pass anything into this particular function um but we are going to have a tri catch block and we'll start with our DB connection first and it we'll create a variable to hold all contacts so we'll call it cons contacts and we're going to set it equal to await contact and we'll go with find and we want to set a um to find all of the contacts within our database using this contact model that we imported and we do want to return something back to the browser we're going to return excuse me contacts and in the event that we get an error we'll go within our uh catch portion so we'll go throw new error and we'll go fail to fetch or get contacts thank you and just got some coffee thanks my dear and we'll add in the um the error that way if we get an error we will see it within the console we don't need to do any validation or send anything back to the browser um for this one so we'll just go ahead and click save and I'm going to keep the file open just in case um we made a mistake or I made a mistake excuse me and back on our main homepage um underneath the navbar um I want to have the ability to see all of our contact listed here so um we're going to display those in the table and you could display them any way you want I just find a table to be probably the most organized way to do so and if you wanted to add on to this project you could always um add a search bar you can set filters you can sort as well I think a table gives you a little more versatility on the ways you could be creative with the project so we'll add a table so underneath that nav bar let's add a div and this is going to hold the table so I want to give it um a class name and I'm going to set the table to Auto no I'm sorry I'm going to set this class name let me slow down to flex and I want the flex direction to be a column I'm going to give a little bit of padding on the X and some padding on the Y as well and I probably could have just combined these but I like to separate them out um just in case we don't like the finished product or if we want to toggle it a little bit so now we want to create the table that's going to hold I tell you what let's add a div to be safe let's create the table and let's give it a class name of table Auto and we want the wi to be set to full um let's set the text to uh Center and I want to have the white space as no wrap and close off that table and let's add the closing tags and the first portion will be the table head and we want to give it a table row and we want to give it a table heading now we probably should create um a reusable component for this but I'm going to try to minimize um some of the um some of the code here so this first header is going to be first name and I'm just going to add it so we can see something on the screen there you have it right there and I want to give this um header some styling so I'm going give it a class name I'm going give it some padding on the X Y um we'll go with title of font let's go with um the text to be Center tracking be wider this is um purely optional I'm not going to describe too much of it um but feel free to style it however you like gr 700 uh we're going to set the text to small the background color to 100 and we'll go round it and we'll go round it on the bottom as well and me save this and as you can see it updated our uh table header so underneath this header we're going to add one more we're going to add a few more excuse me table header and we'll set this uh we'll give it a class name as well well first let's name it we'll set it to last name to make sure the layout is appropriate and yep it looks good and I think I'm going to stay consistent and just keep everything um cased as it is and we'll reuse this class name for the others I just wanted that first one to look a little different um so for this one we'll give it padding on the X of four or the Y of three um we'll set the title to font we'll set the text to Center uh we'll go tracking be wider Tracking not tracking wider um font will be medium text will be gray of 700 and let's make this text small and we'll set the background to gray what we have up here 100 yep 100 let's save it and as you can see this is what it looks like so instead of retyping this um two more times um I'm just three more times excuse me I'm just going to copy this header and I'm paste it in three more times and I'm going to update this last name to email we'll update this last name to uh contact number and the last one will make action and this is going to hold button a button to delete or um edit or see more of the uh contact that we have listed so once we save this file that's going to care for the actual header itself next up we're going to need the body so underneath the closing T head tag let's add in a tbody tag and within it um we want to Loop over uh the contact information that's in our database and display the The Columns uh within our database or excuse me the um the contact UM object within our table so we want to display the first name last name email um so let's the first thing we'll need to do is gain access to the the function that we just created excuse me so if we go back up to the top and um underneath the home page let's um give ourselves access to it by creating a variable named context and setting it equal to a weight and we'll need to make this async since we have a weight there and go ahead and begin to type in get contacts and it should automatically Import in and it'll also help if I put um the async on the appropriate sign appropriate side of the parentheses not behind it but in front of it excuse me so if you save your file you shouldn't see any errors and this is going to give us access to the contact object now we'll just need to map and loop over that object and display the um data from it so we want to use JavaScript script in order to uh gain access and we're going to go contacts. map and we want to name each one of these contact and we'll create the arrow and for each contact UM or for each item within this object uh we want to create a row and that row is going to hold the key want to make sure that we set the contact we want to set the key as the contacts ID and then we want to pass in table data and the data we want to style a little bit we want to give it a border top of two um we'll give we'll make sure the text is centered since we centered the other text we'll set the border to Gray and we'll set this one to 200 since we set the others to 100 we'll give a little bit of padding on the X some padding on the Y let's close off that tag and within this um table detail let's pass in contact. um first name just to make sure that um it is working let's hit save excuse me and you can see the names of the first two contacts that we that we created JJ and RR so we know that is working so I'm going to just copy this file and I'mma paste it in um three more times one for last name one for email and one for contact and we'll change the first one to last name excuse me and hit save and as you can see we see Jason red from the database and if we change this from first name to um I think we had email next you see that we have the email now appearing and if we change this first name to phone you see that we now have the contact number appearing um within the table so the only other thing that we want to include next is links to um the action links and the action links are going to be to edit and to delete so I want to have some icons to represent that this is optional you can type in the word edit or update and delete and as long as you have the the same um wrapping for the IDS and the button to delete it's going to work just fine um but I do want to add just a little bit of styling or to give it a little bit of design feel free to to update this as you want so we're going to go import and we want to import the react icons so we'll go icons and we're using the uh fi and the first one that we want to use is fi um trash um for delete and we want to go um the other other one is F5 and it should be edit and we'll hit save and if we go back down to um the table underneath this last um table detail let's add another um table detail tag and we're going to give it a class name and we actually can just um copy this same code but we are going to add um we're going to add um uhoh just be p y just caught that that's why it's good not to copy and paste and it's better to create us reusable components but I just want to keep this simple there we go and within this um table detail we want to have two things the first thing we want to have is a link to the edit page that we haven't created just yet and we're going to name that page um contact slash um and we're going to pass to it the ID so we'll go uh we're going to dynamically pass the ID so we'll go um dollar sign brackets and we want to give this contact UM contact. that way it knows to go to um the ID of that particular contact that we click on and we're going to have the FI edit icon listed here to represent the way to get to that page so you can see the icon is appearing now and let's just make sure that it works um so let's create the contact page so within the app folder let's add another folder named contact and let's add another folder within it of Open Bracket ID close bracket um this is going to rep this is reacts or nextjs way of identifying that we're going to D dynamically pass a ID to it and it's going to be looking for it so within the ID directory that's in the contact directory let's add in a file named page.js and for right now just to make sure that it works we'll type in the RFC template and let's rename this page to um uh single contact let's hit save and we'll go back to the page.js and it should take us to the page it won't display the data because we need to create the get request for it next um but let's just make sure that it takes us to the page if we click on that file or that link excuse me you see that it takes us to the single contact page that we just created so great we see the routing is working perfectly oh I'm sorry let's look at this too and if we look in the URL you're going to see that it is passing the ID of the um contact that we just clicked on so this number that we're seeing here that ends in 6399 if we go back to our database and we open the file up we're going to see that it we clicked on this contact and it is passing in that ID dynamically of 6399 so great it is uh working as design so let's just go back to our homepage now we'll need to add the uh button to delete so underneath um underneath uh this link we'll need to uh we'll need to add a form and we're going to come back and pass a action to this form uh we're going to pass a uh delete contact action that we haven't created just yet but within this form um we do need to pass in the ID of the uh contact that we want to delete so I'll go ahead and add it now so in this input we want to type in Hidden because we don't want the user to see um this um this input field let's give it a name of ID and we'll give it a value of I think this should be default value default value we'll give it a default value of contact. ID and let's just save it to make sure nothing broke nope nothing broke and now within this form let's add in the uh the FI react trash icon and I'm going to give it some style and we'll go color of what tell what let's just make sure we can see the thing first um nope I need to remove that this it going to make me delete the whole thing yeah let's remove that sorry about that and let's just save it and as you can see we have the trash icon listed there so um let's do this uh we do need to put this in a button and let's copy that icon let's go button and let's give this button a type of submit let's hit save and before we um before we worry about adding in the additional pieces to this let's just style this a little bit so I'm going to change this to flex and I'm going go with item centered and we're going to give it a gap of two and that should take care of that and that's still a little off I tell you what let's go with gap of one and do I have any margin top here I know it's because this is a button that's the reason why it's a little off but go with class name let's go margin top of one uh let's go with two there we go that'll work and I want to set um I want to make this color red so I'm going to go with style and to let it know we're going to do a little bit of JavaScript let's set the color to string it yep red and there we have a red delete trash icon so uh we have the design we see that we are able to create contacts and we're able to display those contacts onto our homepage now we want the ability to see individual contacts if we click on it so let's work on styling our uh single contact page so um if you click on that single contact page um you should be redirected to the single contact excuse me if you click on the uh edit icon you should be redirected to the single contact page and if you check your url you should see the ID of the contact that you just um that you just created so um on this page we want to bring in um a couple things to give it some styling um so let's just go to the page.js that's whipped in the contact folder that's within the ID folder um within this page let's start by removing the um I tell you what let's start by doing a couple Imports the main import that I want to have um uh listed on this page um is we can bring in the uh head not the main but let's bring in heading text and let's just go ahead and bring in uh input and I also want to bring in navbar I know we could have put this in the layout and it would have been a little um probably reduced some of this code um but for right now this is fine just for this project let's make this a asynchronous function and we're going to pass in pams because we want to use the pams to uh query our DB and within this uh function we want to pass in the ID and we and we want to set it equal to params and we'll go um we'll need to create the function that um that has the ability to get a contact bias ID so let's save the file for right now and go back to our data.js file and within the data.js we currently have the uh get all contacts but now we need a way to get um individual contacts so uh we're going to add that within this file so let's create a um function called export cons and get contact and it's going to be a asynchronous function Mo this mouse out the way and we're going to pass the ID to it so it knows what contact to get and it's going to look for um the contact that we send to it which is the one that ends in I think it's 6399 yep excuse me let's start with the TR catch block and we'll need to begin within the tri catch block by uh connecting to the database and let's create a variable name contact let's set it equal to a wait contact and we're going to go find by ID and we're going to pass in the ID to it and we do want to return this contact do contacts just contact and right here if we get an error we want to throw new error failed to get contact and let's pass in the error because it is very descriptive and very easy to troubleshoot that way and we can close this file out because we're done getting uh we're done with the two get requests so we'll close this file out and back in the uh single contact page let's begin to build it out a little bit to make sure that we can see the data so first thing we'll need to do is gain access to that function that we just created so we'll create a variable named contact and we'll set it equal to a wait and we want to call the function that we just created and it is get contact and you'll notice that we have two be sure to get the one that is singular um we named it without the S to represent a single contact so we'll grab that contact and go ahead and call it and within it we want to pass in the ID that we just um destructured from the pams and that's all we need to do so we'll go ahead and start to style this page a little bit so I'm just going to create change the div to a section and within it I want to access the The Heading text and we'll give it a title we'll say um single contact weit save and we see it listed there we'll give a description and this description will be what do we want to make this one we'll make this um View and update view I think we're going to have the um we're going to have the uh the um edit within this same file no sense of creating another page so we'll go View and update contact below and let's pass in the nav bar that way we have some navig ation back to our home screen if we wish to have it and we see it listed here and underneath this let's just make sure that we can um I'm not going to create a table or anything because I think I want to have a form to keep it simple but I do want to make sure that we are getting the information so I'm just going to test it out by going with contact. first name and underneath it we'll go contact. last name just to make sure and if we hit save we see that we're getting um the name and let's just add a br to make it easier and yep you see that we're getting the name JJ and Jace which is the first and last name of this contact and to be sure we'll go to our database just to check and we see it it listed there so instead of placing this in a table or a card of some sort I think I want to go ahead and create the update field and have it listed on the same page so let's go ahead and create the function for our um update field and that is going to be a action um because we're going to be actually doing something within the database so we'll go with update contact first so let's create the function we'll call it export con um update contact and we'll go asynchronous function and we'll pass in the form data to it and we'll need to start by grabbing the information from our form so I'm just going to copy the same thing that we have listed here because we could update any of this information and underneath that um form data object we'll create a uh TR catch block or add one excuse me and we know that we'll need to connect to the database first and then we'll need to uh create a variable um and I'm going to call it update fields and what this is is if we make any changes on our front end it's going to capture this information in these variables and this is just basically destructuring it first name last name email phone all right yep that looks good and then underneath the update field variable let's go with object. keys and we're going to pass in the keys of update fields and let's go with a 4 each Loop we want to pass in the key and we want to um for that key we want to update the field and we want to go with by key and we'll come out of that um um I'm sorry out of that bracket next to update fields and next to it we want to say if it is blank or undefined and then outside of it we'll go and delete update fields and we'll pass back the uh the key and we'll save this and make sure I don't have any errors here and this all this is saying is that we want to update the fields um even and this is just a little Safeguard if it is the key is set to blank or undefined we'll just set to delete otherwise uh we want to update the fields with the data from the form that we just passed to it so after that closing of the um object Keys we want to add a weight and what we're going to do now is grab that contact model we want to find by ID and go down and select find by ID and update and we want to pass in the ID of our contact and we also want to pass in the update fields which just represents what's on our form so if we pass the value and we don't make any changes to a field it's going to pass that field back to the database but if we do make changes to the field it's going to capture those changes update the database and then that's what we'll see on our front end so we're going to go with the weight um and then we'll go contact model. find by ID and update and of course if we get an error we want to throw the new error and we'll go failed not failed failed to update contact we go with error and I do want to redirect back to the uh to the homepage or revalidate and redirect back to the homepage in the event um this worked successfully so now that we have this function created let's go back to our single contact page and let's begin to display let's begin to display the single contact and um have the ability to update it within this page so underneath that Navar um let's add a div and let's give it a class name of flex Flex column to set the direction and I like to give a little padding on the Y and padding on the X and within the div let's add the form and we're going to pass a action to our form and it's going to be the one that we just created it's going to be update contact and let's give um some styling to this form for uh consistency um I'm going go with class name I think we set the background to gray 100 uh we'll set Flex Flex column to make sure it should already be set the column but let's just make sure um we'll set the items no it won't be set I'm sorry so we do need to do this the items will be the Center we'll set the padding to two and we'll go around it as well and underneath um the initial form tag let's add a um another div as a matter of fact let's just go to our contact form and we can copy this we can copy the the two divs and the button for that matter and we'll go back to our um page single page and we can just paste in this form and we know as we go down this form um the update contact Remains the Same we didn't grab anything from the form so That Remains the Same we want the same layout uh so let's see we're getting a error so I might have grabbed yep figured I did that and let's just save it go if we refresh the page we see that we have the exact same form so I'll start here and just go with update contact and instead of having these placeholders um let's change the placeholder to reflect the actual value so instead of it saying first name I'mma go with contact. first name and as you can see it changes to JJ which is the first name of our first cont contact I'll do the same thing with last name we'll go with contact. last name and you see it upate updates to Jace let's do the same thing with our email and last but not least let's go with contact. number phone phone phone hit save okay so we see that the git is now flowing through to our form and it is displaying on the single page um as we wished now we just need to make sure that the update action itself is actually working um so um let's go ahead and instead of it saying um 999 let's go with 222 222 2222 and hit update contact and it reference ID is not defined so that means that we need to pass the ID of this um of this contact to the back end that way it knows which ID to update and to work with so in order to update this contact um we're going to need to pass in the ID and the way we're going to do so um is just by adding in a um a uh the ID of the form itself so I'm going go U within the div and I'm going go with input and I'mma go with um name of ID and we'll go with hidden and we'll go with the placeholder will be set to um contact. ID and let's just do give it a closing tag and hit save refresh the screen 222 222 2222 hit update and we're still getting an error there let me check the actions okay so we have the form which looks good we have the information there that looks good oh right here we got to tell it that we're passing it an ID so um in your initial um object be sure that you include the ID uh sorry about that clerical error um now um I'm going to go back to the form I'm update the contact number to all twos make sure you save it once you add the ID and as you see cast for object model uh um store me error better upate cast type string contact okay so what this is saying is that we're not passing the the ID appropriately to the um to the um um to the back end so um the way that we're passing it is through the link itself so let's go to our contact right here contact ID and yep and let's just make sure that we are passing this appropriately to it so I have it hidden there and name contact ID default value is listed there and let me see what error are we getting yep that looks good that looks good [Music] and okay I'mma hit save nope cast the object failed for Value type string failed for Value type string where are we let me put type text name y h still giving me the same object eror there let me see look at this action one more time to make sure let me see update Fields yep that's how we'll grab it on the form data save validate tell you what it's EAS just look in the terminal duh object failed for Value update Fe key H why is it giving us a little bit of push back let me see looks that looks good that looks good great content uh contact find by ID and update passing ID update Fields uh we got delete listed there for each key um yep that looks [Music] good H that should have did it let me see something let's try this let's go to home let's go here nope um failed for Value string H let me see so that looks good the form data nope let me see it was it was passing it good to it it's just the it's got to be with this update give me just a second we've got update contact yep it's bringing it in from action you know what let me change this to Value there we go sorry about that I had it set as placeholder this should have been set as value not a placeholder once you change this to Value versus placeholder the update works as you can see we have quad twos and let's just triple check it we'll go to um the next one and we'll just set it to I want to go with sixes let go eight and we'll set it to eights and as you can see the edit works so now the only thing that we have left is to we'll save this file we can close this terminal out um the only thing we have left is to implement the action of delete so if you go back to the um action. JS file um at the bottom we're going to add in our um our delete action so let's just go ahead and name this uh function export cons um and we'll go with delete contact we'll make it a sync and we'll go form data and we'll start uh well first we'll need to um grab the ID of the of the um contact that we want to delete so we'll go with const um we'll go uh ID and we'll set it to object. form data and no object. entries I'm sorry object. form entries and it will pass in form data excuse me and let's hit save and we'll do a try catch block and we'll always start with the let me pull this up the the connection to our database we'll go db. connect and we'll go with await and we want to await the contact and we want to find by ID and delete and we're going to pass in the ID to it and underneath we're going to go with old handy throw New Era and we want to say failed to um delete contact and let's go with the error itself so we can see it and we do want to um revalidate in this particular instance um so it's just basically going to um stay on the screen and just do a quick little refresh so if we save this file let's go back to the page.js within our main app directory that's on the home screen and if we go down to the um to the um to the section to the table um detail row where we have our edit icon um underneath that link you should have a form and on that form we want to give it an action um So within this form we want to give it the action of delete uh contact that we just created and make sure that you import it from your um lib directory and once you've added in that um that delete contact the last thing we want to do I see I put default value here we want to add in the um the value of the um I think you just do value I think default value is in a different scenario been doing quite a bit of work with the server actions um but anyway um so right here where the input is hidden because we don't want the user to see this make sure you have the name set the ID and the value set to contact. ID if you have a button underneath that input within the form um the button is going to be represented by the trash icon um so we don't have to do anything with it but let's just go ahead and save the file and if we click on delete we see that the contact is now deleted and and we'll delete the last one just to see and we see that we don't have anything in our table but if we were to um add in um a new contact and we'll go with um uh Sakira we'll go with Jace and we'll go with uh let's go stanks at Gmail and we'll go 7878 787878 78 and hit create contact we see that works if we click on edit and we'll go her new numbers is all nines now we hit update we see that it works so um that completes it there you have it that concludes our full stack crud um application contact book application using nextjs uh we use server actions um to build this uh CR application and mongodb the query and to store our data um a little bit of win and some um dais of UI as well but I hope you enjoyed um today's video if you did feel free to give me a like consider subscribe and any suggestions leave them in the comments um otherwise I'll see you in the next one

Channel: thejayadad

Views: 4,826

Keywords:

Id: kDvgY0LMhVg

Length: 93min 6sec (5586 seconds)

Published: Sat Jan 06 2024