Vue 3 & Supabase | Workout Tracker App

[Music] all right what's going on everyone my name is john komarnicki a front-end web developer and a content creator here on youtube first off i want to give a big thank you to brad for once again giving me the opportunity to create a project for you guys here on his channel now if you enjoy this video and my style of content i believe brad will have a link down below in the description feel free to follow me for more videos like you're going to be seeing here today so let's go ahead and get into the project now what we're going to be building is a full crud application called active tracker and active tracker is simply going to be able to keep track of all your activity now to build this application we're going to be using view 3 and the composition api on the front end now on the back end we're going to be using a service called supabase to hold all of our exercise or activity data and we're also going to be using super base to implement authentication so that we can restrict only authenticated users from creating workouts and also editing them now for the styling we're going to be using tailwind css so before we go ahead and get into building this project let's first go ahead and do a quick little demo now when you first come to this application you're going to see here that we're going to display all the workouts that we have in our database now as of right now we only have the one so if i click on this little card for exercise number one which is the name of the workout you can see it's going to take us to a much more detailed view of that workout okay so you can see we have the little icon here so we're gonna have two different types of workouts we're gonna have strength training and also cardio so for strength training we're gonna display this little icon with weights we're gonna have the strength tag right here and then we have the exercise name and or the workout name and then we have the exercises associated with that workout okay now as you can see we can't edit this uh work out here but if we were authenticated and logged in then we could so let's go ahead and log into our application here so if i click on login it's going to take us to our login screen and we're also going to be creating a register page here but for the sake of this demonstration i already have a account so i'm going to go ahead and just log in here so let's go ahead and log in with my email here and then our password and once we click login we should be redirected back to the home page here okay so once we do that you can see that we now have a few different navigation items up here in the navigation side so we have now create and then we have log out so if i click on this exercise number one now we should see that we have the ability to edit and now delete this workout so if i want to go ahead and edit this right here and say we no longer want to have this exercise of back rows included here we can go ahead and click the trash can and we can update the workout and you can see we're going to get a little message here saying success workout has been updated and that's going to go ahead and disappear after a few seconds so if i do refresh here you should see that we no longer have that other exercise that was associated with this workout here okay now if i want to go ahead and delete this i can also do that and then it's going to take us back to the home page here and you can see that when we don't have any workouts inside of our database we're going to go ahead and say it looks empty here we're going to show a message and we're going to allow the user to create a workout so let's go ahead and do that now if i go ahead and click on this button here we're going to go ahead and go to this crate route here and the first thing we can do is give this workout a name so i had a whole bunch of testing ones in here so let's just say back workout and actually let's do a run because you've seen what strength training looked like so let's go ahead and do one for a run so we'll say out door run here and then we'll change the cardio and you can see once i do that it comes down with this little drop down of all the information about the cardio workout that you just went ahead and did so if i click on this drop down here we can select run or walk we'll do a run and then for the distance we'll say we went one mile so let's go ahead and type in one here the duration we'll say took us 922 so the pace would be 922 or you can go ahead and change it however you want now say we did a cooldown and we did a walk so let's add a walk in here and we'll say 0.5 for five ma or half a mile and we'll say that took us 10 minutes here let's see okay and then the pace will be uh 20 minutes because usually what a pace means is how long it took you to do one mile so if we had half a mile here the pace would be 20. okay so if i click on record workout here you should see that we're going to get a success message saying that the workout has been created and then it removes all the information here so if we go back to our home screen you should now see we're going to have this card for an outdoor run and we have a different icon here of somebody running and then we have our cardio tag and then we have the title here so if i click on this it's going to be very similar to our string churning versus the different data here and the different icon and then the cardio tag and once again i can edit this i can add a different one i can remove it and so forth okay so that is what we're gonna be building here so let's go ahead and get started now to make things a little bit easier and save some time what i've done is i've created a starting files branch here on the repository for this project so to get to this what you want to do is the link is going to take you to this page right here you're going to want to go ahead and click on this drop down here which currently says master and we want to go into the starting files branch here now once you're here we can go over to this code button right here and we can click on download the zip so what we're going to do is we're going to go ahead and open this up in our finder here so it's going to be a zip so we need to go ahead and extract that and then we're going to open this up inside of vs code or whatever text editor you choose okay so let's go ahead and expand this here so let's do this now the first thing that we want to do is we want to install all the dependencies so let's go up to the top here we're going to go ahead and select on terminal we'll go do new terminal here and then we want to run the command npm install and that's going to go ahead and install all the dependencies that we're going to need for our active tracker project so with that complete the next thing that we can do is spin up our local development server to go ahead and preview all the changes that we're going to make here within our project and this video so to do this you want to run the command inside our terminal npm run surf here and this is going to go ahead and start our development server on our local host and it's going to go ahead and build here as you can see and then once it has finished building we should be outputted some urls to go ahead and open this up inside of our browser here so as you can see our app is running now on our local host port 8082 so if i go ahead and open this you're gonna see a blank white page because i went ahead and removed all of the components and starting files from the vue cli template when you go ahead and create a new view project now here in vs code let's do a brief overview of the starting files that we have for our project so let's begin with our dependencies so to do this we're going to open up our packet.json here and we'll start from the bottom and work our way to the top so we're not actually using too many dependencies we are going to be keeping it light so we have view three we're going to be using a plug-in called uid which is what we're going to use to generate a unique id and associate it to our exercises we're going to be using tailwinds here and then finally the last one i want to cover here is going to be super bass which is what we're going to be using for our back end and our database now next up i want to go ahead and talk about our tail and configuration here because i did add a few things to this file here so we'll start off at the top here now inside of this theme object we are extending the colors i did add a few here you can see we have a couple classes called a t light green a t green and light gray so we're also going to be using a font family from google and we're just going ahead and associating that here inside of our configuration i will show you later on where i'm actually importing the google font we did add some flex classes here so flex 1 and flex 2 and finally i did make some adjustments to the container so i did set the center to true and then for the breakpoints large xl and 2xl we set a max width of 1124 pixels now let's go ahead and talk about our src folder here so let's go ahead and close this now within here we have a few different folders so we have our assets folder here which simply is going to contain all the assets which is going to be our images for this project next up we have our components here which for this project we're only going to have one component which will be our navigation component here now i do want to go ahead and mention that for all the view files inside of the starting repository i did outline the view boilerplate here and inside of the script we have our setup option so what i've done is for each file that is a view file i went ahead and added some comments that is going to inform you of the things that we need to do inside of that that file so that way if you want to go ahead and pause the video and attempt to do some of the functionality yourself you can go ahead and have a general idea of the things that we need to do and then after you give it a shot you can unpause the video and i'll show you how i went ahead and solve that particular situation okay so next up we have our router here which i haven't done anything to it's just going ahead and creating the home route next up we have our store which has our index.js file which we are going to create a store here so this is currently empty next up we have a super base folder here which is going to have our import of supa base inside of this an init.js file which currently is empty so we're going to go ahead and do that and then finally here we have our views folder so inside of here we have a create file a home login register and a view exercise and if i go ahead and click on one of these you'll see that i did the same thing for each one of these files where i go ahead and outline what we need to do inside of that particular setup option for that view file okay and then lastly here inside of wrap.view this is where i'm importing our google font all right so next we're going to set up our supa base project now superbase is a open source firebase alternative that currently has a few products here so if you scroll down you can see they have a database which is actually built on top of postgres they have authentication storage and they're working on at the time of this video coming out with serverless functions now within this video we're going to be utilizing their database and also the authentication now to get started what you want to do is at the very top here inside the navigation they have a option to start your project so we're going to go and click on this here and it should redirect us to login or continue with our github account so you're gonna need to have a github account to continue following along with this tutorial so let's go ahead and continue with github here and it should then redirect us to our dashboard alright so here we are now what we want to do is once we're in our dashboard we're going to go ahead and select on this new project button right here and we need to choose an organization so as you can see i have two but i do believe when you create your suba superbase account they already go ahead and create one for you based on your github account so if you don't see anything here just go ahead and select on the new organization right here and just go ahead and create one but i'm not going to go ahead and do this so what we want to do is we're going to choose this this john kohler ridiculous doesn't really matter and then we need to give our project a name so all i'm going to do is simply just rename this workout tracker to workout tracker underscore yt and then i already have the password in here for my previous one so make sure you go ahead and set up a database password now i will warn you this is a very uh it requires to be very strong to go ahead and set this up so make sure you have a very strong password with i believe different uh characters symbols and all that kind of stuff because it won't let you continue unless this is green and it says the password is strong here so then for the region i believe it should choose the best one based on your location for you and then that's all you need to do so let's go ahead and click create your project here okay so we've successfully created our project now the next thing we need to do is connect to our project now to do this i have open in another tab the documentation from superbase showing us how to do this within view three so the first thing we're going to do here as you can see it says is we need to install the dependency for superbase.js now since we are using the starting files repository we already did this because i had it as a dependency within our package.json so when you went ahead and ran the npm install we went ahead and installed this so we don't need to do this now the next thing we need to do is insert our env variables here for our superbase url and then our non-key okay so i already actually created our env file within our project so what we want to do is go back over to our project dashboard here and first up we want to go ahead and copy this anon key here so then what we want to do is go to our project which is right here and we're going to look for our env file and you can see here we have the view app supabase url and the view app super base and non key so we just copy the non key so we're going to go ahead and paste this in here and we're going to save it and then what we want to do is come back over here and we need to grab the suba base url all right let's go ahead and paste this in here now i believe whenever you change these we need to do a restart on our local host or our server so what i want to do is open up the terminal here and we're going to go ahead and stop the server and then we want to rerun it all right so what we want to do next is while this is running we can go back to supabase here if we go back to the documentation we need to go ahead and create our superbase.js file but in our case i named this init.js and we want to go ahead and copy and paste all this stuff in here like this so let's go ahead and copy this and go back over to our project and you can see this is back up so let's go ahead and close our terminal here and we're going to go over to our soup base file or our folder and we're going to go to the init.js and we want to copy and paste this in now a few things we need to change are these uh urls and our non-key because they're using vite in their example we're not using that so we need to do is come over here and we need to change it so as you can see here we're using view app so let's go ahead and copy this and then we'll just change it out here for vite okay and that's all we need to do so whenever we want to reference or use supabase we're going to go ahead and import this init.js file into our component slash file now back in supabase let's go ahead and set up our database now to do this you want to go to our navigation here and we have an option for our database so we're going to go and click on this and then in the top right hand corner we have an option to go ahead and add a new one so when we click on this we have an option to what they call in supabase create a new table so what we want to do is give our table a name we're going to call this workouts and then what we want to do is to protect our database from unauthenticated users we want to enable row level security or rls okay so what we want to do now is we need to create some columns which is going to be our data within this database so the first column we're going to go ahead and add here's going to be let's see update it underscore at and then we want to pass in here what they call a timestamp ptz and then we want to go ahead and say the default value is going to be now okay so next up we want to add another column here and this is going to be for our workout name so we'll say work out and we use camel casing here workout name and the type this is going to be is what they call varchar now the next column we want to add is going to be our workout type here and we'll say if i spell this right i can't type today workout type here and once again this is going to be the type of varchar now the last one that we want to add here is going to be for our exercises so let's go ahead and add a column here and i'm going to go ahead and paste this in so we have exercises now this is not going to be the type of varchar it's actually going to be the type of json so we're going to go and select textual json data here okay and that's going to be all the columns that we need to add so then what we need to do here is save this and it's going to create our new table of workouts okay so let's begin to build our project now to start we're going to go ahead and work on our navigation components so let's go and open up our components folder here and then open up our navigation.view so just to show you what'll happen here if i go ahead inside of our header tag and i type in an h1 and i say hello and we save this and we go over to our browser we don't see that h1 of hello now the reason is because we haven't defined where we want to use this component now in our case since it's going to be a navigation component we want to have it inside of every single view or file within our project so what we want to do is go over to our app.view and we want to import this component and then use it inside of our template here so first off let's go ahead and actually import the component into this app.view file so we're going to say import navigation we're going to say from and we'll do dot slash here and go into our components folder and then we're going to be able to find navigation now next up we still can't use this we need to go ahead and define components here inside of our export default and then we'll do a comma here and then we'll say navigation so now that we've done this we can access it here inside of our templates so let's go ahead and say navigation and now if we go back over to our browser we should see that h1 right here so we are now successfully using or importing our navigation component here into our project so let's remove this h1 as we're not going to need it and let's begin to populate the correct markup for our navigation component here and let's start by adding a few classes to our header tag here now i would like to mention since we are starting with our styling here via tailwind if you find yourself a little bit lost or confused with how we're actually defining styling via tailwind feel free to pause the video and i believe both myself and brad have crash courses on tail and css that may be a little helpful and understanding exactly what we're doing although i do believe how tailwind does do their naming for their classes is pretty explicit you know some people may still find this little confusing so if that's the case feel free to pause it and maybe watch a video for myself or brad and then come back as that may be a little bit helpful at understanding how we're achieving the styling here all right so for the classes on our header tag here first off what we're going to be doing is adding a background color and we're going to be using one of our custom colors here inside of our tail one config which is going to be this at light green now let's go ahead and define that so to do a background color we're going to say bg and then we want to define the color which in our case is going to be a t light and we'll do green and then we want to go ahead and make all the text white here so we're going to apply the class of text white now inside of our header here we're going to have a nav tag and we're going to go ahead and pass a few classes on here as well which is first off going to be our container we want to add some padding on the top and bottom with py so we're going to say py-5 and then on the left and right we're going to say px and we're going to say 4. and we want to display this nav tag as flex we're going to say flex column and then we're going to say gap of 4 and then we want the items to be pushed to the center here and then what we want to do is we're going to add a breakpoint here for smaller screens such as mobile to go ahead and change this or sorry i should back it up so by default what we're doing is we're having this as a column and then once we get to a small break point which i believe is about five or six hundred pixels we wanna go ahead and convert this nav tag into a flex row because currently is a flex column so what we'll do here is we're gonna say to define a breakpoint we can say sm which is a small breakpoint and then we want to say flex row like that okay and that's all we need to do now inside of our nav tag here we're going to have a few things we're going to have the image on the left with the branding which is going to be active tracker and then on the right hand side we're going to have our actual navigation to get to different pages so let's go ahead and open this up and let's start off with our left hand side which is going to be our image and our our branding name i suppose so we'll say div and we're going to add a few classes here so we're going to say flex then we're going to do items and we're going to say center and then we're going to say gap x for to create some space in between the flex items within this div so we're going to have our image here and for the source we're going to say dot dot slash we're going to go to assets and we're going to say images here and the image that we want is going to be one called i believe dumbbell light which is going to be let me open this up a little bit this one right here so let's go ahead and rename this is to go ahead and copy the name here and then we'll shrink that back and then we can just paste that like that now we do want to add a class here which is going to be for the width so we're going to say w14 and then below this we're going to have our h1 and we want to define a class on here of text lg for the font size we're going to make a little bit larger and then we're going to have our name of our application which is going to be active tracker okay so now if we save this we should start to see this come take shape here now you can see we are using the default font here and that's because we haven't defined that we want to use uh our our custom font on our project so what i want to do is we actually forgot on our app.view we want to define a few classes on this div wrapper right here so let's go ahead and create our classes here and we want to pass the class of min h full we're going to go ahead and say font and then we created our custom font here of poppins right here so let's go ahead and copy this and we're going to say font dash and we're going to say poppins and then we want to do a border or a box border let's see here on our entire application which is a box border which is what we do on a reset okay so now if we head back over to our application we should see that if we maybe do a refresh actually it's already taken the pop-it's font okay so that looks a little bit better now back over to our navigation component let's go ahead and work on the actual navigation portion where we can go to different pages now to do this we're going to go ahead and go below our div and we're going to create a ul here and we're going to pass some classes here of flex we're going to do flex 1 and we want to justify this content to the end so we're going to say justify end here and we want to pass between each flex item gap x 10 for some separation between each one of our items inside of this ul now what we're going to have is some router links so we're going to go ahead and create these so we'll say router link and then what we want to do here is we're going to pass a class of cursor pointer and then what we want to do is you want to pass a 2 attribute on here now we haven't defined inside of a router any different routes so if we do give the any of these a name besides the the home view here or let's see here inside of our views we have home.view which if we go to our router right now we do have now if we define any of the other routes that we're going to create that we don't have inside of a router we will go ahead and get an error so what i'm going to do is let's just go ahead and give the first one a name here of home since we do have that created and then inside of the router link here let's pass home now what we want to do is we can just duplicate this down two more times so what we're going to do is we're going to have the next one be create but what we'll do is we'll just go ahead and pass a empty name string here and we're going to say create and then we're going to have one more called login now in between here or actually just below this we're going to create another uh item inside of this list with an actual li tag now this is going to be for the ability to log out now since we want to log out we don't need to actually go to a page so we don't need a router link here so we're still going to go and pass as a class of cursor and then what we want to do is we want to pass inside of here the text of log out like that and that should go ahead and do it for the markup for our navigation here so if we go back over to our browser we should be left with this now this application is going to rely a lot on whether or not a user is authenticated or they are not now in order to implement our authentication here we're going to be using supabase now to begin what we need to do before we can actually authenticate a user is we need to create a page where we can go ahead and sign up a user and also create a page where a returning user can log in so that's we're going to go ahead and start now if we navigate into our views folder here you'll see that we already have a login file here and also a register now what we first need to do before we can actually generate our markup here and create our login and register pages is we need to define this route inside of our router so let's go ahead and do that now inside of a router folder here we have a file called index.js now what we need to do here inside of this routes array is create two new routes one for our login and then one for our register so to begin here we first need to go ahead and import the components that we want to associate to a route so let's go ahead and do that up top here so we're going to say import and we'll do login and we'll save from and we're going to go into our components folder here and then we're going to find login and then we want to do the same thing for register so let's go ahead and just duplicate this down here and we'll say register all right and i don't know if we have to tack on dot view here but we'll go ahead and do it i think you can get away with not doing it but we'll just go ahead and add that all right now what we want to do is we'll just go ahead and duplicate this uh object right here for our home path or our home route and we'll go ahead and do that twice and then for the paths here we're going to say login and we're going to give it a name of login here and the component we're going to be using is login now for the register path we're going to say slash register and then we're going to say for the name we'll do register here and then for the component we will do register as well now what i want to do is i want to update our navigation component to go ahead and point to our router link of login to this route right here so let's go back to our components here inside of navigation and actually we never got rid of the uh home one in here so let's change this out to log in now if we go over to our views folder here and we go to login and just for testing purposes make sure everything is working let's add an h1 here and we'll save login and the same thing for register so now if we save this and we head over to our browser we should see the following h1 tags corresponding to our login route and then our register route here so let's go ahead and go over to our browser and we have an error here so it says it cannot resolve the components oh okay so you know what happened here so we're actually in the wrong folder our login file is actually in our views folder so let's go ahead and update that so where we have components here we want to update this to views and that should resolve our error now if we go ahead and click on the login router link here we should be taken to our login route and you can see here we have our h1 of login and if i go ahead and manually go over to our register route we should see that we're going to have the register h1 tag here now here in our register view let's remove this h1 as we're not going to need it and let's begin to generate the proper markup now what i want to do first is set up the data that we're going to store the user's input in that we're going to then send over to supabase to create their account now what we need to do first off is because we want to make our data reactive within this file we need to go ahead and import what they call a ref from let's see here from view all right and then we're going to use that when we create our data values here inside of our setup option now the first piece of data that we want to go and create is going to be our email and we're going to set this equal to a ref and we want the initial value to be null okay then the next one we're going to create here is going to be for a password so we'll say the same thing and we're going to set this equal to a ref with the initial value of null and then for our register file here we want to go ahead and make sure that the user types in the correct password so we want to confirm it so what we're going to do is we're going to create another password field here but this time we're going to call it confirm and then we'll camel cases confirm password and we'll set that equal to null and let's put some semicolons here and then the last piece of data that we're going to create for now is going to be for our error handling so we're going to call this air message and we'll set this equal to a ref with the initial value of null now for us to use these inside of our template which we'll be doing we need to return them down here so let's go ahead and return these so we'll say email we'll do password and then we have confirm password and then we have our error message also one thing we need to update which really isn't a big deal but i want to go ahead and update this is our name here inside of this export default it currently says login but it should say register all right and that should go ahead and do it for all the setting up here inside of our script tag so let's go ahead and begin to populate our markup here so let's go and open up this div here and let's add a few classes to this wrapper div so the first one we want to go ahead and add is it'll be called max w screen and we're going to say dash sm now what this is going to do is restrict this div from getting no wider than the break point of the small break point to find within tailwinds which i believe is around like 500 or 600 pixels and then we want to go ahead and center center this by saying mx auto we're going to apply some padding to the left and right with a px class and dash 4 and then we're going to do some padding on the top and bottom we're going to say py and we're going to say dash 10. now inside of this div we're going to have two different elements we're going to have our error output and we're also going to have our form for the registration so let's go ahead and add some comments here to go ahead and separate this so we're going to say air handling and let's go ahead and create a div for this now we only want to show this div if there is an error present on the form so what we're going to do is we're going to do a vf here and we're only going to show this if this error message is true which right now it is not and we're going to go ahead and set that up within our register function right here if we have an error we're going to go ahead and output it and then this div will appear now let's go ahead and add some classes here so we want to do is add a margin bottom of 10 a padding around all sides of four now we want to go ahead and round this we're going to say round it md and we're going to pass it a background color of what they call light gray which is one of the colors that we have here inside of our custom colors we defined in the talents configuration okay so now inside of here we want to go ahead and output our error message so we're going to do this inside of a paragraph tag and we're going to pass it some classes and i did that wrong so we'll say class and then we're going to say text and we're going to do red and then we're going to say 500 and then we want to just output this error message here so we'll say error message now whenever we have an error we'll go ahead and output this div right here and then inside of that we'll have our error message now below this we want to have our registration form so let's go ahead and add a comment here and we'll say registration so below this let's go ahead and create our form and we can remove this action we aren't going to need it and let's add a few classes to our form so we'll say class and we want to add some padding around all sides we're going to say p dash 8. we're going to display this as flex and then we want the direction to be a column so we'll pass it the class of flex cowl and then we're going to pass it our custom color for the background of light and we'll say gray and then we want to go ahead and round this off so we'll say rounded md and we're also going to add a box shadow here so we'll say shadow and we're going to say dash lg and then what we can do to keep this consistent is we can also add the shadow class to our air handling div here so let's go ahead and paste that in there to keep things consistent now within our form we're going to have our actual registration sign up so let's go ahead and add our h1 and we're going to pass it a few classes here so we're going to make the text size 3 xl we're going to go ahead and pass it the color of one of our custom colors which is a t let's see here light and we'll do green and then we're going to pass that some separation to go ahead and separate it from the actual input and we're going to say margin bottom and we'll do dash 4 and then inside of here we'll say register now next up what we want to do is we want to create a div to handle our input so we'll go ahead and duplicate this down a few more times once we create the structure for because they're all going to be the same so on this div let's go ahead and pass it a class of flex and then once again we want to have this as a column so we'll say flex cal and then we're going to do a margin bottom of two now inside of here we want to have a label and let's see here label and this is going to be for email and then we're going to pass a few classes here which is going to be margin bottom one we're going to do the text and we're going to say size will be sm for small and then the text color here we're going to say once again is our custom color of a t lights and green and then for the label value here we're going to say email now below our label we want to have our input so we're going to say input and the type is going to be text we want to go ahead and require this so that way when we go ahead and submit on our button we can go ahead and validate this easier without having to set up any custom validation i'll just go ahead and make sure that this field is required and then we're going to pass some classes here so we want to do padding around all sides of two and then we want to pass it a text color which is going to be text gray and we're going to do the value of 500 and then we want to go ahead and remove the outline on focus so to do that we can go ahead and target focus here and then say outline and set this to none all right and then we need to add a few more things here so we want to go ahead and add an id here which is going to be email which is going to go ahead and allow a user to click on this label and then get uh put into this input here and then lastly we need to go ahead and hook up our v model so that way when a user types into this input it updates this value of our email here inside of our setup option so we can go and copy this and we'll say v model here and we'll hook it up to our email now what we can do to save some time here is we're going to be using the same exact structure for all of our additional two inputs for our password and our confirm password so what we can do is just go ahead and duplicate this down two more times alright so let's go ahead and close this off here and then let's go ahead and do some separation here and then let's update the labels accordingly so what we want to do here is the label is going to be for our password and then i spelled email wrong didn't i let's go ahead and change that so there we go and then let's go ahead and change this label to password and then we can change the id and v model to password as well all right and then we also want to change the type here to password so that this is invisible when the user types in this input and then for our confirm password here we'll say confirm password and then for the label value here we'll say confirm password like that and then we need to update the input here so this will once again be password and then the id and the model would be confirm password here and let's do this right there we go all right so that's going to go ahead and do it for our inputs here so next up we want to go ahead and have a button to submit our actual registration form here so we'll do a button here and then we're going to pass the type of submit and then we have a fair amount of classes we need to go ahead and add here so let me spell this right i'm having a really horrible time spelling here today now for the classes we're going to add here we're going to start off with a margin top of 6. we're going to add some padding to the top and bottom of two so we'll say py2 and then we're going to have px for the left and right and we're going to set that to 6. we're going to make this button around it so we'll say round it sm and then we want to say self start to align this button to the start of the um to the container of our form here and then we're going to pass it text sm and go ahead and make this look a little cleaner i'm going to go ahead and skip the line here and we're going to continue adding our classes here so we'll say the text color here is going to be text white we're going to do a background color of our custom color of at light and we'll do green and then we're going to add a transition value here so let's say duration and set that to 200 and then we want to add a border here so we're going to say border solid and once again i'm going to skip a line here we're going to say border to and then we're going to say border is transparent initially because we're going to go ahead and add a border as a hover effect here and then what we want to do is we're going to go ahead and target the hover state here so on hover we want to change the button here to have a border color of white and then on hover we want to go ahead and change the background color to be white so we're going to say bg dash white and we're going to skip one more line here and we're going to target another hover state here and we're going to change the text color to text let's see here we'll do text 80 and we're going to say light and we'll do green here so hopefully if that was all correct our buttons should look how it did in the demo we'll go ahead and check it out and then for the value in here we're going to change it to register and let's go ahead and take a look and see how things are looking hopefully we did everything right and if i refresh it here we should be left with this now the last thing we need to do is we want to have the ability to go from our register to our login page and vice versa so what we're going to do is we're going to add a little router link down here saying if you already have an account we can log in so it'll take you to the login page so where we're going to do that is we're going to collapse our button here and we're going to go ahead and create a router link and we're going to pass some classes we'll say text sm we're going to do a margin top of 6 and we want to align this text to the center here now where we want this button to go is going to be to our login page so we'll pass the name and then we'll do log in like that and then what we're going to have inside of our router link here is we're going to say already have an account and then we're going to add a span here which is going to have the class we'll do a class of text at light green and then what we want to have inside of here is just have it say log in so now if they click on this right here it'll take him to the login page so let's go ahead and test this out so you can see here i already have an account login if i do this it's going to take us to our login page and let's check our button here to make sure we hover over it that it does the correct uh transition which you can see right there it changes to white and then has a green uh text color now one thing i realized that we did mess up on is on the styling of our button here when we hover over it the border color is supposed to be our custom color of a t light green so let's go ahead and fix that here so on our button we're going to go ahead and change the hover where it says border white to border 80 dash lights green here and if we save that and take a look that should look a lot better and there we go now that's gonna go ahead and wrap it up for our register page here so let's go ahead and work on our login now these two pages are gonna be identically the same except we're gonna go ahead and remove this input right here and we're going to go ahead and update the copy in a few places so what we're going to do is we're going to go ahead and just copy this entire file of register and then go ahead and paste it here inside of our login now what we want to do is go through this file now and go ahead and make the uh proper copy updates within this file so what we'll do here is where it says register we'll just say login so that's the first change we need to make and then what we want to do here is we no longer have a need for the confirmed password input so we're going to go ahead and remove that and then we're going to go ahead and change this button from register to login and then what we want to do here is on our router link where it says the destination of name as login we're going to change this to register and that needs to be a capital r here and then we're going to go ahead and change the copy here to register and we want to go ahead and update the copy here and we want to say don't have an account so we'll say don't have and account and then we're going to say register here so that should go ahead and do it for all the copy updates here inside of our markup so what we also want to do is we no longer have the need for our confirmed password data value here so let's go ahead and remove that and then since we're no longer using it here inside of our setup option we don't need to return it so let's go ahead and do that and that should go ahead and wrap it up for our login so let's go ahead and scroll back over to our browser here and if we click on login now let's do a quick refresh here we should be taken to the login page here and then if we click on the register portion here in the bottom we should be taken back to our register page so now that we have our register page created we want to implement the ability for a user to sign up and create a new account through our register page as of right now it doesn't have any functionality to do so now we're here within our project on superbase on the api section and under the getting started tab here we have this portion on user management now in here it shows us exactly how we need to go ahead and sign up a new user and create them an account for our project and you can see right here we have sign up and then it tells us how we can go ahead and do it right here so all we need to do is call supabase.off and then the method sign up and then we need to pass a email and then a password all right so let's go ahead and begin to implement this into our register page now since we're going to be using supabase to create our user we need to import supabase into our file here so let's say import and we're going to use our brackets here and we'll say supabase and we want to import this from our init file that we went ahead and created earlier on in this video so we're going to navigate to our superbase folder and then look for our init file now the other thing we do need to import here is the use router now within our register function what we're going to be doing is once they sign up we're going to go ahead and push them to the login page now in order to do that we need to import use router here from view router all right now with those imports completed we can begin to create our register function so let's go ahead and create that so we're going to say const register and we're going to set this equal to a sync function here so i have our brackets and then we'll have our arrow function here and then we'll put a semicolon there now the first thing that we want to do before anything is you want to do a check to ensure this password value right here is going to be equal to this confirm password value so we're going to do an if check here and we're going to say if password dot value is equal to confirm password dot value then we will continue on here now if it isn't what we want to do is it's going to put some uh comments there is if it's not true you want to go ahead and throw an error so what we're going to do here is we're going to say error message dot value is going to equal the message of error and we're going to say passwords do not match all right now we don't want this air to stay present forever so we're going to go ahead and use a set timeout method here to go ahead and remove the air after so much time now what we're going to do here is we're going to have our arrow function and then we want to execute this set timeout after five seconds so we're going to go ahead and pass the value 5000 here as the second value within our settimeout method now what we want to execute in here is we want to go ahead and simply set the error message dot value and put this to null okay so that's what we're going to do if the passwords don't match here now if they do match what we want to do is we want to go ahead and try and we're going to reach out to supabase and create our user a account so we'll do a try catch block here so we'll say try and then we'll say catch and then we'll pass in here the error and then we'll have that okay so first off what we want to do is if we go back over to supabase here we want to go ahead and call supabase and off and then we want to use the signup method here and then we want to pass the current email and password that we have within our register page here so we'll say cons and i'm going to go ahead and destructure the response here and only grab the error out of this and we're going to say await and we'll say supabase dot off and then we want to call the method of sign up here and then what we want to pass inside of here is going to be the email which is going to be the email dot value and then our password which is going to be password dot value all right and that's going to be the function we need to call to create our user a account now what we want to do is because there could possibly be some errors that superbase could throw at us so we want to go ahead and detect that error so we're going to say if the error that we get back inside of this call is true then we want to throw the error okay and i don't know why it does that so we're going to say throw air okay now what we also want to do is if this is successful so if there's no error this won't run we want to go ahead and push them to the login page so to do that what we need to do is we need to create a reference to our router so what i'm going to do is inside of or below this comment of create data vars i'm going to go ahead and create a reference to a router here so i'm going to call this const and we're going to say router and we're going to set this equal to use router here okay so then what we can do is right below this if right here we're going to say router and we're going to call the push method here and then we want to push them to the page of login all right now if we do have an error we want to go ahead and output that error so what we're going to say here is air and let's see is it e-r-r-o-r error message don't know why it wasn't popping up and then the value we're going to set equal to our error dot and why is it doing that counsel log dot here i don't know why it's doing that for us here we want to set this equal to the error dot message all right and that is going to be our function now what we need to do is you want to go ahead and return this value here within our return statement so that way we can use it within our template tags here and then on our form we want to go ahead and do a event listener for submit now we also want to prevent the default from happening when we submit a form which is to refresh the page so we don't want to do that and then the function you want to call is going to be our register function here so that's going to go ahead and do it now the next thing we need to do is actually test this out and make sure everything works so before we do that there is a few updates that we need to make to our register function that i did forget now what we need to do is as you can see right here if this is true we want to run this try catch block but what is going to happen is regardless if this is true or not this right here is going to run now to avoid that from happening if this statement right here is true at the end of our try catch block here we need to go ahead and return out of this function so that way this doesn't execute all right now also to keep things consistent here we should add the set timeout to our catch block here in the event that supabase does throw an air itself all right and that should go ahead and complete it for our register function here so let's go ahead and test this out so within our browser here we can see that we have an unexpected error so let me go ahead and see what's going on here so it looks like the air is right here so var super bass equals import.oh you know what when we did the import of our init file for supabase it appears we left on some of the defaults that we copied and pasted in so if we go to superbase and go to our init file instead of saying import.meta this should be process dot env and i believe that should go ahead and resolve our error here okay so let's go and register so i'm going to use my email here and we'll say johncomernicky.com and let's go ahead and test out our validation here so i'm going to go and type in the correct password that i want and then i'm going to go and type in a bad password here and let's see what happens when i click register so if i do that we get this little error right here it says error passwords do not match and we should see it disappear after five seconds which we did so that is working great now let's go ahead and type this in correctly here and let's see what happens so what should happen is if everything's working properly when i click register i should get pushed over to the login page and if we go over to our superbase project we should see that we have a new user created so let's go and cross our fingers here and click on register and that did oh okay it did work it took a few seconds here and as you can see now we're on the login page and if we go back to our superbase project here and i believe under authentication and users you can see we now have a user for our application now that we have the ability to create an account we also want to implement the ability to log into that account now back here within our supa based project on the api section under the user management tab here they tell us exactly how we need to go ahead and log in with our email and password into superbase and it's very similar if not identical to how we signed up we're going to go ahead and reference supabase.off and then we're going to call the sign in method instead of the sign up method and then we're going to go ahead and send along the email and the password for that user specific account so back here inside of our project let's go ahead and update a few things here that we missed when we did the copy and paste in from our register file and we'll change this to login and then we'll reference the comment here and we'll change this to login as well now very similar to how we did within our register file we need to go ahead and import supabase here from our init file so we'll go ahead and reference that from our superbase folder here and then say init and then we're also going to be using the use router here because we're going to go ahead and do a push to the home page on a successful login now for our login function here let's go ahead and create this so we're going to say const login is going to be equal to an async function and then we'll do our arrow function here oops what's going on here i went to a new line let's do that and open this up now the first thing we want to go ahead and do is we don't need to do any validation we're just going to go ahead and do a try catch block here so we're going to attempt to log into superbase and if we get an error we're going to go ahead and catch that error and then we'll output it into our air handling div right here okay so let's go ahead and try to log into superbase here so we're going to go ahead and set up a variable here and we want to go ahead and destructure the response from superbase and only get the error back and we're going to set this equal to await superbase.off and then we're going to call the sign in method here now within here we want to go ahead and pass along the email which is going to be email dot value and then our password here which is going to be password dot value and that's going to be our call to supabase now we want to go ahead and check if the error that we return or if there's an error present on this call right here so we're going to say if this right here is true then we want to go ahead and throw an air which will take us out of this try block and then throw us into the catch block here then we're going to go ahead and output that error now if there's no error present what we want to do is push the user to the home page so we need to go ahead and create a reference to the router here so we're going to say const router equals use router like that and then what we can do right below this if check here is say router dot push and we want to go ahead and push them to the name and then we're going to say home here now if we have an error what we want to go ahead and do is we want to output that error into our error message data value right here so what we'll do is we'll say error message dot value is going to be equal and we're going to do some interpolation here so we're going to be using backticks and we're going to say error and then we want to output the error dot [Music] message all right and to keep things consistent we don't want to show this error forever so what we can do is go over to our register function here and we can copy this set timeout and then after five seconds that error is going to go ahead and disappear and that should do it for our login functions so what we want to do in order to use this is let's go ahead and copy this and return it here now to call this login function what we want to do is go up to our form here and we want to listen for a submit and then we also want to prevent the default from happening which is going to refresh the page if we don't uh add this here and then we want to go ahead and call our login function all right so that should go ahead and do it so let's head back over to our browser and test logging in to our application so let's go ahead and enter our email here so we're going to say john johncomernicke.com and let's go ahead and test to make sure that our error handling is correct let's go ahead and type in a bad password here and see what happens what we get return from supabase because this is not going to be the correct account information so i click log in here you can see that the first error we have is i did not confirm my email so let's go ahead and actually do that so our error handling is working so let's go ahead and confirm it here and there we go i think that confirmed it so i'm going to go ahead and close that and let's try this again so if i click on log in you can see that now the error getting is invalid email or password so let's go ahead and try this correctly now that i put the correct password in here if i click log in you can see that that did work and we got redirected back to our home page so now we're able to register and also log in successfully to our application so now that we can create an account and log into our application we need a way for our app to go ahead and detect that we're currently logged in because right now we're logging in and we have no way for our application to know if we're logged in or not now the first thing we need to do is set up our store using the composition api because this is where we're going to store a reference to whether or not a user is logged in because we need to go ahead and reference this value of user in several files within our application now we're going to go ahead and create our store or state management using the composition api now i did do a little tutorial on how this works on my channel so if you want to get more information on how we actually set up a store in state management using the composition api in a little bit more depth head over to my channel and be sure to watch that video i'm going to go ahead and walk you through regardless here but i'm not really going to go ahead and explain all that much here so first thing we want to do is we want to go ahead and make our data reactive so we need to go ahead and import reactive here and we're going to say from view now let's go ahead and create our state here so we're going to create a new object and we're going to call this state and we want to go ahead and wrap this state in our reactive method here and then we want to go ahead and create a new value of state which we're going to go ahead and call user and we're going to set it equal to null now in order to access this state and other files within our application we need to go ahead and export this we're going to export default and we're going to go ahead and just export our state here all right so that's all we need to go ahead and do for now now let's head back over to our app.view here and we need to go ahead and set up a few things so i want to go ahead and create a new value of data here which is going to be called const app ready and we want to set this equal to a ref and we're going to set the initial value to null now i don't believe we have imported ref here so let's go ahead and do that so we're going to say import and then we'll do ref from view here so we can use that within our application or sorry within our file here now we also are going to be using super base within this uh file as well so we want to go and import that as well so let's say supa base from our init file here so let's go ahead and navigate to our i believe we can just do dot slash here and we'll say supabase and then our net so the next step we want to do is we need to check if a user is already logged in now i believe if we head over to the browser here and we got an error because we assigned app ready but we never actually used it so don't worry about that i believe we can go ahead and get the user if they're signed in by calling this right here of supabase.auth.getuser so that's what we're going to do so let's go ahead and create this new valley of data here so we're going to say const user is going to equal super base dot auth dot user here all right so let's go ahead and put a semicolon there so the reason why we want to go ahead and check this is because we need to do an if check right here and say if the user does not exist we want to make our application ready so we'll go ahead and do an if check here so we're going to say if user is null then we want to go ahead and say app ready dot value is equal to true here and what i want to do really quick is let's go ahead and output app ready here and then we're gonna go ahead and do a v if on our wrapper here for our main application so we're gonna say v if and only if the app is ready okay now you can see here the last portion we need to do is when we receive an off state change whether that is logging in or logging out we want to go ahead and update this value of state here of our user because we have a user logged in we want to go ahead and set this user piece of state to that specific user and if it's not we want to set it back to null so if we go back over to the documentation here i can show you that there is some documentation on the off state change which is a which is a method so every time that there is an off state change within our application this will go ahead and run okay so what we're going to do is we're going to go back over to our file here and we'll do a few line breaks here and we're going to say supabase dot off and we're going to say dot on off state change and we're going to go ahead and pass in here let's see we want to do a few parameters so we're going to do a underscore here and then we want to say the session all right and then we're going to have our callback here so what we want to do is we don't have this created yet but we need to go ahead and reference our store because we're going to go ahead and create what they call a mutation which is going to be updating our value of state now in order to use our store that we created right here we need to go ahead and import that into our file okay so we're going to say import we'll say store from and then we want to go ahead and look for our store so we'll say dot slash our store and then we're going to say index here okay so then what we can do here we haven't created this yet so this may be a little confusing so we're going to say store dot method so we're going to reference our store and we're going to have an object which is going to be called methods and we're going to go ahead and create a method called set user here and we want to go ahead and pass along the session here which is going to be returned in this off state change so let's go ahead and just copy and paste that in here all right now after this what we want to do is then we want to set the app ready dot value to true here and that's going to go ahead and do it for our app.view now what we want to do is let's go ahead and go back over to our index.js here and create that method so we're going to say const methods is going to equal an object here and we're going to call this set user and we're going to accept a payload here which is going to be what we're sending which is a session and we want to go ahead and update the state dot user so what we're going to do here is we're going to check if this payload is true because remember if we log out we're also going to send a session but it's going to be null and what we want to do is because if we say well if we go ahead and do it just like this if we send over the payload and on that sessions you know they're going to be a user portion of it if this is null this is not going to be available and therefore it's going to throw an error so we need to do here to avoid an error is you want to check if the payload is true now if it is true we're going to say payload dot user and otherwise if it's false we'll go ahead and set the user back to null alright so that's all we need to do now in order to use our methods i almost forgot we want to go ahead and export those down here with our state so we'll say methods like that and now we'll have access to use those inside of our off state change right here now one thing i did realize is we spelled supabase wrong here so i do want to show you exactly how this works because this may be a little confusing i'll go over in a little more detail here really quickly as well so what's happening when our app is first created we are setting this variable or this data value of app ready to null which is going to prevent our application from rendering out so what we're doing here is we're checking if we have a user logged in now if we don't have a user logged in we want to go ahead and make the app ready so we're going to set that value to true which is going to allow our app to render out okay now if it is not true then what's going to happen is this on off state is going to go ahead and fire because we have a user logged in and we're going to go ahead and set the user to the current user that supabase is seeing that is logged in within our store here all right and then we're going to set the app to be ready by saying app.ready or app ready.value is true okay now to show you this in a little bit more detail how this is working let's go ahead and do a console.log here and we're going to output hello now in order for this to work what we also want to do is go over to our components here and inside of our navigation we need to go ahead and set up a logout function here so let's go ahead and do that and let's go ahead and import we're going to be using super bass here so let's say super bass and then we'll say from and then we're going to go to our super bass folder here so let's say superbase.init and then what we also want to do is because we're going to be pushing the user back to the home page on a log out in case they're on any other pages that they're not supposed to be we're going to go ahead and import the use router here so we'll say use router from view router here so we're not going to go ahead and get the user from storage just yet but we do want to go ahead and set up a reference to the router so we'll say accounts router is going to equal use router all right and then for our logon function it's pretty simple let's go ahead and go below here and create this we're going to say const logout is going to equal a sync function and then what we're going to call here is you want to await supabase.off and we're going to call the sign out method here and that's all we have to do now after this what we want to do is you want to redirect them to the home page we're going to say router.push and we're going to say home here all right now to use this what we want to do is we want to return this here and then inside of our template here we have this li tag with logout we want to go ahead and say at click and we want to run our logout function here alright so if we head back over to our browser and we go to our application if i refresh this we should see that we have everything back so we're on the home page right now and let's open up our console here so we can see this alright so you can see right now we are getting this hello because we're currently logged in now if i log out we should see that this hello is going to fire again so i click log out you've seen that we have hello and it looks like there's no match for let's see did i do something wrong within the log out function here router.push oh we did this completely wrong this is supposed to be name and then we need to set this to a actually let's do this correctly here a name and then home like that and this should actually be capitalized alright so let's go ahead and fix that error now if i refresh this here you can see that's going to be wrong because it's taking us to the slash home we want to go back to this right here so we're currently no longer logged in so you're not going to see that we're going to get that hello because what's happening is that we're not running this off state change because it's not actually seeing a user okay so now if we log in again and we say my email here and we log in with the password you can see that it's going to fire that hello right here all right so hopefully that makes sense as we log in and log out of our application or we simply do a refreshes for if we're still logged in we're going to see that we're gonna get this hello message because the on off state change is firing here so now that we have access to this user value inside of our state we can do some conditional rendering with our navigation links here so if we're logged in what we want to show is home create and then log out now if the user is not logged in we only want to show them home and then log in so let's go ahead and begin to implement that here within our project so let's go to our navigation component here and what we want to do is you can see here we're going to go ahead and get the user from the store so to do this what we want to do is actually import our store into this component here so we're going to say let's go ahead and reach that so we're going to go to our store folder and then we're going to grab the index file and we're also going to be using a computed value here inside of this file as well to reference our user from the store so to do this we want to go ahead and import compute it here and we're going to say from and it goes directly to view reactivity i normally just do view i don't know if there's really a difference but we're going to go ahead and just save you here now what we want to do is you want to create a new value data value here called user and we want to set this equal to a computed value here and we want to return the store dot state dot user here all right and then let's go ahead and save this and we'll do a line break here to add some separation and then to use this user value inside of our template let's go ahead and return to here and then let's go ahead and do some conditional rendering here now for the home route we always want to show this so we don't have any need to use a v if on the home route here but for create we only want to show this if the user is true so we're going to say v if user now for log in we only want to show this if the user is false here and then for log out we only want to show this if the user is true so let's go ahead and test this out to make sure everything is working so if we go back over to our browser you can see that we're currently logged in and so we're seeing the navigation links of home create and then log out now if i click on log out here you can see that now we're only prompted with home and login and then if i go click login again and we do our email and our password we should see these are once again going to be updated to home create and then log out now the next thing that we're going to implement is the ability to create or record a workout and this is what we're going to be building right here so we have our input for workout name and then we can go ahead and select a workout type now for this application we have two different types we have a strength training then we also have a cardio so if i select strength training here you can see we're going to have the exercise the amount of sets the amount of reps and the weight that you did for that particular exercise now if we go ahead and do cardio is a little bit different we're gonna have the type of cardio which can be a run or a walk the distance the duration and the pace and then we can also go ahead and add as many exercises as we want for that particular uh workout type all right so let's go ahead and begin to implement this into our project here so to begin what we need to do is set up a route inside of a router for our create file here so let's go to our router folder and let's go to the index.js and let's go ahead and first off import our create file here so right below register i'll just copy and paste this and we'll say create like that and then right below our register path here i'll go ahead and copy this as well and we'll go ahead and create our crate path so we'll change out register and we'll say create here and then we can just highlight both of these and we can say create like that and now we should have our crate route so to go ahead and make sure this is working let's go ahead and add an h1 here and we'll just say create and now if we head back over to our browser here and we go in to the route of slash create here we should see we have the text of create but now if we click on home here inside of our navigation and click on create you can see we aren't navigated to our create route because we haven't yet associated our router link to our new route so let's go ahead and do that so back inside of our file here or our project let's go to the components and our navigation file and then let's go ahead inside of this name here for our create router link associate this to our crate route so we'll say create and now if we go back over to our browser here and we click on home and if i click on create we should now be taken to our crate file now because we're going to be referencing our data that we are creating inside of our setup option here within our markup let's go ahead and create that data here first so to begin we need to import our ref from view to make our data reactive now let's go ahead and create our data here so we'll say const workout name and we want to set this workout name to a ref of an empty string here now the next one we have here is going to be for our workout type which we can either have to be cardio or strength training now initially we want to set this equal to the value of select workout let's just go ahead and save that now the next one we want to go ahead and create here is going to be for exercises now this is actually going to be an array so to start we're going to go ahead and set this equal to an empty array and then let's go ahead and change the name here to exercises all right and then that should be all the data that we need to create for our workout information now we also need to create two more pieces of data to handle our error handling so we're going to create the first one here called status message and we'll set this equal to a ref of null and didn't do the parentheses we'll say null and then finally what we have here is we're going to have our error message okay and that should be it for all the data now to access this data inside of our markup and our template tags here let's go ahead and return this so we will say workout name workout type we have our exercises status message and then our error message so let's remove this h1 as we're not going to need it and let's begin to populate the correct markup here so the first thing we want to do is on our div wrapper here is add a few classes now the first one we want to add is max w screen and md now what this is going to do is restrict this div from getting no longer than the break point of medium that tailwinds defines and to center this you want to say mx auto here and then let's add some padding to the left and right so we'll say px4 and then we'll do some padding to the top and bottom we'll say py10 now inside of this div we're going to have two different children we're going to have our status message which is going to go ahead and display any kind of message if the creation was successful if we had any errors and then we're also going to have the ability to create our workout okay so let's go ahead and start off with our status message here so i'm going to do a comment and we'll say status message like that and let's go ahead and create a div for this now we don't always want to display this so what we can do here is use our data values of status message so we can only say show this if status message or if our error message is true let's go ahead and paste it in there like that now for the classes we want to add here we're going to say margin bottom 10 to give it some separation we're going to do padding of 4 around all sides we're going to do a background color of bg and we'll say light gray which is one of our custom colors and then we're going to do a little bit a round of corners on here so we'll say round it md now inside of here we're going to have a few paragraph tags one for the status message and then one for the error so for our paragraph tag for the status messages let's go ahead and just output this so we're going to say status message like that and then let's go ahead and add a few classes here so we're going to say text color is going to be a t light green here and that's all we need to do now to go make this look a little better let's just go ahead and do a few line breaks here and i think that looks a little bit more better formatted here now for the error message let's go ahead and output this as well so we'll just say air oops it's not inside of the that one we'll say error message here and then for the class we want to go and make this text red so we're going to say text red and then we'll say 500 here and that should go ahead and do it for our status message now below here let's go ahead and do a few line breaks and then add a comment for our create form so let's go ahead and open up a div here and then let's add a few classes so what we want to say here is we're going to give it a padding value of 8 around all sides we want to display this as flex you want to align the items to the start so we're going to say items dash start and then we want to give it a background color of bg and we're going to use our light gray color here and then we're going to say rounded md and we're also going to give this a shadow dash lg now to keep things consistent i think we did the same thing i forgot to add this in the initial project that i created so let's go and add the shadow large to our status message here as well now let's just close that back up now inside of our div here let's go ahead and create our form so we'll go ahead and say form here not from form all right so let's go ahead and define our form tags here and we don't need an action but what we want to do here is let's see let's lag in a little bit let's add a few classes to this as well so we're going to say flex and then we want to define this as flex column here and then we're going to have it be a gap of y dash 5 for some separation for all of the items inside of here and then we want this to take up the full space available so we're going to say w full like that now inside of here we're going to have our h1 to start off with so we'll do an h1 and then what we want to have this say is record workout and i spilled that wrong as well too workout and then we need to add a few classes to our h1 here as well so we're going to say text dash 2 xl to increase the size and then we want to add the text color of at dash light green here now what we want to do next is we're going to have two initial inputs here that are going to be displayed when we uh are brought to this page here we're going to have the workout name input and also the workout type input so let's go ahead and create those so i'll do a line breaker 2 here and we'll say a comment of workout name here and then let's go ahead and create this div alright so the classes we want to apply here are going to be flex and then flex cal now inside of here we're going to have our label and we're going to say this is for workout dash name and we're going to pass a few classes here which is going to be margin bottom of one we're going to have the text size of sm so texas sm and then we're going to pass it the text color of at light green like that and for the actual label content we'll say workouts and we'll do name and we'll save that here okay now below this we want to have our input so let's go ahead and create our tag here and this is going to be the input type of text we want to require this input to be filled out and let's pass it a few classes here so we're going to say padding around all sides of two we're going to say the text color is going to be gray dash 500 and on the focus state we want to go ahead and get rid of the outline here so we'll say outline and we'll set this equal to none here okay and now what we're going to do is we also need to pass it the id value for the label to work correctly so we'll say work out name like that and let's go ahead and save that to reformat that and lastly what we want to do here is hook up our v model to our data value that we have created inside our setup option here so we'll go ahead and hook up workout name here to our input all right and there we go that is going to be our workout name now the next input that we want to go and create is going to be for our workout type which is going to be a list to select from so do a few line breaks here and we'll say work out type here and let's go ahead and create this div so once again i'll have the class of flex and flex cal and what we can do because the labels are going to be the same so we can go ahead and copy this label right here inside of a workout name and paste this inside of our workout type here and let's go ahead and change this from workout name to type and also work out type here as well now below this we're not going to have an input tag we're going to have a select tag here and what we want to do is we don't need to define it a name so we're going to go ahead and remove this we don't need that but for the id we're going to go ahead and give it the value of workout type here and then for the class is what we want to do it's going to be the same as our input so let's go ahead and save some time here not rewrite everything we're going to go ahead and add the same classes here so we'll say pattern on all sides of 2 text grade 500 and focus outline of none and then what we also want to do is we need to hook up our sorry we want to go ahead and require this as well so we'll say required and that should reformat it and then lastly we want to go ahead and hook up our v model here of workout type copy this and we'll paste that in here so that should go ahead and do it for our initial two values that we're gonna display when we come to our uh crate page here so we're not quite yet done with our workout type input i forgot to go ahead and add the option values that you're able to select from within our select drop down list here so let's go ahead and add those so to add these we're going to add an option tag and for the first option value attribute let's go ahead and add select workout here and then what we want to add in between our option tags here is select and we'll say work out like that okay now we have two other options that we want to go ahead and pass so i'm going to create an option tag here and let's duplicate this now the first one is going to be for our string training so we're going to go ahead and pass the value here of strength and then inside of the option tab or between the option tag we're going to go ahead and pass strength training all right and now the last one that we want to add is going to be for our cardio so let's go ahead and add a cardio here for the value and then we'll go ahead and put cardio between our option tags here so now if we save this and go back over to our browser we're left with something like this so we have our header here we can go ahead and enter a workout name and we can select a workout type of strength training or cardio now what we need to do is when a user selects either string training or cardio we want to go ahead and output the correct inputs to go ahead and create either a string training exercise or a cardio exercise so just below our workout type input here let's go ahead and do a few line breaks and the first set of inputs that we're going to be creating are for the workout type of strength so let's add a comment here and we'll say strength and training inputs like that now what we want to do is create a div here so we only want to show these inputs if the workout type is equal to strength so what we'll do is we'll add a v if on here and only show this if the workout type is equal to and we'll say strength here okay now let's go ahead and add a few classes to this div here and what we're going to say is we want to set the display to flex you want the flex direction to be a column and for each row that we have within this div we want to go ahead and add some separation to it so we're going to say gap y and we'll say 4. okay now what we're going to do is we have this exercises array right here which is going to contain all of the exercises for a user's particular workout now we're going to go ahead and give them the ability to add as many exercises as they want to their workout now to dynamically go ahead and allow for this we need to run a v4 loop on this exercises data value right here and i'll put inputs for each amount or each exercise that they want to create for that particular workout so hopefully that makes sense let's go ahead and get into it here so let's go and create our div and we'll add some classes here so we want to display this as flex we want to set the direction of this flux to flex column on mobile here and then we're going to say gap let's see gap x is 6. now what this is going to do is very similar to how we have gap y4 here this is going to go ahead and space out the columns that we're going to be creating here for this div now we also want to go ahead and add some separation here to the the row so we're going to say gap y and 2 because on mobile these will be stacked so we wanna go ahead and add some separation between each one of these when we are on the mobile version and we're also gonna give this position relative here because we're gonna go ahead and set up a delete icon that we're going to be positioning absolute to this div right here so we want to go ahead and make sure this is set to relative now once we get to a medium break point here we want to go ahead and convert this from a flex column into a flex row so we'll say flex row like this now let's go ahead and create our v4 loop here so we're going to say v4 and we're going to go ahead and save for each item and i'm going to pass an index along with this that we have inside of our exercises right here okay now if we say this you'll see we get an error now if you're unfamiliar with how view works when you run a v4 loop you need to assign a unique key to that particular div which is what we're going to do right here with our index value so we'll bind a key here and we'll say index and that should go ahead and resolve our error now what we want to do is create some inputs here so for each exercise that we have we're going to have 4 inputs so we're going to have the exercise name we're going to have the amount of sets the reps and then the weight so let's go and open up this div here and do a few line breaks and let's start off with the first one so what we're going to say here is we're going to create a div which is going to have the class of flex then we're going to say flex dash cal for flex column set the direction there and then we want to go ahead and say on medium screens which i'll just save this to go to make it a little bit easier to read now on medium screens what we want to do here is we want to set the width to be let's see width dash 1 divided by 3 because you want the name to be a little bit larger than the sets and the reps and the weight because those are all going to be numbers and the name could be a little bit larger so you want to go ahead and allow for a little bit more room when it comes to actually assigning the exercise name here now inside of here what we're going to do is we're going to have our label and the first one is going to be for exercise dash name and for the classes we're going to assign here we're going to say margin bottom one we're going to say text dash sm and for the text color we're going to say a t dash and let's spell this right light green here and for the actual value inside of the label we'll say exercise all right and there we go now below this you want to go and create our input here so let's say input and we're going to say type of text and we also want to require this so we'll say required here and for the classes that we're going to add let's go ahead and do that so we're going to say padding are on all sides of 2 we're going to say with is going to be w full so take up the full model width and then we want to set the text color here we're going to say text gray which is gray and 500 and then on the focus state here we're going to set outline and we're going to set that to none and let's save that to reformat it now what we're going to do is inside of this exercise array we're going to have an object and for each object we're going to go ahead and have all the exercise information so what we're going to do here is set up a v model and we want to go ahead and associate this v model to the item and we're going to go ahead and have a value inside of that object called exercise here so we want to go ahead and bind that to this okay so hopefully that makes sense now to save some time here these are going to be the exact same markup structure for the additional three of them so let's go ahead and duplicate this down one more time so what i'm going to do here is because this one actually be a little bit different from the remaining three so what we're going to do is just modify this one here a little bit and then copy it down two more times now the next one we're going to go ahead and create here is going to be for our sets so let's go ahead and open this up here now the first thing we want to change here is we don't want this to take up one third on medium viewports what we want to do is set this to flex dash one here to take up equal amount of space for the rest of the remaining divs inside of this parent div right here so let's go ahead and change a few things here so instead of saying exercise name here we're going to have sets and then we'll change this to sets right here and then instead of having item that exercise we'll say item dot sets here and i just realized we didn't really spell this right so this needs to be green right here and we'll save that and then same thing here as well and i think everything else text 80 like green that looks good okay so this is going to be the format for the remaining uh remaining two more so what i'm going to do is just copy and paste this down one two more times and let's go ahead and modify the uh labels and then the v model here so the next one we're going to have is going to be for rep so we'll change this to reps and then we'll do the same thing here we'll say reps like this and then for the v model here we'll go ahead and change this to reps and then the last one here is going to be for weight so let's go ahead and say for weight here and then we'll change the value here we'll say weight and we'll just go ahead and put lbs for pounds okay and then the last item thing we need a porsche we need to change here is the item and we'll change this to item dot weight here okay now that's going to be it for our inputs now the next thing you want to go ahead and do is add an image here so where we're going to do this is inside of this div below the final input here so we'll go ahead and create our image tag here and then for the source where we want to go is into our assets folder so we're going to say at and i'm going to say slash assets we're going to go into our images folder here and we want to go ahead and grab the trash light green dot png okay and then for the class that we want to add here first off we want to go ahead and give it a height value so we're going to say h4 we're going to say with set that to auto we want to go ahead and position this absolute because if you recall what we did here is we set this position on this div to relative so we're going to set the position of this image absolute to this div right here so we'll say absolute and where we want to position this is negative left five so we wanna go to the left five or minus five and then we're gonna set this to have a pointer so we're gonna say cursor and we'll do dash pointer here okay and that should be it for our image for now now the last thing we want to have here is a button in order for us to go ahead and add an additional exercise now what we can do is because we've already created this button before let's go to one of our components or fo our views i should say such as log in here and let's grab this button here okay so let's go ahead and grab this and copy it and we'll go ahead and paste it inside of our crate file here so let's go ahead and do this now what we want to do is go right below the image here and we're going to copy and paste this in now instead of the same type of submit we're going to go ahead and change this to a type of button here and then what we want to add here instead of saying log in we'll say add exercise all right and that should go ahead and do it for this set of inputs here so if we save this and head back over to our browser now we should be able to go ahead and select on the work i'll type a string training and you can see that we're not getting anything so we may have made an error somewhere so let me go ahead and check what's happening here so the reason why we're not seeing any of our inputs is because of the array that we're doing a v4 loop through which is our exercise array right here and currently it is empty so what we can do for testing purposes here to make sure everything is working properly is just go ahead and add a value to our right here so we'll just go ahead and add a number of one and if we save this and go back over to our browser now and we do a refresh and we change the workout type to string training we should now see our inputs and it looks like i made a mistake with the markup here so it appears that i added the button inside of the actual input div here so let's head back over here and let's see here so yeah the button should be on the outside of this div right here because we don't want to go ahead and output a button for each exercise we have we just want to go ahead and have one button to go ahead and add that exercise here so if we save this head back over here now there we go that looks a lot better and if i go ahead and change this back to select workout we're no longer going to see our inputs here but then if i go ahead and add it back you can see that it's going to add the correct inputs here for our strength training workout type so for our other workout type of cardio the markup that we're going to be creating for the inputs is very similar to the markup that we just created here for our strength training so what we can do is go ahead and copy this markup do a few line breaks and go ahead and paste it below now let's go ahead and start at the top here and make the following updates so for the comment here let's go ahead and change this to cardio and we only want to show this if the workout type is equal to cardio now we're still going to go ahead and do a v4 loop through our exercises right here but for the input type here we're not going to go ahead and have the first one be a text type it's going to be a drop down with a list of different options for the exercise which will be a run or a walk so what we can do here is go ahead and update this so we'll go ahead and remove the input here and let's go ahead and do a select and then for the name here what we're going to go ahead and do is remove that we don't need it now for the id we'll go ahead and change this to cardio type here and then for the label here let's go ahead and update this we'll say cardio dash type and then for the actual label value we'll change this to type here all right now inside of our select here let's go ahead and add a few more attributes here so let's go ahead and save this now the next attribute that we want to add is our class oops let's go ahead and go out of the id here so for the classes we're going to add here we're going to have a padding value of 2. we're going to say width of full and then we're going to say text gray and we're going to say 500 and then for the focus here we're going to say outline and change this to none all right and then for the v model here we'll say v model and we're going to change this to item dot cardio and we'll say camelcase this type here okay so now inside of our select option here what we want to go ahead and do is add our options so let's do an option tag here and for the first value here we're going to go and set this to an empty pound sign or a pound sign and then we're going to say select type now we're going to go ahead and have two other options here so the second one is going to be for a run so we'll go ahead and pass the value of run in here and then we'll go ahead and pass the text for run and then we'll go ahead and have one more which is going to be for our walk so we'll go ahead and say walk here and we'll change this to walk like that okay and that should go ahead and do it for the first input here now for the second one here we're going to go ahead and change this from sets and we're going to change this to distance here so we'll go ahead and change sets here and we'll say distance like that and then instead of saying item that sets here we'll say item dot distance like that all right and that should do it for the second input so let's go ahead and close that up here now for the third one this is going to be for the duration so i'll go ahead and say duration here and then we'll say duration as well here and then let's change this to item dot duration and then the last one is going to be for the pace here so we'll change this from weight to pace and then we'll change this label to output paste here and then for the item we'll say item dot paste like that all right and that should go ahead and do it for the inputs for our cardio type and everything else will be the same the image will be in the same position and the button will be the same so now if we collapse this and we head over to our browser here we should see that if i do a refresh here we should have different inputs for our different types of workouts so if we select a strength training here we have our strength training inputs and if we do cardio we have our cardio inputs here and if i go and select the drop down we have runs and we have a walk now the last thing we need to do is add a button to go ahead and actually record our workout so let's go ahead and add that so what we can do is go into our cardio input div right here and we can go ahead and copy the button that we just created for our cardio input as well as our stream training and all we need to do is go below our cardio input here and go ahead and paste this button in now the two things you want to go ahead and change here is the type of button we want to go and change this to submit so when we click this we can go ahead and fire a function on our form and we also want to change the text here from add exercise to record workout here so if we save this this would go ahead and do it for our creation here at least for the markup so we take a look at it now we have our workout name we have the workout type drop down here which when we select this to go to strength training we get the following inputs as well as cardio and if we remove this we don't get anything and then we have our button to go ahead and record our workout so let's begin to implement some functionality into our creation page starting with the ability to add an exercise to our exercises array here so let's go and create our function we'll call this add exercise and let's have a sequel to an arrow function now what we want to do first is we want to check the workout type now the reason we're doing this is because each one of our workout type of strength training or cardio is going to have two different object structures that we're going to pass on to this exercises array here so let's go ahead and check if the workout type is a strength training so we're going to say if workout type dot value is equal to strength now if this is true what we want to do is we want to target our exercises array here and the value and we want to go ahead and push a new object onto this array now what we want to pass here is we're going to have an id now to generate a unique id for each one of these exercises we're going to be using a package that we installed called uid here all right so to use this we need to import it so we're going to say import and then we'll do uid we'll say from and then uid here now to use this on our object we can say uid and then declare it with our parentheses here and that's going to go and create a unique id for us now the next thing we want to go ahead and pass on this object is going to be an exercise for the name so we'll go ahead and pass this as an empty string and then we have our sets which we'll pass as an empty string and then we have our reps we'll pass as an empty string and then finally our weight here as an empty string and that's going to go ahead and be it for the object if it is a strength training workout now what we want to do is because we're going to check for if it's strength or cardio if this is true here then we don't want to do anything else so we're going to go ahead and return out of this function so we'll just say return here now if this isn't true then we know that the exercise they selected is going to be cardio because we only have two options so what we'll do is then we'll target exercise again here and we'll say value and we'll do a push and this time we're going to go ahead and push a different object so we're going to have an id on here as well so we'll say uid and then instead of having a exercise we're going to say cardio type here and we'll set this equal to an empty string as well then we'll have our distance which would be an empty string and let's scroll down here and then we have our duration which will be an empty string and then finally we have our pace here which will be an empty string as well and that's going to go ahead and do it for our add exercise function here now we need to go ahead and add this in a few different places within our markup here so let's go ahead and export this here and we'll go ahead and do that right here inside of our return statement so that way we can use it inside of our markup and then what we want to do is you want to go up here and inside of our strength training inputs you want to go ahead and add this as a event listener inside of this button here so each time we click on it we want to go ahead and run it that function of at exercise here so we'll add it here and then we'll also add it inside of our cardio input on this button as well now if we take a look at our application here within the browser and we go and change our workout type to let's say string training here you can see by default we aren't seeing any inputs available to us now if we go and click our button here of add exercise which now has our newly created function to add an exercise to the array you can see we're going to go ahead and see those inputs here so that is all working great now what we want to do is we want to fix that initial state here when we go ahead and select a workout that we don't see any inputs so what we're going to do is create a function that's going to listen for a change here on this input and then add the correct exercise for the type that the user has selected so let's create our function and we're going to call this workout change and we're going to set this equal to an arrow function now what we want to do first is each time that our selection changes here which is going to be our workout type we want to go ahead and reinitialize our exercises array back to an empty array so we'll say exercises dot value and we'll just go ahead and set this to an empty array now the last thing that we need to do is then add the correct exercise to our exercises array based on the selection that the user chose from the drop down menu of string training or cardio and to do that very easily we can go ahead and just call our newly created function here of add exercise so let's go ahead and paste this in here and that is going to be the function that we need to call so to use this function now we want to go ahead and return it here inside of our return statement and then what we want to do is head back up to our markup here and then we need to add it as an event listener to go ahead and call that function each time that our selection changes so here on our select input you want to listen for the event of change and then we want to run our workout change function so now back here in our application if we go ahead and change our workout type now to let's say strength training we're going to have those inputs automatically generated for us when we make that change and if we go ahead and change it to let's say cardio it'll remove those it's going to reinitialize the array and then add the correct ones here for our workout type of cardio now the next thing that we're going to implement is the ability to delete an exercise so let's go ahead and create a function to handle this now this function is going to be called delete exercise and we're going to set this equal to an arrow function now the first thing that we want to do prior to deleting this exercise from our workout is you want to go ahead and check that the user has at least a minimum of two exercises in their workout before deleting because you want to at least ensure that when they submit or record their workout they go ahead and have at least one exercise inside of their workout so let's go ahead and do an if check here and we're going to look at the exercises dot value and we're going to look at the length here and we want to go ahead and make sure that the length is greater than one meaning they have two exercises inside of their workout now this is true we're going to go ahead and remove that particular exercise from their workout now to do this we're going to go ahead and need to get the exercise id and we're going to go ahead and pass this as a param here within this function and to go ahead and remove that particular exercise we're going to be using the filter method here so we'll say exercises dot value and i'm going to go and copy this and we're going to say equals exercise is that value and we want to go ahead and run the filter method here and then we're going to go ahead and define a param here we'll say exercise and then we'll have our callback and what we want to go ahead and do here is you want to say the exercise dot id that is not equal to the id that we're passing here and this is going to go ahead and filter out the specific exercise that we want to remove from this array right here okay so hopefully that makes sense and then what we want to do is we want to return out of here now the reason why is because if this equates to false because it is not greater than one then we want to let the user know so we're going to go ahead and output an error to our air status handling here in our markup you can see right here so let's go ahead and output that so where we want to do this is right below our if check here we're going to say error message dot value and to save some time i'm going to go and copy and paste this error handling in here the message that is and we're going to go ahead and say that the air cannot remove need to have at least one exercise okay so that's pretty self-explanatory we're going to put a semicolon here now what we want to go ahead and do is we want to remove this error after a certain amount of time so we're going to go ahead and use a set timeout here and then we'll accept a call back here and then we want to execute this after five seconds so we'll pass a value of 5000 and then what we're going to do here is we're going to say error message dot value is equal to false all right so now what we want to do here is to use this inside of our markup we need to return it here and then we want to go ahead and actually use a click handler or click event listener on our image to go ahead and call this delete exercise and remember we want to also go ahead and send over the id so we're going to say at click here we're going to run delete exercise and then we want to go ahead and pass in here the item dot id and then we also have to do this on our strength training as well because it's the cardio and then we want to do it on this one as well so now if we choose our workout type here and we select cardio and i try to delete the only one exercise that i have here in our workout we should be outputted this error right here and if i go ahead and add another exercise here and i go to delete one of them we should be able to delete that exercise from our workout now the final thing that we need to implement into our creation file is the ability to create a workout so let's head over to suba base and reference the documentation to show us exactly how we can go ahead and create a workout inside of our database so here within our project on supabase i have pulled up the reference or documentation on how we can go ahead and insert a new row and here on the right we have the function that we want to go ahead and create to go ahead and do that so all we're going to need to do which is very similar to our login and register we want to go ahead and reference superbase here and we're going to go ahead and say from which our database is called the workouts we're going to go ahead and pass workouts here in this from method and then we want to go ahead and call the insert method which is going to be an array which will have an object which will have all the columns that we want to go ahead and add to that particular row so let's create our function and we're going to call this create workout and we'll set this equal to an arrow function now what we're going to do inside of this function is a try and a catch block here to go ahead and catch any potential areas that we may get and we'll pass air as the param here so let's go ahead and set up our ear handling in the event that we have an error while creating our workout here so we'll go ahead and output our air to our air handling div that we have in our markup so we're going to say error and we'll do message and we'll say value and we're going to set this equal to and we're going to do some interpolation here so we're going to say error and then we'll set this equal to the error message that we're going to get inside of this catch block so we'll do our money site and our brackets and we'll say air dot message here okay and then like we've done in many other spots within this project we don't want to show this error forever so we're going to use a set timeout here and then we'll have our callback and we want to execute this after five seconds so that our error does not stay here forever and after five seconds we can go ahead and set it back to null and that way it will be removed so we'll say error message dot value and set this back equal to false okay so now let's go ahead and actually set up the functionality to send our data over to supabase so let's go ahead inside of our try block here we're going to go ahead and create a new variable and we want to go ahead and extract out of here the error that we may potentially get from our superbase call here now to go ahead and use superbase within this file we have not imported it yet so let's go ahead and do that above or below our uid so we'll say import we'll say let's see here we'll do supabase and we'll save from and then we'll go ahead and look into our superbase folder here and grab our init file all right and now we can have x as a super base within our function here so we're setting we're creating this new variable and we're destructuring the error out of the response that we're possibly we're going to be getting and we're going to say we also want to do a sync function here so we're going to say async because we're going to be using async and a weight to go ahead and await the response from supabase so we'll say await here and we'll do supabase dot from and remember what we want to go ahead and reference here is our workouts database we're going to say workouts and then we want to go ahead and do the insert method here which is going to be an array and inside this array we're going to have our object which is what we're going to be sending are the columns that we want to go ahead and send to our database here so we have our workout name which is going to be equal to the workout oops let's see work out name dot value then we're going to have our workout type so we're going to say workout type here and this will be equal to the work out type dot value and then finally we have our exercises array so we're going to say exercises here and we'll say this is equal to exercises dot value okay and i think that's spelled right there we go okay so that's what we're going to be sending over to supabase so what we can do is put a semicolon here and save that now what we also want to do is if we get an error here so if we say if and this error right here is true then we want to go ahead and throw the air into our catch block here okay now if this is not true we don't have an error then we will at this point successfully went ahead and sent over our data to superb so we want to go ahead and alert the user and let them know so we'll go ahead and say status message dot value is going to be equal we'll say success we'll do work out create it and exclamation point here all right now what we also want to do is we need to go ahead and set these values right here of workout name workout type and exercises back to null or their initial state so let's go ahead and copy the workout name here so what we'll do right below this will say workout name dot value is equal to null okay and then we want to go ahead and get our workout type here and remember we set this eq or equal to it by default to select workouts so we'll go ahead and change this value back to select workout okay and then finally we have our exercise of that value here which is going to copy this and then we'll go ahead and paste it here and we'll set this back to an empty array okay now the last thing that we need to do in this function is do our timeout so what i'll do is just copy the set time out here and paste it right here and then we'll just say instead of error message we'll say status message and that's going to be our creation function here so now to use this what we need to do is go ahead and return it here in our return and then we need to go ahead and execute this function whenever we go ahead and submit our workout so where we want to go is back up top here to our form which is right here and we want to go ahead and say at submit here and we also want to prevent the default from happening so we're going to say dot prevent and all we want to do is call our create workout function so before we test out creating a workout we made one mistake when we imported suba base here into our creation file so supabase right here should have a curly bracket around both sides and that will go ahead and resolve any potential errors that we're going to get when we go ahead and create our workout or we run that function okay so let's go ahead and test this out now so let's do a refresh here and let's go ahead and record a workout so let's say this is exercise number one we'll do string training here and we'll just say back we'll do sets we'll say we did five 12 reps 135 pounds okay so that's going to go ahead and be our workout so let's go ahead and submit our workout here and as you can see we're going to get this error right here for new row violates rls security policy for our database of workouts so if you recall earlier on when we set up our database we did enable rls which is going to prevent or it's going to pretty much lock down our database so what we need to do over on supabase is create what they call policies that are going to allow us to create delete update and you know just read all the data from our database so let's go ahead and set those policies up so within our project on superbase we're underneath the authentication tab and we're going to be under the policy section here so what we want to do is come over to this option of create a new policy here which is going to prompt us with two different options so we can create a policy from a template or we can create a policy from scratch now to keep this very simple we're going to go ahead and do create a policy from a template so the first policy that we want to create is to enable read access to everyone regardless if they are authenticated or they are not so we're going to go and use this policy right here so we'll go ahead and select use this template we're going to go ahead and change the name here to make it very clear what we're doing so we want to say enable and we'll add read here so it reads enable read access to all users we'll go ahead and review this and we'll go ahead and save this policy and that's how you go ahead and create a policy here for your supa base project now we need to go ahead and create a few more so what we want to do now is we want to enable inserting data updating data and also deleting data for only authenticated users so let's go ahead and set that up so we're going to go and select once again new policy here we're going to do the policy from a template and we want to go ahead and enable insert access for authenticated users only which is a template that they have already created for us so we'll go ahead and use this template here we're going to go ahead and not change a thing here because it's already all set up and it's very clear what we're doing here we're going to review this and we're going to save this policy now let's go and do this two more times so we'll say new policy we'll do from a template and we're going to go ahead and use a template for insert access we're going to go ahead and say use this template and we'll change the policy here to update and we'll change the allowed operation to update now what we also want to do is change it from using a with a check expression here to using a expression so what we'll do is we'll copy this right here we'll remove it and we'll paste it up here and then we're going to go ahead and review this and we're going to save it and then the final one that we want to go ahead and create here is for deleting so we'll say new policy once more we'll do policy from a template we'll use the same template we have before we'll say use and then we'll change it from insert to delete here and then we'll go ahead and change it to delete and we'll paste in that same thing with off.roll parentheses here equals authenticated and then we'll review this and we'll save it and that is going to be all the policies that we need here for our application now that we have our policies all set up let's go ahead and attempt to go ahead and record or create another workout here so let's go ahead and change our workout name here let's go ahead and add a workout type of cardio well say we went on a run and we'll do a distance of one mile the duration took us nine minutes here so the pace would also be nine minutes here so if we go ahead and click on the record workout button now we should see that everything is reverted back to its initial state and we have the success message right here so if we go over to our database if we do a refresh here we should now see that we have all that data that we just went ahead and submitted so now that we have the ability to create a workout we want to go ahead and output all those workouts here within our home file so to get started here first what we're going to do is we're going to reach out to suba base and we're going to grab all the data that we're going to be outputting here within our markup so to begin let's go ahead and import our ref to make our data reactive here within this file and we're going to say from view and we also want to import supabase and we'll go ahead and grab this from our superbase folder and then we're going to say our init file now first thing here we need to do is create some data so we'll go ahead and call the first piece of data data and this is going to be the data that we get from suba base that we're going to be outputting here within our markup so initially we'll set this equal to a ref which has a value of an empty array now the next piece of data we're going to create here is called data loaded and we'll set this equal to a boolean value of false or null initially and what we're going to do with this is we only want to display our markup once we have our data so we'll use a vf on here within our div to only show the content if this value is true so let's go ahead and create a function and go ahead and grab our data from supabase here so what i'll do is i'll go show you the uh documentation here on how we can go ahead and grab all of our data from superbase so as you can see here we have this option to read all the rows so what we want to do is we're going to await supabase we're going to go ahead and use the from method here to go ahead and select the database which in our case will be workouts and then to select all the data what we want to do is use a select method and pass this asterisk in here to grab all of the rows all right so pretty simple so let's go ahead and create a function here to do this and we'll call this get data and we'll set this equal to a sync arrow function and we'll go ahead and do this now let's go ahead and use a try catch here now we're not going to do any fancy air output in here as we've done within our login register in crate all we're going to do is just cancel that warrant if we have any errors so if you want to go ahead and set up some more advanced error handling for this file feel free to just go ahead and maybe copy what we've done in previous files but i'm going to keep it pretty simple here and we'll just cancel that warn and we'll say the error dot message here now inside of our try block here let's go ahead and create a new data value here and what we're going to do is destructure the response from supabase so we'll say data colon and we want to grab the workouts and we're also going to grab the error if we have one and what we want to do here is equal to a weight and we'll say supabase and we're going to say from here and we want to go ahead and grab let's get that out of the way we'll say from our workouts database and we want to go ahead and run the select method here and then we'll pass in our quotes and then our asterisk here so that's all we need to do so put a semicolon here so what we also want to say here if we have an error from superbase we want to go ahead and throw that error all right and then we want to go ahead and set our data dot value equal to the workouts here so we'll say let's copy this here and we'll paste that and then finally if this is all true then we have our data so we can go ahead and set our data loaded to true here so we'll go ahead and say data load it dot value and we'll set this equal to true now to go ahead and make sure this is all working let's just go ahead and cancel that log here our data dot value now this won't work initially because we aren't running this function when we are creating this file so what we want to do is go ahead and run this function so we'll say get data here and then if we save this and head over to our application and we go over to this tab here and we go over to the home view and we go to inspect we should now hopefully see that we have our data so let's do a refresh here and we aren't seeing it but there it is so it took some time to come back and if we open this up we go inside of the target here we can see that we have that exercise that we just or i should say the workout that we just went ahead and created a few moments ago now with our data we're going to output a card for each workout that we have within our database here so that card is going to look like this here so depending on what type of workout it is we're going to go ahead and display a runner or a weight we're going to have the workout type here so cardio or strength training and also the workout title so let's work on implementing this into our application so first off what we want to do is we have no need for this console.log anymore so we're going to go ahead and remove this and we also need to access our data and data load it inside of our markup here so what we want to do is return those here within our setup options so we'll say data and also data loaded so let's populate our markups so what we want to do is we only want to output this markup if our data loaded value is set to true now for the classes we want to apply to this wrapper div we're going to say container we want to apply some margin on the top so we'll say mt and we'll do the value of 10 and we want to apply some padding on the left and right so we'll say px and we'll set that value to 4. now inside of here we're going to have two children we're going to have one element to go ahead and display if we don't have any workouts inside of our application and then the other element will be to display our workout cards so we'll work on the element here first for no data so we'll go ahead and create a diff here and we only want to display this if our data dot length is equal to zero and we'll pass some classes on here so we'll say with full so we'll say w full we'll display this as flex now for the flex direction we're going to say a column so we'll say flex cal and we want to align the items to the center so i'll say item center here now inside of this div we'll have an h1 and we'll pass up the class of text dash to excel and we'll have the value in here that says looks empty here dot dot dot and then what we're going to do is we're going to provide a button that's going to direct the user to the creation page here so we're going to create a router link here and i can't spell and we're going to go ahead and bind the two val or the two attribute here and we're going to go ahead and take them to the route of create here and then we'll pass the value of create workouts now to save some time we're going to go and style this router link as a button which we've already done in a few different places so what we can do is let's just go to our login page here and we'll go ahead and copy the classes here for our button so we'll go back to our home here and we'll paste the class in like this all right so this is what we're going to output if we don't have any data within our database here now if we do have data we want to go ahead and output our workout cards so let's go ahead and add a few line breaks here and we'll have the comment of data and then we'll create a div to go ahead and store our workout cards in so what we're going to do is we're going to pass a v else on here so what's going to happen here is if this div right here equates to false that means we have data so you want to go ahead and show our workout cards now to display our workout cards we're going to be using the grid so i'm going to pass the class here of grid and we're going to be using a mobile first approach here so initially we're going to have the grid set up to be one column so we're going to say grid calls dash one and once we get to a small break point here we're going to go ahead and increase that by one so we'll say grid and we'll do cowls and we'll set this to two and once we get to a medium break point we'll go up once again we'll say grid calls and we'll do three and you can see the pattern here once we get to large we'll do grid and we'll say calls and set this to four and we also want to apply some gap here and we'll say the value of six here so what we wanna do is we wanna output a card for each workout that we have inside of our database so we're gonna go ahead and use a v4 loop to do that now we also want to take into consideration that when we click on the or click anywhere on the card we want to be taken to the additional information on that particular workout now the easiest way to do this is to wrap our entire card in a router link so we'll go ahead and create a router link here and we'll add some classes so what we want to do here is we're going to say we want to display this as flex the flex direction is going to be a cowl so we'll say flex cow we want to align all the items to the center so we'll say item center we want to have a background color on here of our custom color of bg so we're going to say light gray and we'll say padding around all sides will be 8 we want to add a shadow which is going to be a medium shadow and then we'll have a cursor of pointer and dash pointer here okay now for the destination we want to go ahead and take the user to we don't have created just yet so what we can do in the meantime to go ahead and avoid any errors on here is we can go ahead and set up the name here but just take them to nowhere and once we set up our additional view exercise route and file we'll come back here and update this accordingly so that when they click on it it takes them to the correct location all right so let's go ahead and iterate through our data here using a v for loop to output a router link card for each one of our workouts so let's say v4 and we'll go ahead and save for each workout and we'll pass index value here and we'll say in data and then we want to go ahead and assign a unique key here which will be our index so inside of our card what we want to do first is we want to output a image based on the workout type the user has created so we're going to either have cardio or strength training so we'll go ahead and first look for the cardio image so or the cardio workout type for our image so we'll say cardio and we'll do image here and we'll go ahead and i'll put an image tag here now for the source i'm going to go and copy and paste this in so what we're going to do is look into our assets and inside of here we have this images folder and we're going to be using the running light green image here so i'll say paste in here and that's they're at the wrong location and oh because i copied in the quotes as well so let's go ahead and remove that so the location assets images running like green and we'll apply some classes here so we'll say class and we want the height to be 24 so we'll say h 24 and then we'll do width and we'll set that to auto now we only want to output this image if the workout type is equal to cardio so we'll do a v if and we'll say workout dot work out type is equal to cardio all right now if this isn't true and it's not equal to cardio that means the workout type is going to be string training so what we'll do is we'll go ahead and create another image tag here and we'll do a comment and we'll say strength training like this and we'll do a little line break here to separate these two and the location we want to go ahead and grab this from is going to be the same place but we're going to grab the dumbbell light green image here so i'm going to go and copy and paste this in now for the class we'll say h 24 with auto and we're going to do something very similar that we did with our data and node data we're going to use a v else here so if this isn't true then we'll show this so i'll say v else like that okay now the last two things you want to go ahead and display is going to be our little car or our little tag displaying the workout type and then also you want to go ahead and display the workout name so right below our image here we'll go ahead and create a paragraph tag and for the classes we're going to go ahead and apply here we'll do a margin top of six we'll do a padding on the top and bottom of one padding on the left and right of three we're going to say the text size will be small or extra small so we'll say excess the text color is going to be white so we'll say text white the background color is going to be our light green so let's say 80 we'll do light green here and then we want to go ahead and add our box shadow so we'll say uh shadow md and then a rounded of large to go ahead and round the corners here now inside of this paragraph tag we want to go ahead and output the workout type here so we'll do our curly brackets here and we'll say work out and we'll do the workout type here and lastly we want to go ahead and output our workout title so we'll do another our sorry it's going to be an h1 and we're going to do the class here of margin top eight we're going to do margin bottom of two we're going to align the text to the center and then we want to go ahead and say text is going to be the size of xl and we're going to say the text color is going to be a t light green here and then we're going to output our exercise name here so we'll do our curly brackets and we'll say work out and work out name like that alright so if we save this and we take a look at our browser here we go over to this tab if we do a refresh we should now see we have our card right here so if i were to go over to our database and we go to the table editor here and we remove this uh data that we have right now inside of our database we delete the row and we say okay and if we go refresh our application now we shouldn't have any data so we should see the node data div that we created here so let's do a refresh and as you can see we aren't seeing that let's do another refresh here and let's see if we have an error to see why we're not seeing that so we are getting an error here and the issue is i believe you can see that it says no match for the name of create for our router link so i believe we went ahead and didn't capitalize the c here inside of crate so if we do that and we save it and we do a refresher we should now hopefully see our no data loaded div here which we do but you can see that the button right now is aligned here on the left and i believe i may know why so when we copied over our class structure here for our button you can see that there's still this value of self starting here so what that's doing is aligning the button to the start of the div so if we remove that it should apply this item center here to apply everything to the center of the div if we go back over here you can see that there we go we are now outputted this uh content right here if we don't have any data inside of our database now the final page that we need to create is going to be to view the additional information on a particular workout so one thing i do notice here is that we probably should rename this from view exercise to view work out here i miss labeled that when i created this project so we'll go ahead and save view workout here and we also miss this here so we'll save you work out like that now the first thing that we want to do in order to actually visit this file within our application is we need to go ahead and create a route within our router so let's go ahead and do that so over here within our router what we want to do is we'll go below crate here and we'll go ahead and duplicate this object that contains the path and name and the component so for the path here which actually let's go ahead and first go ahead and import this component so we'll say import and we'll do view workout and let's go ahead and copy this right here so that way we can use it and we'll just go ahead and update this component here to view workout now for the path we're going to go ahead and say view dash workout here and we want to go ahead and make this page dynamic meaning we can go ahead and get any workout we want and display that information within our view workout file here now to do that we're going to go ahead and use a unique parameter on this path here so we're going to go ahead and define this param by saying colon and we'll do workout id here all right and then for the name of this we want to go ahead and call this view and we'll do dash work out like this all right so now with this created here inside of a router we should be able to navigate to this route right here or this path a view workout and then pass a workout id and we should be able to see all the content within this file here now what we want to do to begin is retrieve the workout that the user has requested to see more information about now how we're going to do this is we have defined on this route or path this param of workout id which that id will match the id of the workout on our database so we're going to use that parameter to make a call to supabase to return only that workout alright now to begin what we want to do is import a few things to make this happen so we want to import ref here we're going to say from view we also want to import supabase to go out and make our superbase call if i can spell and we'll say from and we'll do our suba base folder and then we have our init file here and lastly to use that parameter or gain access to that parameter here inside of this file we need to import the use route here from view router all right now let's go ahead and create a few data values here so we're going to keep this very similar to what we had inside of our home file so we're going to say cons data is going to equal a ref and initially we'll set this to null we're going to have our data value of data loaded and we'll set this to a ref as well and we'll have this set to null so we're going to do the same thing here we don't want to load this page until we have our data from supabase now we're also going to be doing some error handling here within this file so i'm going to go and create some data for our error message and we'll set this equal to a ref with the initial value of null as well and then we'll have one for our status message if you know we have an indication where we updated our workout or we have some sort of other confirmation okay so we'll say status message like that okay now the next thing we want to do is we need to create a reference to our route so we want to go and create a new data value here and we'll say counts route is going to be equal to user route and then we'll go ahead and declare that by saying our parentheses here so we want to go ahead and grab the current id of the route so to do this we're going to go ahead and say const current id and we'll set this equal to route dot params and the param we want to look for is what we define here inside of our router of workout id so we'll say route.params.workout so now that we have this we can go ahead and make a call to supabase to go ahead and grab this workout based on the current id inside of our path here now this call is going to be very similar to the call we made inside of our home route here so let's go ahead and just copy this function here to save some time so we're going to call it the same thing we'll say get data now a few things you want to go ahead and change here so we still want to say a weight super base from workouts we want to select all the rows but we only want to get a particular row so we're going to say the eq method here and we want to go ahead and grab the id or we want to go ahead and grab the row that matches the id and we're going to go ahead and say the current id that we uh declared here inside of this variable right here okay so a few things i want to go ahead and change here is we're actually going to do error handling if we retr or receive an error so what we'll do is we're going to say error message dot value is equal to error let's see air dot message here all right now we don't want to show this forever so we'll do a set timeout and we'll go ahead and do our callback here and then we'll say a value of 5 seconds or 5000 and we'll go ahead and say error message dot value is equal to we'll just do false like that now to go ahead and call this function when the route is created we need to go ahead and declare it here so we'll say get data like this now if we go over to our home file here you can see that we defined inside of our router here this 2 attribute that doesn't go anywhere yet so now that we created this router view exercise we can go ahead and hook this up here so let's go ahead and say the name where we want to go is going to be view actually workout we change it to so we'll say view work out here and we want to go ahead and pass some params here so we're going to say params which will be an object and we want to go ahead and say workout id is going to equal we want to say here we'll do work out and we'll say dot id here so now with this hooked up if we go back over to our browser here and you can see status messages okay so what we can do to get rid of that for now is let's just go ahead and return uh stat as much as there and that should go ahead and resolve that error so now if we're back here inside of our application if i click on this card right here we should be taken to the view workout path and we can see that we have an id value of six so i believe we're not actually logging out to the console the actual data here so what we can do is let's go ahead and say console.log we'll say data dot value here and if we go ahead and go back to our browser and we do a refresh here we should get all the information on this workout here if we go to our console and we're getting a value of null so what did we do wrong here okay so the reason why that's null is because this has not yet returned the data so we need to do is actually log this out of the console after we have set it here inside of our getdata function so if i go ahead and paste it here below data value download it and we go back over to our browser here and if we do a refresh we should see now that when we come to this route here we should be able to go inside of this proxy here and inside of this target we have an array which is going to be the data that we requested that matches the id within our database over on supabase so let's begin to populate our markup so what we first need to do is because we're going to be using some of our data values here that we created within our markup we need to return these here within our setup options so let's go ahead and return data or return data loaded as well as error message here and it appears that i went ahead and spelled status wrong here so let's go and spell that right and then i assume i spelled the wrong here when i declared it which i did all right so that fixes that issue here so let's head back up to our markup here and we'll add a few classes to our div wrapper here so we're going to go ahead and restrict the width of this div to the screen size of our small break point so we're going to say max width our max dash w dash screen and then dash sm and we're going to center this by saying mx auto and we're going to apply some padding to the left and right by saying px4 and then some padding on the top and bottom with py10 here so let's go ahead and create the markup for our error handling or our status message so i'll go and give us a comment of app message here and let's go ahead and create a div for this now we only want to show this if we have an error so we're going to say if status message or if error message is true and we'll apply some classes here to this we'll say margin bottom of 10 we're going to say some padding around all sides of four we want to go ahead and round the corners so we're going to say rounded md we'll pass a shadow here of shadow medium and we'll give it a background color of our custom color of light gray now inside of here we're going to have a couple paragraph tags and the first one is going to have a class of text 80 lights that's going to be dash light green here and we want to go ahead and output our status message so we're going to say status message like this okay and then the next paragraph tags here gonna be is gonna be for our error so we're gonna go and give this a class of text we'll do red and the value of 500 and then we're just going to go ahead and output our error message here now before we continue on with our markup i would like to explain a little bit more on how exactly our view workout page is set up here so we have two sections we have the top portion right here which resembles our card that we have within our home view and then below this in our second section we have all the exercise information associated with that workout now within our top section what we also have if we're logged in we have two icons here so we have a pencil icon and also a delete icon when we go ahead and click on the pencil icon it's going to change this page into the edit mode which is going to convert all of the editable or updatable fields within our workout to inputs here so you can see we have our title and then we have all the exercise information which is converted into the same layout or view that we have when we go ahead and create our workout all right now to go ahead and account for this within our markup we need to go ahead and create a few things within our setup option now to check and see whether or not a user is logged in we already have access to this within our store so all we need to do is import our store here into our file and this is going to be located within our store folder and then we have our index file and then we need to go ahead and import our computed here so what we'll do is we'll create a new data value call this user and we'll set it equal to a computed value here and then we'll go ahead and return the store dot state dot user here all right now what we also need to do is create a edit mode value so we'll go ahead and say const edit equals a new ref and we'll set this to null so we want to go ahead and create a function that's going to go ahead and toggle this from true to false to go ahead and enable and disable edit mode so all we'll do is we'll create a function called edit mode and set a sql to a arrow function and we're going to say edit dot value is going to equal the opposite of what edit dot value currently is so this will be like a toggle switch now what we want to do to actually utilize this function and our new data values is we need to return them here within our setup option so we'll return edit edit mode and then also we had the user now continuing on with our markup to save some space let's go ahead and close this div for our error in our status message and let's do a few line breaks and create a new div now we only want to show this div if our data loaded value is equal to true now what we want to create first here is going to be our general workout information if we go over to the finished version i'm referring to this little section right here all right so we'll go ahead and create a comment here and we'll just say general workout info and let's go ahead and create a div to hold all this so the classes you want to apply here are going to be display flex we're going to do a flex direction of a column we're going to say items and we'll do center we're going to do padding around all sides of 8. we want to round the corners here so we're going to say rounded md and we want to apply a shadow so we'll say shadow md and we want to pass a background color of bg light gray here and lastly we want to position this div relative so we'll say relative like that now within this div we're going to have a few things so the first item i want to go ahead and create or items are going to be our edit and our delete icons now let's go ahead and create a div to hold these so we only want to output these icons if our user is logged in so we're going to say v if and we're going to make sure that the user has value if it's false then we won't show this all right so the classes we want to apply to the wrapper of our user and are sorry of our edit and our delete icons are going to be display flex now you want to go ahead and position these absolutes so we'll say absolute here and we want to position these left two and let's spell that right and then top two and we want to apply some gap here by saying gap x dash 2. now within here we're going to have our icon so we'll store these in a div and we'll apply some classes here so we're going to say h dash 7 w 7 for the width we want to say round it full to make these circles then we want to pass display flex we're going to say justify to the center and we want to say items center here and let's spell that right and then we're going to do a curse or a pointer and then we'll do a line break here to add some readability and then we're going to give it a background color of our light green that we created so we'll say t light green here and then we're going to give it a shadow of large and lg here okay now when we click on this what we want to do is you want to go ahead and toggle our edit mode because this is going to be the icon for our edits so when we do our click here we'll say edit mode we want to run all right now within this div we want to have our pencil icon so we're going ahead we'll go ahead and create an image tag here and we'll go ahead and put that ending div tag here to the next line so where we want to go ahead and grab this image from is i'll copy and paste it in but it's going to be inside of our assets folder and then we have an image folder and then we have a pencil light icon so the class that we want to add to here is going to be a height value of h dash 3.5 and we're going to say with set to auto now what we can do is we can go ahead and duplicate this div right here and change a few things so we haven't yet created a function to delete uh the particular workout so we can go ahead and remove this for now once you create that function we'll go ahead and re-add it and then all we want to do is change this from pencil light to trash light here all right and that's going to go ahead and do it for our edit and our delete icons here so below this we're going to have either our cardio image or our string training image to go ahead and indicate which type of workout this is so what we'll do here is we'll add an image tag and what we want to do is for the source once again i'm just going to copy and paste this and to save some time so we're going to go back to the same folder and we're going to say the running light green image and we'll add a class here of h-24 and we'll say with set that to auto now we only want to show this class if the workout type is equal to cardio now one thing i do want to do is because this value right here returned from supabase is an array we want to go ahead and only get the first workout of that array and it's going to make doing our population of our markup a lot more cleaner and a little easier so what we're going to do here is we're going to set the data that a value equal to workouts and we want that first array or that first value inside of that array so we're going to pass 0 in here okay so now we can say is we can do v if and we're going to say data dot work out type is equal to and we'll say cardio here all right and then what we'll do is we'll go ahead and duplicate this down here for our strength training and we can just say v else here and then instead of outputting the uh running light green we can go ahead and output our tr sorry our string training or our dumbbell which is going to be in the same folder as the running one okay and then what we also want to do is below this we're going to have our tag so we'll go ahead and create a span and we'll pass a few classes here so we're going to say margin top of 6 for some separation a padding on the top and bottom of 1.5 a padding on the left and right of five we're going to say text extra small we're going to say text color of white we're going to change the background color here to the color of 80 light green and for some readability i'll skip a line here and we want to pass the rounded lg to around the corners here and we're going to do a shadow of medium here now inside of here we want to go ahead and output the data dot workout type all right and lastly here within this general information section we want to go ahead and output the title here now remember if it's edit mode we want to go ahead and output a input value with the title so that way we can go ahead and update it later on so let's go ahead and create a new div and we're going to pass some classes here of w full and then margin top of six so inside of here we want to go ahead and have our input in the case that it's in edit mode or the edit mode is enabled so we'll create our input here or the type of text and it'll pass some classes here of padding to we're going to say with full we're going to say text gray dash 500 and focus we're going to go ahead and remove the outline so as the outline and set this to none now we also want to do is we need to put a v if condition on here to only show this and what's going on so we want to say v if not four we want to say v if and only if why is it being a pain here if edit is true all right and then we want to hook up a v model here to the current value of our title so we'll do a v model and we'll say data dot workout name okay now in the event that edit mode isn't true we want to just go ahead and output the title inside of an h1 so we'll say h1 here and we'll do a vls clause and we'll add some classes here so we will say text a t dash light green and we want to set the text size to q excel and we want to align the text to the center here and then what we'll do is we'll output the data dot workout name and that should go ahead and do it for the general section of our view workout file so if we take a look at what we have so far which is going to be our top portion here which is the general broker information we have our two icons here in the top left-hand corner we have our image for the workout type which in our case for this workout it's cardio we have our tag which is cardio and then we have the workout name now what should happen when we click on this pencil icon since we went ahead and set this up with our function of edit mode and we also set up this title here or the name to convert to an input when the edit mode is active this should be converted to an input here so let's go ahead and test this out and if we click on this you can see that it does convert to an input where i can go ahead and say exercise and we'll just do new workout or something like that and then if we go ahead and toggle back out of edit mode you should see now that the new title here is going to be exercise new workout so we now have the ability to update our workout title here within our view workout page now continuing on with our markup we need to output all the exercise information for our particular workout so let's go ahead and start off by collapsing our div for the general workout information and do a few line breaks here and add a new comment for our exercises and then let's do a new div here and we'll add some classes here initially so what we want to do is we're going to have a margin top of 10 we're going to do a padding value of 8. we want to round the corners here so we're going to say rounded md we want to display this as flex and we want the flex direction to be a column so we'll say flex cal we want the items to be aligned to the center we want the background color and we'll do a line break here for some readability we'll change this to light gray and then we'll apply a shadow medium here so within this div we need to go ahead and detect which type of workout it is and output the correct html or markup so let's go ahead and we'll create a comment here for string training and we'll just go back and uncapitalize that and we'll create a new div and we only want to output this div here not a v4 we'll say v if only if the data dot workout type is equal to we want to say strength okay so the classes we want to apply here are going to be flex we want the flex direction to be a column and we want to apply some gap here on the y-axis of 4 and then we want to say with full so we'll say w full now within here we want to go ahead and iterate through all of the exercises that we have within our database for this particular workout so what we're going to do is a v for loop so we'll create another div and we will say apply some classes of flex we'll do flex cal here initially for mobile because we're going to do a mobile first approach we want to apply some gap on the x-axis of 6 and some gap on the y-axis of 2 and then we'll position this relative and what we also want to do is once we get to a small break point here we'll convert this from a flex column to a flex row all right and then we'll do our v4 loop here through our data.exercise data so we will go and create a v4 here and we will say for each item and we'll pass the index value here and we're going to say in our data dot exercises okay and then what we also need to do to avoid an error here is apply a unique key which is why we have created an index on this v4 loop and we'll just pass the key as the index here now inside of here we need to go ahead and output our four inputs or our four data values for each particular workout type so in our case we have strength here so we're going to have the exercise name the sets the reps and also the weight so let's go ahead and create the markup for this now once we create one the markup for the additional three will pretty much be the same with a few minor changes so let's go ahead and create a div here and we're gonna say a class and we'll do flex now for this first one we're going to say the class of flex 2 which i did go ahead and set up within the configuration here so you can see we have flex 1 and flex 2. that's not usually there by default and then we want to apply the flux direction here of a column and we're going to say at the medium break point you want to go ahead and apply a width of 1 divided by 3 to take up 1 3 of the space here within this div okay so now let's go ahead and open this up and what we'll do is we'll create our label here so this is going to be a very similar structure to our creation page for how we went ahead and set up the inputs okay so we're going to say for exercise name here dash name and we'll apply some classes which will be margin bottom of one we're going to say text sm and we'll change the text color here to our a t dash lights and we'll do green now for the label value we'll change this to exercise okay and then below this we're gonna have either an input or we're going to go ahead and just simply output the actual exercise name whether or not or we're going to need to determine if edit mode is enabled if it is we'll show our input if it's not we'll just go ahead and show the exercise name so we'll create an input here with a type of text and we want to do a v if on here we only want to show this if edit is true then we'll apply some classes which will be padding around all sides of two we're going to say with full we're going to apply the text color of gray dash 500 and we're going to apply a focus state here and remove the outline and we'll say outline to none then what we also want to do to have the ability to populate the current exercise name here and also be able to change it is we need to do a v model here for some two-way binding and we're going to say item.exercise okay and then if this is not true if edit mode is not enabled then we want to apply or we want to output a paragraph tag here and we'll say v else and we'll just say our brackets here and do item dot exercise all right and that should be the general structure here we're going to create so what we can do is actually collapse this and i'm going to go ahead and duplicate this one time and make the proper changes for the additional two and then copy those down because we're going to change a few things up here on the rest of these three that we need to create so what we first want to do here is we want to remove flex 2 and change this to flux 1 and we don't want to apply this medium breakpoint class here of width of 1 divided by 3 on the additional three now i believe other than that everything else should be the same here so what we'll do is the next one we want to output here is going to be for our sets so we'll change the four here and we'll say sets and we'll change the value here for the label to sets and we want to keep the edit mode here we're going to keep all the classes and type the same but we'll go ahead and change this right here to sets and i believe we forgot an id here to go ahead and make this label work properly so we'll add an id here of sets on here and then within our first one we need to do the same thing so we'll say an id and we'll change or copy this right here and apply an id to this input so that way if you click on the label it'll take you into this input here all right so let's collapse this up here and i believe we need to just go ahead and change this right here to sets and that should be it so let's go ahead and duplicate this down two more times so one two and let's go ahead and make the appropriate copy updates here so we'll collapse this and we'll collapse this one and then we'll open up this here and then the next one we wanna go ahead and output is gonna be for our reps so what we'll do here is we'll change this to reps we'll go ahead and change this to reps as well and we'll go ahead and change it here and we'll say reps oh we got to change the id here as well reps and then finally reps i believe okay and there we go and then the last one here is going to be for our weight so we'll go ahead and change this to weight spell that wrong and we'll change this to weight and we'll just capitalize this and we'll i will add the parentheses here for pounds so we'll say lbs and then let's change the id here to weight and we'll just copy this here and paste it here and paste it here and that should go ahead and do it for all of our inputs here now what we want to do outside of this v4 loop is we want the user to be able to add an exercise to this workout if they choose so actually before we do that i am missing one thing so we need to go ahead and add the image here to delete this if pot if they choose so we'll go ahead and add our image tag here now the source i'm going to go and copy this and paste this in and it's going to be in our same location we have done for all of our images here we're going to be using this trash light green image again and we only want to show this if the edit mode is enabled here because they don't want to just delete or see a delete icon if they're viewing their exercise or viewing their workout all right and then we'll apply some classes here so we're going to say absolute for the position we want to give it a height value of the or the height class of h-4 we're going to say with auto and we're going to apply the left to negative we'll say minus left dash 5 and then a cursor pointer okay and that should do it now getting back to what i was saying we want to have the ability to add a new exercise here to our workouts so we want to go ahead and create a button now we've already created this button many times so what i'm going to do is just copy and paste in the styling here for this so what i'll do is we'll collapse our v4 loop here so you don't want to do this inside of the for loop you want to do it inside of this div that we have for our strength training so we'll create a button we're going to give it the type of button and we want to go ahead and apply our classes that we've used throughout the whole project for our buttons here so i'll go ahead and paste this in like that okay and then for the value inside of the button we're going to say add exercise here all right and that should do it for our strength training here now before we create our cardio markup i do want to alter one thing here so within our button that i pasted in the styling for we need to update this border color from border white to our a t light green color alright and that should do it now for our cardio markup is going to be very similar to the marker we have here for our string training input so what i'll do is we'll just duplicate this down here and we'll do a few line breaks and to save some space and make things a little bit easier to read let's go ahead and collapse this div here now for the comment let's update this to cardio and we no longer need to do a vf check here what we'll do is instead a vl so if this is not equal to strength training then we'll output this div here with our cardio uh inputs all right and we don't need to change anything with a button but what we do need to change is some of the input values here all right so first off we're no longer outputting the exercise name we are now outputting the cardio type so we'll say cardio type and we'll change it here for the for attribute as well as our id and then for the label value we'll just pass it as type here so what we also need to do is for the v model and what we're outputting here in the paragraph tag this also should be cardio and not capital cardio type like this now there's one issue that we need to update here with this input so if you recall when we are creating a cardio workout we have the cardio type as a drop down so we don't want to change that here when we're editing it so we need to update this from a regular input to a select input so remove this trailing slash here and then go ahead and close off our select option or select tag so what we need to do is if we go back over to our crate file here we actually already created all the options that we need to pass for this input or this select drop down so we'll copy and paste these in here like that to make things easier and i'd have to repeat ourselves here so there we go that is all the changes we need to make here for our first input now the next one and the following ones are going to be a lot more simpler we just need to go ahead and update the four attributes here the value and then the v model and the output at paragraph tag here so the next one we need to output is going to be for our distance so we'll change sets here and we'll do distance and let's go ahead and capitalize the d here and then for the v model here we'll just go ahead and grab both these and say distance all right and there we go now moving on here let's go ahead and do the next one which is going to be for our duration so we'll highlight all of this stuff here and we'll say duration like that and then we'll just capitalize this here and then the last one we need to do is going to be for the pace so we'll highlight weight here and we'll go ahead and grab all of that and we'll just say paste here and we'll remove this here and change this to a capital p and i believe that should go ahead and do it for our cardio markup here now the last bit of markup that we need to create is if we want to submit or update the changes we made to a workout to reflect on our database so we need a button to handle that so what i'll do here is inside of our string training div i'll go ahead and copy this button tag here and i'll go ahead and collapse this and we'll collapse our exercises div here and outside of our exercises then we'll do a few line breaks and we'll add a new comment here for update and we'll paste in this button now a few changes i do want to make here is we're going to add some margin top to the top of this button to separate it from our exercises div here and we want to change the type here to submit and we also want to go ahead and only display this if our edit mode is enabled here and lastly let's update the button text here to say update and let's spell this right we'll say update workout now one quick change that we need to make within our markup here is for add exercise button now we don't want to show this button all the time when a user is just viewing this workout we only want to show it if they are editing their workouts so let's add a v if here and only show this if edit mode is true and then we'll copy this here and we also need to add it to our cardio input so we'll open this up and we'll go to our button and then we'll paste this in here as well now to ensure that both types of workouts that we are allowing to create are formatted properly i went ahead and added a string training workout here to our database so let's go ahead and test out both of these to make sure that both workout types are formatted correctly so let's start with cardio here so if we click on this we have our top portion that we already created and here is a new portion that we just added so when we're viewing our workout here you can see that is the cardio type so we have the type which is a run the distance which is supposed to be one mile the duration is nine minutes and also the pace is nine minutes so if we click on edit here we should now be able to edit this so you can see we have our drop down menu to select the different type of cardio that we have we can update the distance the duration and also the pace here now if we go back to our home page if we go to our workout type of strength training here we should see that we have a very similar layout here except this time we have the different labels here so we have our exercise name the sets the reps and the weight and if we click on edit here we should be able to edit all these values as well so let's begin to implement the rest of the functionality here into our view workout page starting with the ability to delete a workout now to handle this we need to create a function and we'll call this delete workout and we'll set this equal to a sink arrow function and then inside of here we'll have our try on our catch and we'll go ahead and catch the air here and what we'll do with the air is well i'll put it to our air handling here so we'll have our error message data value and we'll go ahead and set the value here and we'll use some interpolation and we're going to say error and then we'll output the specific error message that we have so we'll say error dot message here now we don't want to show this error forever so we'll do our set timeout as we've done many times within this project and we'll have our arrow function here and we'll execute this after five seconds so we'll say 5000 and then we will set the error message dot value back to false okay now to go ahead and delete our specific workout we need to reach out to superbase and say hey we want to delete this workout that contains this specific id which we're storing right here inside of this const of current id so what we'll do is we'll create a new variable here and we're going to destructure the response we get from superbase and we want to go ahead and grab the error if we have one and then we want to await supabase here and we're going to go ahead and say from and we want to use our workouts database so we'll say workouts here and then we want to call the delete method now we just can't leave it here we need to go ahead and delete the specific row that matches this id right here and we've already done this within this file we're going to use the you are sorry the eq method here and we want to go ahead and pass the id for the first value here and then we're going to go ahead and say delete the row that matches this current id that we have right here so hopefully that makes sense now if we have an error so we'll say if error then we want to throw the error all right and now the last thing that we want to do is because once we delete this workout we have no need to stay on this page so we want to go ahead and push the user to the home page here now we just don't have access to do this within our file right now using the composition api we need to go ahead and import the router into this file so we have the route but we don't have access to the actual router so we need to import use router here from view router and then we want to go ahead and create a new data value here and we'll call this router and we'll set a sequel to use router here and we'll go ahead and initiate that with our parentheses here so now within our function what we can do is we can say router dot push and we want to go ahead and push them to the route named home here and we should capitalize this all right now the last thing we need to do here is we need to return to this function so we can use it within our markup and then we want to go ahead and call this function within our delete icon here within our general information so if we go scroll back up here we have this uh div which is going to contain our icons here so the first one is our edit mode and the next one we want to go ahead and call it on is this div right here so we're going to say at click and then we're going to go ahead and call our delete workout function so if we set everything up right we should now be able to delete this exercise by clicking on this trash can here so let's go ahead and do this and if we delete it you can see we get redirected back to the home page here and we no longer have our workout here of string training visible within our home page now next we're going to implement the ability to add an exercise to our workout if a user is editing that particular workout so we've already created a logic in our project to add an exercise to a workout within our crate file here so what we'll do is we're going to go over to this file and we're just going to copy this function and make a few changes to make it work here within this file all right so first off we don't want to just go ahead and say workout type dab value we're going to say data dot value dot workout type here instead and we'll remove this additional dot value here within our if condition now also instead of just pushing to exercise of that value we want to say data dot value dot exercise is here all right and then we'll go ahead and change this down here as well okay and we'll remove this now since we're going to be creating a unique id here we need to import that here within this file so let's go back up here to the top and we will say import and we'll do uid and we'll save from uid here all right and if we come back down to here what we want to do now is we need to return this function here within our return statement so we'll do this and we'll save it and it's going to reformat that a little bit better since it's getting longer and then all we want to do is go back up here to our markup and let's go and collapse this oops the wrong one we'll collapse this now within our strength training here in our cardio we have this button here to go ahead and add an exercise so what we can do is we can say at click here and we can do our ad exercise and then the same thing here for the cardio we will say add click and we want to add exercise so now if we enable edit mode within our workout here we should now be able to add additional exercises to our workout here so if i click the button you can see that we're now able to add those now that we can add an exercise to our workout we want to also be able to delete an exercise and once again we already have this logic created within our creation file here within our application so what we're going to do is go over to our create file here and we're going to copy this function for deleting an exercise and then we'll paste it here right below this comment now once again as we did with our add exercise you want to go ahead and update the value here within our function so instead of saying exercises.value we're going to say data.value.exercises and we'll remove this value here and then what i'll do is we'll just copy this here and we're going to go ahead and remove every instance that we have where we call the old value so we'll go ahead and remove value here and we'll also remove value here and that should go ahead and update our function so now to use is what we want to do is go ahead and return it down here in our return statement and then within our markup we want to go ahead and call this function so where we're going to call this is we got to go back here into our strength training and our cardio divs and we're going to go in to the div where we're doing a v4 loop and we have this image of a trash icon here so what we want to do is when we click on this you want to go ahead and run that function and don't forget we need to pass the id here so we're going to say item dot id like this and then we'll copy this here and we'll go into our cardio div and we'll do the same thing here for this image as well so if we enable edit mode here now we should be able to delete an exercise if we choose to but remember we also have an if check here that says if we only have one exercise we can't remove it so let's go ahead and test to make sure everything is working properly so right now we only have one exercise within this workout so i shouldn't be able to delete it so if you click on the trash icon here you can see we're going to get our error message here that says you cannot remove it because we need to have at least one exercise so let's go ahead and add a new one here and we'll say we want to do a walk we'll say 1 mile we'll say 20 minutes here and then a pace of 20 minutes as well so now if we unedit this and let's say we want to go ahead and remove our run we should be able to do so so if i click on the trash here you can see we can now remove an exercise from our workout so although it visually appears that we're able to make updates to our workout we are not saving those changes if we did a refresh to any updates that we made within our application on this specific page we would see that none of those changes are saved so what we need to do is create a function that's going to send over the newly updated data to our database over on supabase so let's create a function here and we'll call this update and we'll set this equal to an async arrow function and inside of here we're going to have a try and a catch block and we're going to go ahead and catch the error and what we're going to do is we're going to output the error to our air and our status handling div so we're going to say error message dot value and we're going to use some interpolation here and we're going to say error and then we'll output the error dot message here okay and then we're going to do a set timeout to remove the air after a certain amount of time so we'll have our arrow function here and then we'll execute this timeout after five seconds so we'll pass a value of 5000 and then here all we want to do is say errormessage.value and set this equal to false all right now inside of our try block here we're going to go ahead and create a new data value and we're going to destructure the response that we get from superbase and we want to go ahead and grab the air out of there and we'll set this equal to a weight superbase here and we're going to say from and we want to go ahead and grab the workouts database and we're going to say the update method here now what we want to pass is going to be the workout name which will be equal to the data dot value dot workout name and we also want to send over the newly updated exercises so we'll say exercises and do data dot value dot exercises here all right and we also want to go ahead and tack on the dot eq method here to update that specific row that matches the id that we're going to pass it for this workout so we'll say id and we have the data value here of current id which is storing the workout id all right now after this what we want to do is we need to check to make sure we have no error so if we say if error is true then we'll throw the error all right now if we don't have an error that means we have made our updates to our workouts successfully so what we're going to do is we're going to turn off edit mode because at this point in time if they are making an update then the edit mode would be true so we'll just say edit that value is equal to false here now we could also call our function but we'll just go ahead and set it here it's going to be the same amount of code so we'll save this and then we want to go ahead and set a message so we're going to say status message dot value is going to equal success and we'll say work out update it okay and then we also want to do a set timeout here because we don't want to show this forever so we'll do our call back and we will say execute this after five seconds here and then inside of here we'll just say status message dot value is equal to false here okay so that'll be our function so as always to use this let's go ahead and return it here and then let's go back up to our markup here and we need to go ahead and execute this function each time we click on the update button here so what we'll do is come to our button right here now i made the mistake here of putting this type to submit we can actually change just a button we're not going to be using a form validation here and we'll go ahead and call the function of update so if we enable edit mode here and make some updates we should now be able to save and update our workout successfully here so let's go ahead and start off by changing the title here or the name we'll say new workout and let's add an additional exercise here so say we did a walk the distance was a mile the duration was 20 and the pace was also 20 as well so now if we click on update workout we should have our function fire where the edit mode is turned off and it sends our newly updated data to superbase so let's go ahead and try this out so let's click on update here and as you can see we get this message saying success workout has been updated so if we do a refresh we should still be able to see the updates that we made here on this page so if we refresh you can see that now we have our new workout title still here and we also have our newly added exercise of a walk now currently when navigating from page to page within our application the title here inside of the browser tab is not going to update so for example if we go to the view workout it still says active tracker and if we go to the create page or route it still says actor tracker here now within our finished application here we have these titles update for the route that you're currently on so right now we're on the home route so it says home and then if we're on the view workout route it says view workout and etc so let's go ahead and implement that here into our project so let's navigate into our router folder here and open up our index.js and what we need to do to implement a title inside of our browser tab is we want to add a new object to each one of our routes here of meta and then we'll add a title value here and we want to go ahead and pass the title that we want to display inside of our browser tab so for example we're on the home route here so we'll give this a title of home and now we need to go ahead and do this for every single route that we have so we'll have our login here so this will be login and then we'll have our register so we'll change this to register then we have create here so i'll change this to create and then finally we have our view workout so i'll go ahead and change this to view workout here now what we also need to do because right now this will not add the title to the browser tab we need to do what they call a router before each method here so you can see here i have some comments so what we'll do here is we'll change the document titles so we'll do a router dot before each and we want to pass a few params here so we're going to say 2 from and then next and then we'll have our callback here all right now what we want to do here is go ahead and target the document.title and we're going to set this equal to and let's go ahead and say equal to then our interpolation here and we want to go ahead and grab so we're going to say 2 so the rod we're going to which is why we have this 2 param right here and we want to grab the meta object on that route which we just created so we'll say meta and then we want to grab the title value all right and then we're going to go ahead and dynamically add this active tracker value to the end of each one of our routes now we can go and put a semicolon here and then we want to go ahead and proceed to the route by calling next here so if we save this and we go over to our project and we do a refresh here so we're getting two is not defined from is not defined which let me see why that would be too oh we need to actually wrap this here so it didn't do it automatically for us so let's go ahead and add an additional parenthesis around here and if we save that that should go ahead and resolve that error so now you can see that we're on the crate route we have it say create and then active track and if we go to home it says home and if we go to view workout it says view work out there in the title of our browser tab now currently we're logged in and we should have access to all routes within our application but what happens if we're not logged in and we try to go to for example this crate route right here what's gonna happen so let's go ahead and log out and as you can see we're redirected back here to the home page now if we go ahead and try to navigate to our create page even though we don't necessarily have it within our navigation here we can still access this route here all right now even though if we're not logged in and we try to go ahead and create an exercise we're going to go ahead and get an error here so if i just enter some information here and try to record it you can see that we're going to get this error because we don't have access to it since we're not authenticated here but i think it'd be better practice to not even allow the user to get to this page to even perform a operation to record a workout so what we want to do is implement what they call a route guard now to implement this we will be accessing super base from within our router file here so we're going to need to import it here at the very top so we'll say supabase and we'll grab that from our superbase folder and we'll grab that init file okay now what we need to do is inside of our meta object here we need to go ahead and add a auth value here and set it to either true or false so if we set it the true that means you want the route to be protected by authentication now if we set up the false that means anybody can visit this path so for our home page here we'll set this value to false now the only page that we want to prevent a user from getting to within our application is going to be the creation page here so for login we can pass false for register we can pass false and then for the creation route here we'll paste this in but we'll change its value to true and then for the view workout here we'll change this to false alright so now down here below our comment we have for route guard for auth routes let's go ahead and create another router before each method here and inside of here we're going to pass to from and then next and then we'll have our callback so first off what we want to do each time before we go to a new route we want to go ahead and see if the user is logged in or not so how we're going to do this is by using superbase so we're going to create a new data variable here called user and set is equal to superbase so i probably do equals here we'll do supabase dot off dot user now if a user is logged in this will return back the user making this data value true now if it doesn't have the user it'll make this data value false okay and we're going to use this later on within our check when we're navigating to a new page or route so what we want to do first off is we want to check if the route we're going to requires authentication so what we'll do here is say 2 dot matched and we'll do the sum method here and we want to pass a param of res here and then we'll have our callback and what we're checking for to see if the response dot meta dot off value is true now if this is true what this means is that this this route requires authentication so now what we want to do is first off we need to check if the user is logged in or not so we're going to say if user that means they're logged in so we can go ahead and proceed them to the route and then we'll return from here we'll return out of the function now if they're not logged in what we'll do is we need to redirect them back to the login page to log in so that way they can log in and then they can access that creation route here so we'll say next and we can go ahead and pass inside of here the location we want to go ahead and send them to so in our case we want to send them to the login page here and then we'll return out of here now in the event that this is not true and the route doesn't require authentication we just simply want to go ahead and pass them to that route they're trying to go to all right and that is going to be our router guard now back in our application if we go ahead and try to access the crate route while we're not logged in the router guard should pick up and see that we're not logged in and we're trying to access a route that is protected by authentication and it should shoot us to our login page so if we go ahead and type in crate here you can see that it shoots us to our login page so that way we can log in and then access that authenticated route so our application is completed now the last thing that we want to do is deploy to heroku here so i'm here logged into my account on all the apps that i currently have and we want to go ahead and create a new app here and we'll go ahead and call this name or the app name active tracker yt here and we'll go ahead and leave the region as united states and we're going to go ahead and create our app here now to deploy our application we're going to be using the heroku cli here all right so we have a few steps that we need to do in order to get our application hosted or pushed to heroku here now before we go ahead and do any of these things right here we need to go back to our repository or our project and open up a new terminal and we want to go ahead and build our project here and what i mean by that is there's a command that we can run within view called npm run build and this is what we're going to be deploying to heroku so you can see it's going to build our application for production and we're going to then push this to heroku okay our build has been completed and we can see this because now we have a new folder here inside of our project called dist which has our production built ready application okay so what we also need to do is i'm going to drag this folder in from the finished repository it's a static.json file that heroku is going to need in order to know where to look for our deployed application okay so i'm not going to go get into this too much just know we need this in order to deploy it to heroku all right so we'll go ahead and close out of here so now if we head back over to heroku before we can begin to log in and create a new gear repository we need to head over to the settings and we need to add a new build pack here now this build pack is going to be the heroku build pack static so we're going to save this and next time we deploy this build pack configuration will be used within our heroku deployment all right so now if we head back over to deploy we can log in with heroku first here so let's go ahead and copy this and inside our terminal we're going to go ahead and log in with heroku so it says to log in press any key so we'll go ahead and do that and it should prompt us here to the browser to go ahead and log in and there we go so we're now logged in we can go ahead and close out of here and the next thing you want to do is go ahead and initialize a new get re uh a get repository so we'll go ahead and copy this and we'll paste it in here and that's going to go and initialize a new git repository now the next thing we need to do is add this remote to our git repository of our newly created heroku app here so we'll copy this command and we'll paste it in here and that's going to go ahead and set the remote to our newly created project here on heroku so the next thing here we need to do is we need to go ahead and add all of our files to uh the repository so we're going to go ahead and say git at all so that'll go ahead and add them all and then the next thing we need to do is commit them so we'll run this git commit and then we'll paste it in here and we'll go ahead and change the commit message here to push to prod all right and that's going to go ahead and push all of our files to the repository now the last thing we need to do is go ahead and push this to heroku so we'll go ahead and paste this in here and that's going to go ahead and deploy our app to heroku okay some time has passed and as you can see now our app has been successfully deployed so if we go ahead and click on this button right here of open app we should be taken to our active tracker application here on heroku all right so that's going to wrap it up for this video here today if you guys did enjoy be sure to leave a like on it and let me know what you thought about it down below in the comments now if you want to go ahead and catch more videos from myself be sure to subscribe the link is down below in the description and once again thank you to brad for having me here on the channel it's much appreciated and i hope you guys all have a great day and i'll see you guys in the next one take care

Channel: Traversy Media

Views: 23,043

Keywords: vue, vuejs, vue.js, vue 3, composition api, supabase

Id: 3tF0fGkd4ho

Length: 196min 30sec (11790 seconds)

Published: Mon Nov 01 2021