Build a NextJS 13 App with Firebase & Tailwind CSS

what's going on you guys Clint here welcome back to the channel code Commerce in this video I'm going to be creating a next js13 application using Firebase for a back-end cloud storage Firebase database it'll also be styling everything with Tailwind CSS so this is a quick a quick view of what we're doing right here as you can see we have three items here and we also have three items in our database we can go ahead and add an item maybe we have an Uber to the movie we'll say 25 you see updates our database and if we refresh you'll see that the items still persists in our database we can remove items add items and I'm going to show you how to do this from start to finish next.js13 Firebase Tailwind let's get started so here we are in vs code I'm already in the directory that I want to be in what I'm going to do is just pop open my terminal here and let's go ahead and create our next JS application so I'm going to type npx create Dash next Dash app and I'm going to go ahead and install it inside of the current directory so I'm not using typescript for this project no linter we do want Tailwind don't need the source directory we go ahead and use the app router we're actually not going to be using routes in this project just going to be a single page application so go ahead and install next.js this should be quite quick as you can see it has already started so let's start up our development server with npm run Dev and this is pretty quick you guys so right now um I tell you what let's go ahead this is going to be loading on three thousand and a one okay because my demo was on three thousand go back to My Demo here so this should be what you see this is the blank starter package the boilerplate code when you create a nexjs application with create next app so what we're going to be doing here is we're going to be working inside of this app folder here so don't worry about the public the node modules we're just going to be inside of this app.js file specifically inside of this page.js file okay so what I want to do if you're new to Tailwind all this green styling that's all tail and CSS I think you're going to love it so let's just leave that main element in that first div and let's delete everything else inside of here Tailwind is extremely fast to write I love it super easy to pick up as well okay so I'm going to add an H1 and say expense tracker just like that and we can go ahead and give that I'm going to give it a class name I'm gonna say text 4XL and we'll say P4 for uh for some padding there okay and then what you're going to see here we actually have some media queries by default are already applied and let's just put this in the middle as well we'll say Tech Center so as you can see if we open this up you see the media queries there so what that is uh let's go ahead and say so for our padding I want to say anything above the small break point which is 640 pixels you'll see if we hover 600 or sorry yeah 640 pixels we're going to add a padding of 24 which is 6 Ram else we'll just say padding four which is one rim so that looks good there also you see this large Flex here whenever we hit that large break point we can go ahead and get rid of that um we'll just get rid of that completely and that should be good right there okay so that's what we have so far looks good you guys so let's go ahead and add in some of our jsx here pull that down so after the H1 we're going to have a a div here and then a form with our inputs so we'll have a div and then we'll have a form we don't need an action we can just submit it with our button we'll have an input type of text here okay and let's just go ahead and copy that down we can get rid of the um these ID and the button for the sake of this tutorial we don't need that we'll say placeholder we'll say enter item and for this one we can just say amount actually let's just do a dollar sign so it's a little bit smaller there we go and this one we'll say this one is a number okay then we also need a button and we need a submit there type submit and we'll just add a little plus symbol there so we can add things to our add add things to our list here okay so let's go ahead and I'm going to style this just a little bit here so for this div this outer div I'm going to give this a class name okay and I'm going to say BG slate 800. p-4 for a little bit of padding there we go and I want some rounded Corners so I'm going to say rounded large you can do SM for small medium and that kind of plays with the Border radius on on your div there okay so for this form let's give this a class name I want to display this as grid we're going to have six columns someone say grid grid columns six okay and then I'll say items Center and I want text black then I'll Define whatever I want right in there okay so as you can see grid grid column six um so each one of these is taking up one little column as you see here so inside here we'll give some more class names in here we'll say class name I want to say column span we'll say three we'll come back and edit some p-3 and a border as well so for the number I actually only want that to be two instead of three that looks pretty good and let's give we'll say MX three for a little bit of margin on the x-axis there we go and for this let's say class name and I'm going to say text white okay we'll see BG slate 950. now whatever we hover we can actually add a hover selector pretty easy we'll see BG slate 900 there we go and it'll say padding three and text Dash XL to increase the size a little bit so there you have it I think that looks pretty good right there you can see we do have that little hover effect whenever we hover over the button okay so that looks pretty good um next we need to we so let's have some State let's add some state that we can actually um map throughs right so I'm gonna say import react from react and then let's import the you state hook right okay so we'll say you state and also let's get the use effect as well so let's go ahead and save that and we're getting an error here so you're importing a component that needs use effect it only works in a client component but none of his parents are marked with used client so next JS is saying that this is a server client whenever you create a new component it's a server component by default unless otherwise specified so we can specify at the top we'll just say use client and now next.js knows to serve this as a client component so let's go ahead and add our state okay so our state is going to be let's say cons you can call it whatever you want I'm going to say we'll say items and set items equal to use State okay and it's going to be an array of of objects so okay so we'll say name we can have we'll say coffee this needs to be a string coffee and we'll say a price of we'll say 4.95 and let's just copy this down a couple times this one can be a maybe a movie ticket we'll say 24.95 and this one can be um we'll say candy 7 795 and I left that lowercase on purpose and I'll show you why here in just a minute so that looks pretty good we're also going to add these up so let's go ahead and add a total here we'll say const total and set total just like that equal to use State and by default we'll just set that to zero is we're going to calculate that here at the bottom in a minute so let's just scroll down a little bit and we're going to put this underneath our form right underneath our form we're going to have an unordered list this we're going to map through our items there it's okay so we'll go right underneath the form unordered list here and then we're going to have um our items right so we're mapping through our items so items and we'll say dot map and then for each item or for each item we can assign a value you can just say item and also an ID and then we actually want to render out component on the screen so we're going to use a parentheses there we're going to render out a list item and a div the div is going to contain two spans one's going to be an item we'll say item dot name let's copy that down and this one's going to be item.price so you can start seeing stuff on the screen perfect let's add a little dollar sign for our price there and then we're gonna have a button for each one as well and we'll just put an X in there that we know that this button is going to delete that item so for this list item we're not going to style the on our list but for the list item we need to give it a key otherwise you'll be getting an error so we'll say item dot ID just like that and or you could just say you could just say ID like that let's leave it like that so key equals ID give it a class name we'll say margin y of four so that's margin on the top and bottom give it some spacing we'll say width full I'm going to display flex and then justify between just like that perfect now for this dib we're going to give some padding here okay where's our spacing at there it goes so for this div let's give it a class name and we're going to say p-4 a little bit of padding width full went Flex justify between there we go that looks even better so um for a name like I said we left this lowercase and this is just for strictly a user experience type of thing so we'll say class name just in case there's some lowercase data in there we can just say capitalize is the the class name for Tailwind so text transform capitalize that way everything is consistent throughout our application so next let's style our our our button here um so for our button let's say margin y um let's see for our button here we'll say class name and each button we're going to say margin left of eight padding four border left two border slate 900 now add a hover selector hover we want to change the uh the background to slate 900 and then let's say width of 16. and let's see how that looks we'll give it a save um looking kind of funky there so margin left border border slate hover our background so we don't actually have a background on this so let's add this right here we'll say BG slate 950. there we go so now if we hover as you can see whenever we have around the X give that nice hover selector or hover effect right so next what we want to do is um just have our total down here at the bottom kind of add up all of our total there okay so let's just do that underneath our an ordered list here so we have our state here total by default set to zero and we'll just grab that default setting for now so what we're going to say open up some curly brackets so we can actually just render this dynamically because if there are no um items on our list if there are no items on our list then I actually don't want it to display anything at all so I'm gonna go ahead and put this back in here like that okay so and then we just show it if an item is rendered so or if an item is in our database so we can do that dynamically with our curly brackets but we'll say if items dot length Okay you can word this however you want I'm gonna say if it's less than one then we're not going to display anything okay or then we'll display something else so we can't we have to put something in there so I'll just put an empty string so if it's less than one where it's going to have an empty string in there else we're going to display something else which is going to be a div with a span in total I'll copy that down this will actually be the total and the total is um total just like that which is our state here from above which is actually set to zero if we change that to five it'll change to five so on and so forth but we'll make this Dynamic here in just a little bit so let's go ahead and we'll give this class name let's hit this as Flex justify justify between P3 just like that and go ahead and save so cool that looks good um all the styling is done all the jsx is done next what we want to do is let's go ahead and install Firebase and get to the fun part okay so um let's go ahead and we'll go to firebase.google.com and I'm going to go ahead and close down my other server there we'll close this one down so firebase.google.com click on get started okay this is completely free I already have my test in here to show you guys so I'm going to create a new project I'm just going to call this expense tracker just like that let's go ahead and hit continue uh it's asking I'll open this up a little bit uh fire analytics all this blah blah we don't need to do that for this project just to make it a little bit more messy and cumbersome we don't need that for the sake of this tutorial so as you can see provisioning our our um our backend service here looks good and I'm going to go ahead and close this server down if we're going to install Firebase here shortly you guys smash the like button if you feel like you're getting some value out of that I'd appreciate that thank you thank you very much and let me know if you want to see any type of content you want to see um so there we go it's ready let's go ahead and continue um so this is Firebase it's kind of the landing page you're going to get to um all sorts of things you can do with Firebase you can do um you can do databases there's cloud storage There's real time there is authentication which I have some videos on in this project let's go ahead and set up we're going to set up the cloud firestore right cloud storage a database so for iOS apps Android we're going to do web okay so I'm going to call this um we can call it our expense Tracker app like that you can set up some Firebase hostings another thing again not in this tutorial I do have some other tutorials based on that cool so let's go ahead and install Firebase this is very Firebase is very intuitive for for developers very easy to use where to go oh no all right so it just went somewhere first what it wants us to do is install Firebase so let's go ahead and close our server install Firebase cool so getting started first I have to go back and find that screen wherever it was where's my console that was a pain how it just like disappeared all right give me just a minute here uh where are we at expands tracker firestore database project overview it's in here all right uh Integrations where is it at users and permissions service accounts I don't know why it just like crashed and didn't show me everything all right so here it is in case you're trying to follow along here um we're going to come down project overview project settings coming down here so we just installed Firebase okay so let's go ahead and copy this over and what this is for I'll shrink this back down damn you for disappearing so okay so we installed Firebase right we just installed Firebase and we can see it um inside of our package.json there cool so what we're going to do is actually we're going to put this inside of our app here we'll say firebase.js now you could put it in your app.js however I don't recommend you'd likely want to hide this if you're pushing it to production right and by the way you guys these two keys are unique to my Firebase account I'm going to put this up on GitHub after this however if you clone it it's not going to work because I'm going to change these keys so make sure you sign up for yourself your own account it's free so um yeah makeup make sure you sign up yourself okay so once you just copy that over into another file firebase.js cool that's what we need to do um let's go back in here to firestore database we can go ahead and create let's see how do I get started let's scroll down like I said very intuitive very easy to use what we need to do is install Firebase well we already did that so next we just need to install the or import the the firestore sdks right so we're just going to select this one in here and I'm going to paste it right here it actually tells us add sdks for Firebase products you want to use it gives us a list of the available libraries I'm going to import that now since we're not in our app our page.js we need to export it so we can use it throughout our app so I'm going to say export const we can say DB equal to get fire store I think it's lowercase was pass in app just like that okay so that should be all we need to do okay so now we have Firebase installed and configured there so we can go ahead and come back over here whoops come back over here let's shrink that back down so what we want to do let's be able to or let's look at let's see initializing let's add some data to our uh our database right so let's go ahead and close this so I'm going to show you how we can do this programmatically you could create a database or you can just do it how we are going to do it which is we're doing right now so import collection and add doc these are two Firebase functions we're going to need to use so I'm going to go ahead and paste that in there like so perfect now let's come down here and um we need to have so we need to do a few things here okay right so we want to let's make some notes we want to add uh we'll say add item to database we're going to want to read items from database and we're going to want to delete items from database cool right so those are like the three kind of functionalities core functionalities uh that we want to do so let's go ahead and create our first one um our first function here so I'm going to say cons I'm gonna call it add item pretty intuitive here and let's make this we'll make this an asynchronous function right so we'll say a sync just like that here and passing in an event and we don't want the form to actually be submit so we're going to say e dot prevent default just like that cool now let's we need to add some values okay so for right now these don't have any values associated with them so let's go ahead and add some values here so where are they at here's our input right so let's go ahead and say value equal to um and we actually need to add some state for this here so let's add let's add our state first so we already have uh uh our array of items in there right of objects we already have our total and our other state we're going to need to manage is actually what's in the inputs here okay so we'll just add that right here we'll say const we'll say new item and we need to set a new item just like that equal to use State okay and what we have we have the name which by default will just be an empty string here and also we're going to have the price which by default we'll just leave blank okay so looking good there I'm going to start this back up so that is running looks good there perfect now next let's go back down and assign our values to to the to our inputs there okay so for this value we're going to say new item dot name and for this price we'll say value equals new item dot price just like that and we want to have an on change right so whenever whenever this changes we want to record that for whenever we we get ready to um to submit it okay so what we'll say here we'll just add this here on chain just like that okay and we'll send an event and we'll say set new item so our new item State here we're setting we're going to set this in here so that's going to be set to we'll use a spread operator we'll say new item then this one is going to be name equal to event dot Target dot value and we're going to do the same exact thing here but instead it's going to be for the price so we'll say on whoops on change go to we'll see that and we'll say set new item a new item I'm going to be price e dot Target dot value cool so let's go ahead and save that and for our button we want to be able to submit this and actually run our function that we created our add item so we'll just say we can say on click you could also do on submit but we'll say on click we're going to run this function the add item function okay so right now our function doesn't do anything it's just preventing the default so it's actually not going to load so if you click oh that was on the the demo here so let's go three thousand get our demo back so right now our function's not going to do anything it's just going to prevent the form from actually submitting okay um so nothing happens we can just click it so let's go ahead and add an item right so what we're going to do here first we're going to check if this is a would be a poor user experience if you try and add a blank a blank input and it adds blank a blank string or a blank amount into your database that would be poor experience so how do we prevent that we'll just write if statement very simple if new item dot we'll say check the name first is not equal to an empty string and the new item dot price not equal is not blank and then we'll go ahead and and we'll proceed okay and what we're going to say is let's just set items we'll use a spread items new item okay Let's see we also so there we have it we just added an item now this actually is not going to our database yet it's just we're adding it to our state right so again just to show you we could say uh we'll add our Uber back for we'll say 30 bucks it gets added into our state but we're not actually pushing to the database yet so let's go ahead and do that right now so um this is kind of how that works we can go ahead and comment that out and what we'll say is we want to await and just to show you it's going to be add doc but this is some Firebase here we go so we already imported add doc we brought that in and this is actually how we add the doc so we're going to run this await add doc collection so what we'll say is away and we'll say add Doc and then it's going to be um yeah add Doc is going to be collection and then our database say DB just like that there and then our database we don't actually have it named yet this is saying users you can actually name it whatever you want um it won't matter right now if you have not yet created your database however if you've already created a database it could matter so we'll just say items what that's going to do is just create a new table for us by the name of items right and then what we'll say here there we go then what we'll say next is we actually have to have our our data that we're putting in there which is the name and we'll say new item dot name and let's just go and say tram so it just takes away any of the any of the if we add some space before or after then we're going to have our price and we'll say new item dot price and let's go ahead and save so now we should actually be able to actually we have to create our database first so let's go and hit create database and just so you saw this isn't this is in Firebase if I open this up for you guys um there we go so firestore database is what we want you can click build firestore database we want to create the database and we're going to start and we'll just say test mode for now just go ahead and have it set up in the location that it recommends it's probably be your best it's provisioning firestore Cloud firestore I'll shrink this back down so now we should actually be able to there we have it so let's go ahead and try and add something in here okay see if we can add something what we're going to say let's say Uber and we'll say 15 bucks something just hit enter and let's see let's give it a refresh this should actually there you go actually hit it twice again let's open this up a little bit actually hit it twice and now it's actually it created uh two documents and so this is a collection a collection is like a like it says a collection of items then each item can have multiple documents so this items is actually an array and has multiple items in here and I just hit it twice and I'm going to go ahead and delete one um and you know something I just noticed I actually just entered two things into our database and the the our inputs are still are still populated and that's just kind of like a poor that's just a poor user experience so let's go back and we'll set that right here um after this ad doc we'll set new item back to um name will be an empty string and we'll do the same for for our price okay so let's go ahead and save this again we'll hit a refresh right now we just have this one document which is Uber okay and let's add a uh we'll add dessert how much is dessert we'll say 19 bucks go ahead and enter there you go that looks a lot better and we can see um there's our Uber and where's our other one go back to items dessert there you have it so that looks pretty good now we're just reading from our state though in our local state inside of our application we actually want to uh we actually want to read this directly from our database and not our state at all actually right so what I'm going to do I'm just going to delete this or sorry I'll just comment it out for now and there you have it our our amount disappeared as well so we have our add items to database next we want to actually read the items from our database and we're going to wrap this in and use effects so make sure you have use effect imported here at the top and what we'll say here we'll say use effect just like that it's going to be an arrow function and what we're going to say pass in a dependency array here so it only runs once and so we're going to say a couple things here um whoops and we're going to import a few things as well so if we check out the docs let's add data and if we scroll down read data there we go so collection and git docs we don't necessarily have to import this on separate lines so we already have collection there we have ADD doc we're going to need git doc we're also going to need this query snapshot um what else are we going to need let's see what else we gonna need let's see how that works um let's see how that works I'm sure we're missing some stuff and gonna have to add in some new things here okay so inside our use effect right we're going to have we'll say const just to make things a little bit easier we'll say const Q equal to uh query so we probably have to import query we want the collection in our database we'll say oh sorry our collection here to be our collection is going to be DB items and that's what we named our database here or that's our collection here items so hopefully that makes sense items and then what we'll say is we'll say const unsubscribe would you like that on snapshot this is something we're going to need to bring in I know for sure we'll say Q query snapshot we'll need that one and then inside here we want to actually so the way Firebase works whenever we're we're reading from the database and we push things in the database we're gonna actually store it in like a temporary array right so what I'm going to say is I'm going to say items array just like that and we're just initialize just just an empty array there and we'll say query the snapshot which is just like a picture of your of your database here then dot for each dark okay breech dock what we'll say is items dot array whoops items array dot push we're pushing this into our we're taking a picture essentially of our database of our collection and pushing it into our items array here right our little array that we initialize and what we'll say is open these up we'll say Doc dot data just like that okay and then we'll say ID it goes to Doc dot ID and then we want to set our items here to the items array okay and our items here up here at the top right and we're setting it with our items array there so let's see here query we need to bring in query we have query snapshot we need query let's see what else we might need it should tell us on Snapshot so let's bring this one in these are all Firebase functions here on Snapshot is there any more that might be it EMS array items array items array cool reference why is that lowercase I didn't make that lowercase cool um okay so that looks good items array and let's go ahead and let's see one error items array is not defined oh there we go you guys probably saw that too making fun of me in the comments it's all good okay so cool there oh look at that so I actually pulled straight from our database here so dessert Uber dessert I'm gonna open this up a little bit I hate that view there dessert Uber let's say we'll say um we'll say movie 35 bucks boom there is our dessert movie there you have it nice um we still want to calculate our total but right now it's not calculating the total that's fine we'll go ahead and add that in there I'm going to shrink this back down so we have our items array so next let's go ahead and we're going to put a add some space here we'll say read um read total from database okay or it's actually not even reading from the database it's from this items array so we'll just say read total from items array okay so it's not actually pulling this calculating based off the based off of the database so what it's doing it's pushing it pulls our database and pushes all the data into this items array here that we initialized and we're just calculating the items array okay so we're not actually doing any extra work on the database what we'll say is const we'll say um we're going to call this calculate total just like that and we don't need to pass anything in here and inside here we'll say const total price equal to items array dot reduce and then right side here we'll say sum and item here and we'll say sum plus parse float and the item dot price zero and then we want to set our total here which is our state up here at the top right now at zero so we just want to update that um and we'll set that to our total price here okay this this this uh function that we're running okay and we need to call this so we'll say calculate this calculate total there we go and we'll need to return unsubscribe this is for a Firebase let's go ahead and Save let's refresh and there you have it we'll close that down look at that you guys looking pretty good so look at that we can add an item and maybe bought a car for five thousand dollars we'll say five thousand dollars there you have it looks pretty good look at our total there nice it's in our uh database I hate this view I'm gonna go back to items I don't know where our car is it's somewhere in there you can see for uh items there they are calculating our total however we want to be able to actually delete we want to actually be able to delete an item so now we can't do that we can go in here and see this movie for example we can delete this movie document here and now that the movie's gone but we want to do this programmatically in our application of course right so what we'll say here we'll say um are we passing through we're gonna need to pass through an ID on our button here so where's our button that's for our ad and here's for our delete so let's go ahead and say um on click right on on click we're going to run a function and we can just say delete delete ding D Elite delete delete item uh there's actually going to be an arrow function here so so what we'll say here let's say delete dang dude delete item and we'll pass in the item.id that we're getting here so we're actually deleting the specific we're passing through the specific ID on Firebase for for this item because we don't otherwise that's that's how we're targeting this specific item and the collection okay so delete item so let's come up here and we'll we'll create our our function here for delete item so what we're going to say is we'll say const delete why do I keep putting an i there dude we'll say hey sync passing in the ID um passing in the ID here going to be an arrow function again and what we'll say is a weight delete dock which that delete dock is actually a Firebase function and um it's going to be dock let's see delete doc delete delete delete it's down here somewhere delete where's delete read data add data [Music] um manage data delete data it's going to be in here I know it will shrink that back down so we need to import delete doc we'll just say delete doc there it goes so await delete duck where are we at delete document right so we'll say Doc and then here we're going to say DB our database is items right that's what we called it items and then we just want to pass in the uh the ID okay so let's go ahead and Save three items in there we'll remove the car getting an error um what is our error Doc is not defined oh we probably just need to import doc like that and we'll hit a refresh and let's find so we have our car in here dessert car for five thousand let's delete it and there you go let's see if it deleted make sure it deleted there you have it so there you have it let's give it one more test maybe we got some snacks of the movie 18 bucks um bought another car for 10 10K 100K there you go we have all of our items in here and we can actually add items to our database read items from our database and delete items from our database next.js13 Firebase tail and CSS smash the like button you guys if you like got some value out of this I have much appreciate it thanks for watching and I'll see you on the next one

Channel: Code Commerce

Views: 4,209

Keywords:

Id: uikATllLdRc

Length: 37min 33sec (2253 seconds)

Published: Mon Jun 12 2023