Build a SaaS Markdown blog with Next.js 14, Stripe, Tailwind, Supabase, React | Full Tutorial 2023

hi everyone so in today video we are going to build a full stack SAS block application so we're going to use with super base nextjs and connect with stripe as well and here's some of the feature that we are going to do in this block so first we're going to have the free Block that allow everyone to read next we're going to have the premium block that allow user to subscribe with stripe in order to read those content and third thing we're going to build a dashboard that allow user to manage the block and create a new block and publish or make its Prem all right so here's what the demo look like so when you visit our homepage you will see list all of block post and then you can navigate into each of the block post but as you can see this block post is static so the moment you click it you can see it instantly but if you have an lockin you cannot be able to read the content if it the content is premium so this content is premium that's why you cannot see this one but is for this example this content is not premium so this user do not have to lock in to read this one okay so this user need to lock in so for example if they lock in and if they haven't subscribed with stripe yet we're going to prompt them to upgrade to Pro and then they can read be able to read this one okay so one more thing as an admin for example this user so he can read all of the post and also he can be able to access to the dashboard as well so right now let's go to the dashboard he can manage all the block post he can do the tuckle and for example un tuckle and make this block post and to not premium and then let everyone to read this one and it can unpublish or publish and he can create a new block or edit something like that all right so I'm so excited to show you how to build this one so before we get started don't forget to like And subscribe it mean a lot to me and also push me to make more content like this all right all right first we're going to create a next project please go ahead into the next CH documentation and go into installation and then copy this one right here so I'm going to paste this one and then we're going to run inside this folder so I'm going to do like this so right here it's going to ask you a question so so we are going to use the type scripts eslin yes telin yes and sour three I'm going to choose no and for this yes that's no and right now it will install all the dependency for you all right so once that's done you can control L to clear the terminal and we going to run npm run Dave we start our project on Local Host 3000 so right now I'm going to click on this link so right now you can see that nextjs run on Local Host 3000 great so the next thing that we are going to do is to install the shat CN inside our project so for that I'm going to go into a new terminal and right here we're going to go here and then you can go to the documentation and you can click on installation in this case we're going to choose nextjs and for the first step here we finish it already let's go ahead and do the Second Step I'm going to copy this one choose npm and right key I'm going to press contrl V and then we can press enter so right now it's going to ask you another question so right here we're going to use typescript for this one I'm going to choose the default for the color I'm going to use it and this one just press enter just enter this one as well and this one as well just enter and then this one enter and then we're going to press y so right now we going to install all the dependency and create a default folder for our insti our component all right so if right now if you look at right here we can see that we have created this file and also this component JS right here this is from shatan right here okay great so now we can see that this two we have t in two file so in this case I'm going to remove the tan. TS right here so okay let's do that and right now let's going back and make sure that everything is still okay great so the next step that I wanted to do is I want to set up the seams inside for our shat CN so for that let's go inside here you can see that we have the seam right here and right here you can customize the seams whatever you want in this case I'm going to choose the new uh default and the color you can see you can choose a different color in my case I'm going to choose green and and with this border and go to dark mode okay so for that I'm going to copy the code and copy right here and going back inside here you can go into the global. CSS let's go that and then we can see that we have this layer right here so we can replace this base layer right here okay so right now I'm going to scroll this one and then we can paste this one right here so to make sure that this one is going to work so let's go ahead and install one of the component from this one so let's actually search so I'm going to install Theon and go into here copy with npm and open your terminal and then we going to press copy right here okay so right now let's go back inside our page and then inside this page I am going to remove everything from this one and we can run the snippet ofc so this is generate boiler plate for me if you don't have this boiler plate right here you can go into the extension and you can do search for es7 and I'm going to use the extension uh this one right here okay so you can go ahead and install this one as well so you will all to have the snippet all right so right now let's import our Bon look like it installed already so if you look at right here we can have this Bon and this is that we just download from shatan great so right now if we go back inside here what I'm going to do is try to import the bong and the pro tips right here you can just do control Dot and you can see we give the intelligent of to our bhon and right here just do and test click me okay so right now if we go back right here you can see that we have this Bon with the green color that we just set up with the custom seam that we have great so the next thing that I wanted to do is I want to make our application dark mode by default so for that let's go ahead and back into our shapen and going to search for dark mode and right here we can to choose nextjs and this is the step that we going to do first we going to install this one so let's go ahead and do that and open up terminal and clear this one and I'm going to paste and install so while this one is being installed so then we can copy and create this file so we're going to copy this file name and then come back here inside the component I'm going to create a new file called seam provider and then inside here we can just copy this content and then another one is we're going to use this one inside our layout so to do that we can navigate inside our layout and between our children right here so we can import the seam provider okay so seam provider that we just create so we can cut this children right here and put it between this one okay so now we need to pass all the attribute that we can have from here and then I can just paste this one and we need to use super hydration Bing this one as well great so since our default side we wanted to be dark mode so I'm going to change from system to our do okay so right now if we come back and refresh so so as you can see right now we are going to dark mode by default great okay so now we are going to work on the navigation bar so for that let's go into our apps and inside the component right here I'm going to create a new folder called now and inside here I'm going to create a new file called nowb bar. TSX and let's run our snippet orc we'll have this one great so right now let's use this now bar inside our layout going back into our layout above the children right here so we can import the now bar right here okay great so right now we have this now bar since we inside our layout let's tie our layout a little bit so we have this main right here so now I'm going to cut this two and place inside the main so for this one I'm going to give the class name of the max width of this one 27 XL and MX2 Auto so this one so when you go on the larger screen so you can see the max WID is only 7 XL and so when we below that it will take the entire full screen Okay so now I'm going to give this one a P10 as well so we have a little bit of space and then we're going to do space y on this one to five so right now you can see we have the little bit of space between these two great so right now let's go back inside our now bar let's do some styling for this one I change this one to nav instead and right here we going to have our logo which is going to be a link I'm going to use the ne link the H of this one is going to be the homepage and the name of this one is going to be Del block all right great so right now if we look back on our uh demo so if you go back into our demo so you can see when we hover on this one we have the underline right here so right now we can do that the same thing so I'm going to wrap this one around a div so I can cut this one inside and we're going to give a class name of this one to group and then we're going to have another diff responsible for that line is going to give an H1 and and the WID to zero but when we h on this one this is going to be the group hover so we're going to group this one it's going to be hover we're going to give the WID this one to full and then we're going to give the transition all as well and we're going to have the BG to Green 500 okay so right now if we hold one this one so you can see we have this underline but it take all over the space so for that let's go into our navigation and do deflex and then we can come back and you can see right now it's under our logo only so for this one I'm going to give a little bit of style so T to 2 XL and then we're going to do fun bow okay great so right now we have this one so the next thing inside our navigation will be the Bon for the user to lock in so for that let's create that so I'm going to have this Bon and then this one is going to be lock in and right now we can put our lock in at the end of this now bar so to do that I'm going to to go flex to item Center and then justify this one to between so you can see very nice and our Bon right here I'm going to give the variant of this one to outline all right so right now this is looking great so right now we for this uh lock in right here we're going to use the icon for the icon that I'm going to use I'm going to use the react icon right here so we can go ahead and install this one so going into our terminal I'm going to run npm I react icon all right so right now we can search for the icon so for this one I can go to the simple icon and right here you can search for the icon that you want in this case we going to lock in with GitHub so let's search for GitHub so you can see right now it's give this code so I'm going to copy this one and we can come back here and then we can paste this one right here okay great so now we can use this one inside our bong and this is going to be the react component as well so we can do something like this all right so I think I need to put this one back great so right now if we go back we should be able to see this one so let's add some space between these two so I'm going to have a class name to flex item Center and the gap of this one to two so right now we have a little bit of spacing great so the next thing that we going to do we're going to implement the lock in with GitHub right here all right so before we do lock in with GitHub so you need to create a super based project so in this case I have created already so if you haven't please go ahead and do that so the next step that we going to do after you create a project you need to go into the authentication and then you go into the provider so what we going to do is we going to enable the GitHub authentication so in this case right here so we need the client ID and the client secret so to get this one you need to go into your GitHub profile and then you scroll down to developer setting and right here click on the oo app and register a new application so in this case you can give whatever the name you want so in this case it's going to be Del block and the homepage right here you can just use the Local Host 3000 and the authorization call back right here we need to go back inside our super base dashboard and then we can copy this one okay so now coming back and we can paste this one and click on register so when you register this one you will get the client ID so please go ahead and copy this one and going back here just paste this one and the next one is going to be generate a new client secret great so right now we can have this client secret after you lock in with the password so right now just copy this one and then we can come back and then we can paste this one as well so make sure you click on enable and then click on Save okay so right now we have this one great so the next thing that we going to do is we're going to set up super base inside our project so to do that let's go inside to this documentation I leave with the link in the description as well so first we going to install the dependency that needed so I'm going to copy this one and then let's go inside here I'm going to paste this one right here okay so while this one installing so we can go ahead and follow this documentation first we need to create an EnV local to store this uh one so I'm going to copy this one and come back here and then outside of the app directory that we have right here so I'm going to create a new file called env. loal okay and right now we can just paste this one so right now we need to get the super base key and the Aon key right here so to get this one we can come back into super base dashboard and then let's go into project setting and this is where you get it so go to API and the project URL can just click copy and come back here and then we can replace this one and then for this one we can just come here and then copy this one as well okay great so right now we complete this one let's go back inside here okay so this is what we're going to do so inside our project right here as you can see we have this bong so right now I'm going to make this as a component so for that let's go into our na bar right here I'm going to do as a lockin form okay lockin form. TSX and we can run this nippet and going to now bar I'm going to cut this one and then I'm going to use it inside over here okay so right now we're going to do control Dot and this is going to be Auto Import for me and we can do the same thing for this one great just hit save and then come back here we can just do lockin form great so right now we have this one so let's go inside our lockin form so we're going to use call to super base and login with GitHub so for that we can just copy the code from this one as you can see we use the client component so for that we need to make this one as a use client as well so we use client and so we can copy this code right here so we're going to remove unnecessary thing which is this one and then I'm going to cut this one and I'm going to remove this one right here okay so inside here so I can just paste this code so right now let's create a function to lock in with GitHub so for this one let's create a function call handle lockin and for this one we can just do super base do o do sign in with the oos right here and then this one we can give the provider is going to be GitHub and so when we lock in with GitHub so we need to have the redirect call back to change the code with the session so for that we're going to do redirect we going to have the option and is going to be redirect to and this is going to be the location. origin plus SL or/ callback so this is will be another route and the location that origin right here will be equal to local 3000 but if you deploy to production this is will be the URL of your production so that's why we The Local Host uh location. origin right here great so right now before we uh call this one we need to create the call back file right here so to do that we can come back here and then inside the apps I'm going to create another one it's called be off and inside here we're going to create another folder called callback and inside here we're going to do route. TS okay great so right here for this one you don't have to write this one we can go back inside the super base documentation and we can copy that so as you can see right here lock in with the O open this one and right here we can scroll down and then you can see this is the call back so we can just copy this one and then we can come back here we can paste this one right here great so right now we have this one so notice that you can see we have the next right here so it mean will be the redirect URL so let's say for example if you lock in from whatever pass so we can redirect that to that pass back so to do that that we can go back to our lockin form and we can we can get the current pass that the user lock in from so to do that we can uh use the pass name equal to use path name okay and right now we have this path name and so we can use it for our call back so this one is going to be next equal plus the P name that we have right here okay so right now when this done let's go ahead and the lock in right here and then call and okay great so right now we have this one so one last thing that before we going to test this out we going to create the middleware to do this uh to see the session so right now I'm going to go to middleware and then I'm going to copy this one go inside our apps and outside right here we can create the middleware TS okay and then we can just paste this one and this mid well will run on every page so for for example if you navigate to any page inside our application this one will run so for that for now I'm going to run this one and then see the session of the user okay so for now let's do console.log data all right so right now we going to open the console and see as you can see that our session is null okay so user is not locking yet all right so let's actually test this one so let's go ahead and lockal host 3000 and do the lock in so right right now when we are lock in so right here here we're going to confirm and right now it will redirect me back to the homepage so if you look at the console of our from a middleware so you can see that this user is lock in great so the next step that we going to do is we going to toggle between the lock and bong with the user profile as you can see right here uh when the user loog in we can see something like this all right so let's do that all right so to do that first we need to read the user session and then we can do toggle between the lockin form and the profile so for that I'm going to use the zustan so we're going to use the zustan to read the session and store the user inside zustan so for that let's go ahead and install the zustin I'm going to copy this one and we can open our terminal and then press install this one all right so while this being installed so we can go into the documentation of the Zen so this case we're going to use with the typescript guide and then I'm going to copy this one right here okay so right now let's go back inside here inside our lips folder I'm going to create another folder called store and inside here I'm going to create the user. TS okay and then I can paste this one so right here let's change this one a little bit from the user B state to user State and then we can replace it right here and this is going to be the user and this is going to be the user type so this one is going to come from the super uh super base so I'm going to do user and I think this one it's from super base so I'm going to import from add super base right here and then we going to have the user type right here all right so right now we have this type and then this one is going to be or undefined and another one is going to be the function is going to be set user that is going to pass the user to us and with the type of user or undefined as well and right now let's change this one to user and this one to set user and this one is will be the parameter that pass to us this is going to be user and we down lad this one and so for this one we can just have the user all right great so right now we have this one and then I need to change this one to undefine as well and for the file name is going to be use user and so we need to export this one in order to run great so right now we have this one so the next thing is we're going to have the session listener to read the session of the user so for that let's go ahead inside the component and create another file which is going to be the sessions provider. TSX okay so right now inside here we're going to run a snippet ofc and this one we not going to return anything so we can just listen for the user only so this is what we going to do and right now this one is going to be session provider inside here we're going to run the use effects from react so we can import this one so it's going to be use effect and then so then we can call it right here so inside this use effect all right so right now we going to create the function to read the session of the user I'm going to do rate user session and this function will be called inside our user effect right here all right so I think I forgot to call this one great so right now inside this one so we need to call super base to get the user session so to do that I'm going to go into lock in form and then I'm going to copy the code that we have right here okay so now going back here and so I'm going to paste this one so this one just do control that it will give you the intelligence and right now inside here we can call the function to get the session so we going to Super base. ask. getet session and right here we need to do the await as well and since we do await we need to Asing keyword and right now we can have the user session which is going to be data right here so right now we have this data we need to set into our sance state so for that we can get the function set user is equal to use user and then we can to have the state right here and that state is going to return the states. set user so right now we can call this function inside our set data right here okay so right now we have this squishy line right here that we need to pass uh either remove or pass this one independency so for this one I'm going to do eslin disable like sline okay so because we want to run only one time that's why we do not pass anything to this one and this one is is pass the wrong type so for that I think this one is going to be session is going to be user okay so right now our session is complete all right so right now we set the user let's try to use this one inside our now bar and tuckle this one so for that let's go inside our us uh nowb bar and then we're going to call C user is equ going to call use user and we're going to have the state of this one that's going to return state. user and right here okay so okay I think for this one we need to transform this one into the client component and this one we're going to remove unnecessary thing here great so right now inside this one so we can check if the user is exist we're going to render the profile else we're going to render the lock in form okay right now let's do this so right now if we refresh this one if this user is locking we should be able to see the profile I think maybe we can do lockin ID right here user. ID um and then if we refresh this one okay it's weird I think this user is lock in right so right now if we go going back right here if we refresh we should be able to see that user have this session so let's actually console that lock the state of this user so console. loock user and we go to uh inspect off this one and let's go to console. loock as you can see we have undefined right here okay great so let's see ah I see so because we have the session provider we forgot to call this one so I'm going to call this one inside our layout let's go here and then we're going to go session provider and then we call this one right here so right now the session provider let's go back here okay for this one we need to make sure that this one is need to be used client as well so right now we get complaint on this one so they hit save everything should working fine so right now when the user is locked in we should be able to see the profile great so right now we be able to toggle between the lockin Bon and the profile right here so the next step that we going to do we going to render this profile as a user image and do some functionality like lock in and display some user information as well all right so to do that we can go inside our now bar right here so you can see this one we render our the profile so instead of this one I'm going to create a new component inside our now bar right here which is going to be the profile. TSX okay we can run our snippet again and right now we can call this one inside our now bar let go inside now bar and then we can call it right here so this one is going to be profile okay great so let's go back inside our profile and inside here we going to call the use user to get the user information so it's going to be use user and this one is going to be have a state and the state right here will return user okay so right now we're going to have this image uh instead of the profile right here so for that we can import it from next image so this is going to be something like this so image from our next image and the source of this one so if you look in Spec and go into the console and as you can see the image right here the data I think this inside the user metadata and we have the Avatar URL right here so for that we can do user. user metadata do a URL okay and the all of this one is going to be user dot user metadata do username all right so we hit save this one so right now we need to give a width of this one so I'm going to give 50 and the height of this one to go 50 as well let hit save so right now I think we're going to run into another problem so as you can see that we need to register the domain of this Avatar URL so for that let's copy this one and let's go back inside here here let's go into the next config and inside here we going to have to register this one it's going to be image and this one is going to be remote pattern and right here we're going to have the array and right here we're going to have the host name this is going to be the host name and the protocol of this one as well which is going to be https okay so right now when we save this one so we need to restart our server so to do that I'm going to come back here I'm going to contrl C T and then we can run this one again and then make sure that this one is okay let's try to refresh this one all right so right now as you can see we have this one but I think we should be able to see the user logo okay great now we have go back inside the profile and do some Style on this one I want to give the class name of this one to round it to full to make it Circle ring two and going to be ring green 500 okay great so right now we we have this one so one thing that we need to do is like as you can see when we h on this one when we click we can see there's a popup and then we have display information so to do that we can go back inside shat CN and we can search for the component called pop over and right here you scroll down we need to copy this one so and then npm and then we can come back here and then we can install this one inside a project all right so right now while it's installing so we can copy the code that we have right here so we're going to copy this one and paste it right here and another one is going to be this one right here so I'm going to copy this one so for the trigger of this one is going to be our image so for that I'm going to cut the image and replace it with the open and save this one so right now let's go back inside our project so you can see we have this one when I click we can see the content of this one great so for the content of this one we go going to have the information of this one so I'm going to do the div we have the paragraph is this going to be the user do user metadata do username okay so right now we can see our name and then we can copy and do another one but this one is going to be email address so user metadata. email okay so for this one we can just do something like this and for the style of this one what I'm going to do is class name to px2 four and Tech of this one to SM and then for the email address I'm going to give the class name of this one to text Gray 500 all right so right now it looks something like this nice so the next thing that I wanted to do for this parent right here going to do just P2 right here and for this one I'm want to do space y to three later on we going to have more compenents right here all right great so the next thing is we're going to have the link to our dashboard and the bong lock out as well so for that let's do it so right here we're going to have the link and we're going to use the next link the H of this one is going to be the dashboard and right here we're going to use the Bon for to display this one let's Auto Import this one by control Dot and import the sh as you can see right now we can have the dashboard great so right now we can see nice and for the dashboard right herey I'm going to give the variant of this one is going to be the ghost variant and as you can see there's no space between these two even though we add the space y so for that I'm going to give the class name of this link to block right now you can see we have some space great and let's start the Bon right here I'm going to give the class name to this one to Wi full and for this one let's give an icon of the dashboard so for that I'm going to use the red icon right here so then please go ahead and install this one so I'm going to run and PM this one and then go in here and install and to use this one is really simple so we can just copy and paste this one right here okay I'm going to copy this one and come back here and then let's uh replace This One Import the dashboard icon and another one is going to be lock open so for this one is going to be our lock out icon and come back here I'm going to do the dashboard icon and this one I'm going to do Flex item Center and then just the five this one is going to be between let's go back and you can see nice and another one I can just copy this one and then we can paste this one but instead of the dashboard this one is going to be lock out and this one is going to be lock open icon okay so right now it look something like this great so we can have the Divide border between these two by adding ddy to Y right here okay so right now we have some space between this two and we have the Y great so right now our profile is complete and the next thing that we are going to do is to implement the lock out functionality right here all right so to do that it's going to be really simple so for this one so we can go into the lockin form and then we're going to copy this function right here so we're going back into our profile and I'm going to paste this one right here so this one so we can do control Dot and this one we can just Auto UT and this one is going to I'm going to remove everything and instead of lock in is we going to do handle lock out and this one we're going to call to super base o do sign out and we can do the weight for this one and then when we do that we need to have an aing and for this one we can set the user to undefined as well okay so we can set the user to undefined so for that we need to import set user from right here it's going to be set user and right here we're going to call set user right now the error should be gone and then we can call this one inside our our Bon which is going to be onclick lock out great so right now if we come back here and then we click on lock out we should be able to see that we go back to lock in and if we refresh this one you can see so right now we lock in back we should be able to see the icon and the user right here okay great so right now we finish our lock out so the next thing that we going to do is to whenever the user is lock in we want to store the information inside our database so to do that we can come back into super base dashboard and go into table editor and create a new user table so I'm going to give the user table and the ID of this user is going to be the uu ID and so for this one it's not going to be autogenerate so this one we will import from the O table user so I'm going to add more column right here I'm going to click add add more more we're going to have a lot of column inside here so first we going to have the email of the user next is we going to have the display name and this one is we going to have the image URL and we going to have the role of the user and then this one is going to be subscriptions status if whether this user is subscription or not and another one is going to be Stripes customer ID and another one is going to be Stripes subscription ID okay subscription ID okay great so for the type of email it's going to be text display name is going to be teex as well Mage URL is going to be text the RO is going to be text and for this one a default value is going to be user and for this one it's not going to be nullable this one is not nullable as well let's unckle this one and this one and subscription status is going to be bullan and the default value is going to be fall and for this one not nullable as well and this two is going to be type text and this one is going to be type teex as well and this two is going to be Nall okay so because this one will will add this one later when the user is subscription with the stripes and we can to add insert into this table okay great so right now we have this one let's hit save on this one okay so right now table is complete so what I wanted to do to insert this table is to call trigger so whenever the ask user have insert into this table so I wanted to call the trigger and insert our table user okay so to do that we need to go into our database and go to function and we're going to create a new function to call it's going to be create user on sign up okay and for this one it's going to be a trigger and we're going to pass the function definition right here so for this one you can copy the boiler plate so you go into the block right here so you go into the the demo and we have one block is going to be block boiler plate so you can see with this one so what we want is going to be the trigger function right here so for that I'm going to copy this one let's go back and paste this one right here so right here I'm going to explain you what it does so right here this one is going to be insert into public table user that we just create and fill this information such as an ID email display name and the image RO with the data that come from the GitHub such as email username and Avatar and this one is we're going to update the user session with the role that we going to add insert for that is going to be the user role okay and right now we can that can show the advanced setting and this is important to choose the security def finder great right now let hit confirm on this one so to create the trigger so you can go into trigger and you can navigate into o but as you can see inside the dashboard right here the trigger is for the O table is managed by super base and this is read only but we can change this one only if you know what you are doing so in this case we know what we doing so we're going to do it so for that let's go inside the super base uh actual editor right here click on the new query and right here you can come back to the boiler plate and copy this one as well and then we can just paste this one right here so right now for this function name is the function that we going to to that we just create it's going to be create user on Sign app and a trigger name is going to be you can name this whatever you want in this case I'm going to call the same name as create user on sign up as well so this one is like we going to create a trigger this is the name of trigger and this one is going to be the even so this one after the ask user table is insert so I mean if there's a new record and then inside the ask user we going to call the create user on sign up right here okay so right now let's click run this one and let's go back into to trigger and then let's go to ask we should be able to see this one right here great so right now we have this one so the next thing to test this out we going to the ask authentication and then remove this user right here and then we can come back into our applications and then we can uh lock out this user first and then we can try to lock in back so when we lock into this user we will be able to see the user record inside our table so right now let's go back inside here we have this data and if we go into the user table we should be able to see this data right here okay great now we complete and save the user information so the next thing that we going to do is to work on the dashboard page all right so before we doing that so you can see when we navigate to the dashboard this Pages do not exist yet so let's go ahead and create this one so inside our apps we going to create a new folder called Dash port and right here let's do page. TSX and we can run our snippet orc right now we hit save so if the user right now try to navigate to the dashboard we should be able to see this one so right now let's change this one to the H1 of the dashboard okay dashboard right and then for the this one I'm going to change this one okay so right now before we work on implementation of this one I think we can do the page protection for the the dashboard so right now this user is the user role right so we want to only the user that access the dashboard is an admin so to do that we need to go into the middleware and then this one we can check and then run this middleware only for the dashboard page only so right now we can do this one export it's going to be equal to this one and I think this one we need to con config and then we're going to do matcher that is going to be listen to the match of the page this going to be dashboard page and then this is going to be pass and it's going to be star so it mean like every time we go into the dashboard page it will run this middleware any other page we don't want to run it so right now if we confirm that so right now you can see this is our last compile so if I try to go into lock in/ localhost 3000 right here so if I go here so you can see this we do not run the middleware but if I navigate into the dashboard the middleware is running okay so right here we can check on this one we can check if the data do sessions dot we n else so it mean like if the user is lock in so if the user is not locking we want to redirect them back to the homepage okay so for that we can do return next respond. redirect and this one is going to be new URL and I'm going to do SL right here and then we're going to request. URL so right now if this user is not locked in so for example I sign I lock out from here and if I try to navigate to the dashboard if I enter right here so you can see I cannot navigate to dashboard because we protect this one we check the user session and turned out the user no session and then we return them to here and another thing is like if the user is locking and then we can check another one if data. sessions. user meta data roll is not equal to admin so we going to do the same thing so we're going to return the user back to the homepage as well so right now let's try to lock in this user and so when the user is lock in so let's try to navigate to this one so you can see this user is a user role he cannot lock in to the admin page as well so for that let's try to update this user manually to to become an admin page okay all right so for that first we can go into this role we can change this user role into admin so if you want to know how to do this uh in depth so you can check out my previous video that I talk about this one so for now this one we're going to do this one manually okay so right now we change this one so the next thing we need to update the session of the user as well so for that let's go into actl editor and I think I have run this one already so I think it should be maybe we can go into the function and go into edit function and then we can grab this code right here because this code is responsible for update user session okay so right now let's go back into our actual editor and press on new query and then we can call this one so instead right here we're going to do admin and the new ID right here will be the user ID so for that let's go to user table and then we can copy this user let's come back here and then we can replace this one with the ID of the user and then we can add semic column now we run this one so right now this user become admin so when that happen we need to lock out from this user and then we can lock in back so that the user will have the session of an admin so right now we can go into here and then you can see right now since this user is an admin right now we can have the dashboard page great so the next thing that we wanted to do be as you can see this dashboard link right here is only for the admin to see only so we can do protect this one as well so for that let's go into the now bar and go to profile and then right here this is where we render our link so let's go ahead and try to check this one so we can do con is admin if the user is admin so it's going to be use user metadata. roll and then it's going to be equal to admin okay so this is is admin so only the admins only that be able to run this one okay right now we do this one great so right now if we refresh this one since this user is an admin so he can still be able to see this one and then for the other user they will not be able to see this and later on we can add this one another link but for now we can keep it as it is for now right now we can focus on building our dashboard right here all right so right now we're going to work on the dashboard page so for that let's close everything that we have here I'm going to go here and right now let's navigate into our dashboard page so so if you can see right here we have the layout of the dashboard where the user can navigate between the user page and the dashboard right here and also you can see there's a little bit of space between these two so for that let's go into our layout instead of space y five let's go with 10 and right now we can see this one nice so right now let's go back inside our dashboard and go inside here I'm going to create a new layout of this one l. TSX and then we should be able to render this one and inside this layout we going to have the children's and then we going to add the child uh type of this one it's going to be a react Noe okay and then this one we can just render the children inside here great so right now let hit save this one everything should be working fine nice so now inside here I'm going to create a new component of this one and the component is going to be called SN Ling TSX okay so let's save this one and right now this nav link right here will be render the link of the dashboard or to go to the user page and for that let's have the data for this one is going to be links it's going to be array and this one is going to be the H ref is going to be equal to SL dashboard and then we have another one it's going to be the TCH it's going to be dashboard and we going to have the icon and the icon of this one is going to be a rer so I think this one we can import it from the Reddit icon we go here and then we can search this one and I think it's probably the the icon right here so right now we can import from at oops redit react icon and then we're going to go with the this one is going to be the uh the R icon okay the read icon that we have here and then we can save it right here nice so then we can copy this one and we can add another one for this dashboard is going to be slash user and then we can have the user and then this is going to be the person icon as well nice so right now we have this one let's render this one so it's going to be a link that we have here that maps and then we can d structure from this one is going to be I think right here and then we can return the link and we're going to use the next link and the H is this one is going to be the get we going to get the value from here so we're going to have the link and the index that we have here okay so for this one we can use a key as an index and right here we can destructure this one we going to have the HRA and this one is going to have the tech and we going to have the the icon and for this one let's just use this one as a h ref and this one let's fix this one by adding in that great so right now let's going back um and this one we're going to display the tech of this one for now just show the text and let's use this now link inside our layout and inside here I'm going to go with the nav link and let save this one so right now we should be able to see this one great so and then for this one I'm going to give the space of this one to space y to five so we have a little bit of space between these two great so right now inside our now ling let's do some styling of this one and this one is going to be Flex item Center and the gap of this one to five so we have a little bit of space between these two and inside here we're going to render the icon so let's do that so we can to have the icon right here and also another one is just going to do the slash all right so right now we have this so let's tie our link so our link right here I'm going to use the CN this one from the shat CN and then that's created for us and this one is going to be Flex item Center and the Gap is this one is going to be one all right so right now we have this one so for this one I'm going to give the border to B and then we're going to do PB to two as well so right now we should be able to have the space and so right now when we hover on this one we should have the text underline so hover underline very nice and then I think we can do the transition all for this one as well right now let's implement the active link so whenever the user stay on this one this one should have the green color so for that let's go and use the path name it's going to be equal to use CL name and when we use this one we need to transform our component inside the use client okay so right now let's going back right here so right here we can check the condition uh and then we're going to do is pass name is going to be equal to the hre that we have right here all right so if that's so we going to render Tech of this one to Green 500 okay so right now as you can see and also we going to do the underlying as well right so right now if I try to navigate back to user so the user right now is not exist yet let's create this user so let's go back inside the dashboard and create another folder of the and it's going to be user and then create a page TSX and we can run this snippet and then hit save so right now let's navigate back to the dashboard and then go navigate to the user so you can see this is stay there and then we can see this one great so right now let's focus on building the dashboard detail right here all right so right now we going to all right so right now we're going to go back into our dashboard page so inside here I'm going to create this one and then we're going to have the H1 is going to be the blocks so for our dashboard we going to responsible for the block table so right now I'm going to do this one let's keep it sty this one going to be text to Exel maybe to XL as well and then we're going to do fun of this one is going to be B okay great and inside here we going to have another one is going to be the Bon to create the block so we're going to do create and right here we're going to use the icon it's going to be plus icon and we're going to import it from this one and right now we should be able to see this great right here we're going to CH change the variant of this one to the outline instead and now let's make this one side by side so let's go back here I'm going to give the class name to deflect item Center and then we're going to do justify one is going to be between okay great so for this create right here when we click on this one it should navigate to the link of the dashboard block create page so for that let's going to wrap this one around the link instead and the h w of this one is going to be dashboard SL block SLC create okay now let's go here and this one and right now let's just create an empty page for this create page so let's go ahead and do that I'm going to create the block and and create another folder called create and right here we're going to have the page. TSX okay right now let run the snippet and we can leave it it is for now and then we can come back into our dashboard so right now if we click on this one make sure that it's navigate to this page right here great right now let's navigate back so so right here we going to have the block table so you can see this is show the title of the block and the statup of the block premium and the action that we have right here all right so let's build that so for that I'm going to create another component inside our dashboard component is going to be de block table. TSX okay right now let's run this one and let's import this block table inside our dashboard so it's going to be our block table okay so now let's close this one all right so right now let's go back inside a block table so this one is I'm going to give the class name of this one to border so we going to have the border and let have a little space between these two let's go back inside of a dashboard I'm going to give the space of this one to Y to five as well so right now we have a little bit of space great so for the background color of this one so so you can go inside this uh block right here and then you go into the block boil plate so I have generate the custom color for you so please go ahead and do that so which I'm going to copy from this one right here okay right now let's go into tel. config go to extend and we can paste this one right now we need to fix something right here okay great so right now we be about to use the BG gradient dark right here okay and click save this one make sure everything okay let's go back great so right now let's go block table and add this background color it's going to be this for color so you can see nice and inside here I'm going to do the rounded of this one to MD okay great so right now if we look at this here we have the table header and then the table content so for that let's build a table header so inside the table header right here we're going to have the title and and then we going to have three of this one going to do this and there we go and right now we going to have this one is another one is going to be the premium and another one is going to be the publish okay all right so right now let's try to use the crit for this one instead so grit and the grit of this one is going to be crit call of this one is going to be five and and so because I want to use the title right here the call span of two so I'm going to do call span to two so right now I take up the two space of this one and this is the three and four the five will be the all the action okay all right so inside here I'm going to give a space of this one it's going to be the P5 so right now we have a little bit of space and the tech of this one to gray 500 and let's give the Border B of this one okay okay right now we have this one right so for this one let's go into the block detail let's go that and the same thing for this one we're going to give the grid of this one to grid call by as well and then we going to have the uh the content of this one this is going to be block title but now we can just use a default block title and give a space of this one I'm going to do P5 as well all right great so right now we can have the status another one which this three and for this one H1 right here we're going to do the same thing going to do cold span to two so right now this one is under this one and then we're going to have the action all right so for that I'm going to create another component called action and then we can just return right here and we can have this div so the action is going to have the to view and make sure I import from this one and let's just copy and make this three of this one all right so right now and then we can import our action back inside our table be action right here right so right now it will look something like this so let's do some styling to our class right here so for this one I am going to give the this one is going to be Flex item Center and the Gap this one is going to be five all right so right now as you can see it will be exceed our width right here but we're going to change flick this one soon and for this one let's give the variant of this one is going to be outline instead of ghost instead of the default one so we're going to do the outline great so right now we have this one so let's fix the layout of our table so for our layout of our table let's go ahead and give the width of this one to the max uh with 800 pixel and then from the MD up we're going to go with to with full okay so when we do like this the whole content is going to be this a scroll but what we wanted to do on this one is we want to wrap this one with another div and then we can give this one the Overflow to Y to X to Auto okay so right now it will be scroll inside here I guess for this one right here we can give a flex wrap or we can increase the width of this one so for example we can go with a 900 oops this one go to 900 so we scroll we should be able to see or we can do something like this and so for this one we're going to do deflex wrap on this one so you can see and then when we on the larger screen we can do the flex uh row instead okay so this one is from the SM so we can do on the up let's do Flex row all right so right now we go on the larger screen okay so we can see this one I think because of the layout here too small that why that's why we push it to this layout I think it's fine for this one it's okay I think uh we do not have to change this one so maybe we don't have to to do this so right now let's change this layout to view and then add some icon to this one so this one is going to be I op icon I'm going to use this one so right now you can see let's give a class name Flex item Center and GAP this one to two and let's copy this one and make another copy of this two right here all right and then let's do this one create and then for this one let's do for instead of this one it's going to be delete and then we're going to do import the trash icon it's going to be the trash icon right here here all right so maybe I don't want this one let's do another trash icon so this one right here okay great and another one is going to be uh edit and this one is going to be the pencil icon okay great so right now we have this one let's go back and voila all right okay great so maybe the Gap right here should be maybe two rather than five and and okay so right now our block is okay so the next thing is the publish right here we use the switch instead of the title of this one so later you can user can tuckle and then update this one instantly so for that let's use the switch so go to shaten and search for the switch and inside here you can come back this one and click on the npm and open our terminal and then uh and then run this one okay so right now will install our switch and if you look at the code it's pretty simple and first we need to import this one I'm going to import this and then we can later on use this one inside and then replace it with right over here so right now we can use our switch and then we can do it right over here as well and the default value for now let's just check this one and two false and the publish is going to be true okay so right now let's go back we should be able to see the switch and this is our component as well great so right now we finish this one so for this one right now we can keep it as it is for now later on when we come back we read data from super base and then we can do this datally and the next step that we're going to focus on is going to the create page right here all right so right now we're going to work on the create block form so as you can see this is what the demo look like so we have the block title and the link in image URL that we can use with the an Flash and the block content all right so let's do that so right here right now if I try to go into this page is empty so let's work on this one let's go back to apps dashboard block and then we have the create page right here so for this one we're going to use the form from shat CN so please go ahead and install that so I'm going to go and try here search for form and when we scroll down you we have to install this one so I'm going to click on npm and open the terminal and then we can run this one okay so right now while this installed so we can go inside the documentation and then we can choose with the input right here and right now you can go to code and then we can copy all the content that we have here so coming back into our page and also our installation is complete as well going back here you can see we can just paste everything that we have right here all right so right now we have to install a couple things to make this work so first we need to install our input so for that we can search for the input and then we can do install for this one as well and open up terminal and run this one and the next one is going to be the toast right here so let's do that let's toast and then come here install and then press install the toast great so right now for this toast to work we need to go into the layout and then we going to import the toaster make sure that this one is complete and then we can come back here then we can call this one the toaster okay so toaster component great so right now navigate back into our page and then we can export this one as a default function so default and change this one to block form okay so right now when we navigate back we should be able to see something like this when we submit we should be able to see the toss as well which is really nice so right now let's transform the form right here and change some style for this one I'm going to give this one to a width to full and let's give a border of this one we can to have the Border as well all right great and the round it is one to MD okay so now we have this one so let's work on the form item that you can see right here so we have this a menu that we can click on preview we tuckle the premium and P publish and the puton to save as well so let's do that so inside this form I'm going to create another one is going to be this one this D right here and right here I'm going to give the class name of this one to pii and then we're going to have this one so right here we going to use the span as a preview Bon okay so the reason that I use the span as a preview Bon is because if you use bhon it will act as a submit directly so for example if I click if I use the bhon instead and if I click on this one so you can see this will automatically submit but what we want is that we want a preview here to chug all the state so that's why I use the span instead and for this one we can change the rle of this one to utong and then we going to have the Tap index of this one to zero as well so when we doing this one so as you can see when I do tap on this one it will tap on the preview as well okay great so right now let's do some style to our bong right here we're going to have the I opens icon right here so right now there you go and let's do some style at this one so class name we're going to do flex and then we're going to do item Center and then gap of this one to one and let's do the border of this one and then let's do the BG of this one to I'm going to give the BG to Z 700 okay I hit save and to make this one on this one I'm going to do Flex and then let's do the uh let's do flex and then item to Center and then we're going to do Flex wrap later okay we're going to do Flex wrap all right great so right now we have this one and then this one I'm going to do the PX to let's do p to two and then round it to MB as well great so right now we have this one and so when we hope I want to give this one to a ring to two and when we H I think this one when we do H okay so H we ring two and H ring of 64 you can see when we H we have this one nice and then we can have the transition all for this one as well all right this is looking great so now we can do another things for this one another one is going to be the switch one so the switch right here is going to be the feeli of the switch like is the feeli right here yeah so for that I'm can copy this one and I can paste this one and instead of the username I remove this one the input control also remove this one also remove the message here also remove as well so right here we can just put the switch component and we can import it from our component right here very nice so right now we have the switch I think for our Fleck right here let add the gap of this one to five as well nice and so for the switch right here we can have more information inside such as we can have the text is going to be a span is going to be premium and then let's do the style of this one it's going to be Flex item Center and the gap of this one to one and we can do the same thing we can have the border and pg6 this one to 700 and we're going to do P2 as well okay and then we're going to do round it to MD right now we have our switch right here which is really nice okay great so for this one let's add some icon for this one is going to be the star icon this one all right so right now we have this one great so right now we can do the same things for this one I'm want to copy to another one and this one is going to be publish publish and then this one is going to be the rocket icon instead and this we use a switch as well okay great so right now the next thing is we're going to have the bhon to submit and this one is we going to use the bhon and then the Bon right here all right so I'm going to do this and this one is going to be a save so we can have the function of the saves right here so this one is going to be the BS copy I think from the react icon let me import this one so come back here I'm going to import BS copy from react icon SL BS all right okay look like it's okay I think this one is okay and then we can just do BS copy right here oops oops all right so right now we have this save and then this one let's go with the class name of the flex item Center and then Gap this one to one okay I think uh it's not a BS copy I think it's a BS save so right now I use this wrong it's going to be BS safe okay and then we can come back here and then we can change this one to BS safe so we should be able to see something like this nice so now I want to push this one to the edge so you can see when we on the largest screen this is close to each other but when on the larger screen I want this one to at the end of this one so to do that we can uh wrap around the component uh this one with another diff right here and then we can do something like this and now for this one this parent so we want it to be justify space between and this one it just give the class name of flex Gap this one to F and then item to Center so this one is will flect back but if we go on the larger screen so you can see this is at the end and this is at the front all right so very nice all right so right now we have this one I think the Gap here is unnecessary we can remove this great so now let's go back inside here as you can see we have the Border uh below this one as well so let's do that let's do PB and so I think we should should be able to see this one right so we go here I think this one border B nice so right now we have this one okay so right now we click on preview like this one this one I should switch into the edit mode so for that let's go inside the lock form and then we're going to do is preview and then set preview is equal to use State uh use State and then this one is going to be fall so for this use State we need to import uh this one as well that let's click on import this one will Auto Import for me and right now let's uh implement this one so inside here and we on click on this one I want to uh let's do something like this set preview to not preview okay to not is preview and then so we can render if it it is preview we're going to render something here else we're going to render something else here okay make sure you do that so for this one I'm going to copy this one and paste it right here and past between these two okay so right now this one is going to be edit and then this one is going to be the pens icon instead right now when I click as you can see we tle between edit and preview very nice okay so right now we have this one so right now let working on this one right here so for this field right here we going to I think we can focus first the on the schema of the bomb first so our schema is we're going to have the title which is going to be a um string this is going to be a title and let's do this one more and then we're going to have the image Ural which is going to be a string as well and this is going to be the URL okay URL and then we can to have the message this one is going to be in wallet URL and another one is going to be content which is going to be a string and then we're going to have a content and we're going to have is publish which is going to be the Boolean this is going to be strings do bullan not string it's just like the bullan right here and then we can do copy this one oops can copy this and this one is going to be is premium all right so we hit save this one so right now we have a bunch of error so for example the title right here and we can have a default value let's say the content is going to be empty and for the image Ur we going to have the Mt is premium is going to be false and another one is going to be is publish is going to be true okay so this is the default value so let's add this default value to our this one so this one is going to be the is premium okay so name is going to be is premium and the switch right here we check is going to be fields. value and we're going to do uncheck chain we're going to call the Fields do onchain okay so right now if we go back we should be able to see the tuckle between these two great right now I'm going to copy this one and let's go into our switch as well and here we can just change this one to is publish and if we hit save if we refresh this one so you can see by default is publish is going to be uh published okay so as you can see all right nice so right now this one is going to be the title and then we're going to have the input right here okay nice so right now we have this one so let's actually do some styling to this input for now all right so here I'm going to wrap this input with another div so I'm going to has input here so I'm going to give a class name of this one to P2 and then uh and then we going to do the width of this one to full okay so right now we should be about this I think the message shl right here should be removed okay and then for this one I'm going to give this one a title instead all right so right now one thing that we wanted to do is that if you go into our dashboard we should be able to see that when we on the larger screen we should be able to see this content when we type immediately so and then when all larger screen this one is UND display okay so for that we can do the same thing so we can have another field which is going to be the input value that is going to uh show this value so this is going to be the form let get field State okay uh I think this one is to get value and then it's going to be do title all right so right now if we type on this one so you can see this is at the bottom right here so we want to read this one to be side by side and so for that for this one I'm going to give the flex and then I'm going to give this one to Break words and and then I'm going to give the gap of this one to two all right so right now on the larger screen we should be able to see something like this okay nice and so for this one uh I can use the uh CN class so then we can do some logic into this one so we you CN and then so right here we can pass our string back okay and right here we can check if it is preview when it's on preview I'm going to do the the Y of this one to xal to zero L if going to be X this one okay so right now when we on the larger screen so you can see that uh I think when this one when so we it's not on preview so we can see this when we on preview we do not see this one okay all right so right now let's focus on adding style to this one so for our input right here let's give a class name of this one and I'm going to use the CN for this one as well so this one is going to be the Border first is going to be to none and take this one to LG I'm going to do the font to medium and I'm going to do leading to relax so this one when we type on this one so you can see great and then for this one let's do when it's on preview we can do the condition as well so is preview so it's on preview I'm going to give the width to zero and the P to zero as well but if it's not on preview I'm going to give the width of this one to full but from the LG up I want to WID this one to and a half of screen only all right so right now when we on the larger screen so you can see this one is only the width half take half of the space only but when on the this one is going to be with full so for now we need to UND display this one on the largest on the smallest screen okay all right so for that we can come back here and so for this one I'm going to use class name I'm going to use the CN as well and then for this one let's do the ALG PX to 10 and then for this one we can check if it is is preview and we're going to do a Max this one Auto you want this one to be Center and then the width to be full and then from the LG up we want to WID to 4 over five okay all right like else if it's not like that so we're going to do width to one and two but from the LG up we can show this component but uh I think this one is going to be block else we're going to go with hidden okay go with hidden and then we can do this All right so right now we hit save so right now we should be able to see something like this so right now since this is on a preview uh and on smaller screen we do not see this one but right now let's say for example when you type and you click on preview you should be a to see this one okay so now let's do some styling to our title so this one is going to be text 3 XL and then font is to I think Medium as well fun medium and all right that pretty much it so this is right now we do this and voila this one and right now let's actually add some space between these two if we scroll back this should be right here so right now let's add the gap of this one to five okay great so right now we have this one and voila it's nice so right now this is in preview mode but when we on the larger screen it looks something like this okay this is look good so right now let's work on the another one is going to be the image Ur all okay so right now what we want is when we type on this one so you can see I want to revalidate this uh form right here so for that we can go into our form schema and then we can change the mode of this one it's going to be to all mod and then we hit save so right now I think we should refresh this one so as you can see when we type on this one we should be able to see this uh instant right here great so right now for this message right here let's add some Style on this one and so for this one first I need to check on this one form. get field state of the title and is invalid and I'm going to do n the form. get value and the value is going to be a title and then we can render this one okay so right now I can cut this one and then I can do the end operator right here this is going to be form message right here we only see the message if the user typed so for example if user not type we do not want to see this one and okay so when right now when it's valid we can do something like this and another thing is like for the save function right here we we want it to be to disable if the form is in it so for that it's going to be disable is equal to form do form state. is wallet right here and then we can do not operator right here okay I'm going to do not operator so right now as you can see this form is disable we cannot type unless all the field that we have is valid so right now we need to work on another field which is going to be the MH URL all right so for this one it's going to be really simple so for this I'm going to just copy and paste the field that we have right here all right so I'm going to copy this one and then we can add another one and that this one is going to be the image URL okay all right great so we can change from this one to the uh URL or we can do image URL all right great okay so since we have the space between these two as well and voila so this is going to be typed um Ural and I think this is should be invalid so when every time I type but this is we as as you can see if we go down right here this is not going to be the title this is going to be image URL and this one is going to be the image URL as well all right let hit save and right now I think we can do some styling to this one I can wrap this one around a diff and let's give a class name of this one to p uh two okay so right now it's a below right here very nice okay so right now let's work on to display the image URL so the image URL is not going to be render as a tech it will be render as an image right so right here we're going to do if it is preview so we we want to image to only allow user to see if it is on preview okay all right so right now we can come back here and so for that if it's not on preview if we have this value we show the user I think if it's not on preview and then another one we can do something like this else can do something like this so right now we can have a message to the user let's say click on preview to C image okay so right now if you come back right here if the user click on preview you can see click on preview to see the image okay so right now the user need to pass this one and then we have this one okay all right so if they click on preview right here is where we going to render our image so for that we can wrap this one inside the div and then we going to have our image is going to be from the next image and this one is going to be relative okay relative and the sour of this image is going to get the field value so it's going to be form. get value and the value is going to be the do image URL okay and then the L of this one is going to be preview and this one is going to be fill and we're going to have the class name object to cover and another one is object to Center okay and all right so this one let's hit save so right now this one we can see this one whenever we click on preview so when I click on preview so right now we need to register the UN flash image so right now the form field right here we going to support image from the UN flash only so for that let's go into our next config not this one so let's go into our next config and add another one of this one so the host name is going to be this and the protocol is going to be https okay so when we chain this one we need to restart our server and so we can do NTM run Dave again all right so right now let's test this one again so I click on this one click on preview and okay I think what's happening right here all right so it's look like we do not toggle between these two on preview and click on preview all right so right now we do not have the image let's fix that and go into our page right here and inside our image right here we're going to give this one to height of this one to 80 and let's do Mt to 10 let's do the border and then round it to MD okay we hit save we should be able to see the image and this one is going to be rounded to MD as well rounded MD okay great so right now we should be able to see this on a larger screen nice I think maybe the Mt of this one should uh go for f only maybe let's go with the mt25 great all right so right now we finished this one let's move on to another one which is going to be the text markdown so for that I can copy again from the input field because this is an input as well so we go here and the load is one I'm going to paste this one all right so so right now instead of this one is going to be the content and this one is going to be the content as well okay and then from this one we going to change this value to content instead of the input all right okay right so right now we have this one but this one is going to be the text editor text area so for that let's go into the text area and then install this one I'm going to copy this one go back in our terminal and then we're going to install this one great so right now we have this one let's import this one inside here this is going to be text area okay and all right let's hit save so we should be a to see this Tech area so we can resign or anything let's do some styling to this one so for this one I'm going to give the reside to none and the height of this one 27 BH okay so let hit save so right now let's go ahead okay it look like the 7 VH is not apply to this one at all so maybe I think we can add the 7 VH to this one I think for if it's preview it's not preview right here so it's going to be high to7 VH and right now as you can see we have this one and the height of this one let's go with the height full okay let's refresh this one okay so right now as you can see our height is go with to 7bh and so when we type we should render this one right here okay so right now let's go back and inside here so this one is going to be the content on and if you click on preview we should be able to see this one I think for this one we going to render as a macdown so for that we need to build the macdown preview first all right so so for the macdown right here we're going to use the react macdown so for that and let's go come back inside our component and let's create a new folder called macdown inside here and this one of I'm going to do create the macdown preview. TSX okay so right now let's render this one and this one is going to accept two parameter which is going to be the content and another one is going to be the class name let's give a type of this one it's it's going to be content which is going to be a string and we're going to have the class name which is going to be a string as well great right now we can use this content to render between these two okay so right now let's have this one and so we can use this macdown preview inside our block form which is going to be create right here and if we scroll down right here it should be between this one right here okay so right now I'm going to replace this one with the macdown macdown preview and then I'm remove this copy this to here and if you go into the class name so for now I'm going to give a class name is optional so it's going to be something like this okay so right now let's hit save so ah I think for this one we need to pass the content we not pass like this this is going to be content and we have this field right here okay see this is wrong okay great so right now if we going back here we should be able to see the macdown if for example if I Tye and I click on preview and we can see this one all right so right now as you can see this is UI is broken let actually fix this one a little bit so for that let's go up here and for this one we're going to do the flex uh wrap as well all right okay not this one I think huh let's cut this one ah this one right here the rep should go here as well all right great so right now this the UI is not broken okay great right now let's go back and focus on the macdown instead let's come back here to use the macdown I'm going to use this one please go ahead and install this this one I'm going to copy and right here I'm going to do npm install react macdown and I and another one is we going to install is going to the rehab highlight right here so let's go ahead and do that and copy this one and just press enter so for the rehab highlight this one is going to highlight our markdown and I like the block Cod okay so right now this one is complete so let's go ahead and use this one so I'm going to input macdown from react macdown here and then we can use this one between this two right here so right now if you use the smackdown and everything should work at the same way so you can see let's focus on preview and right now let's give some style of this one so for example let's give the right content so for example I render the H1 and then let's do the H2 and H3 so this one is going to be H2 this is going to be H3 okay so right now let's go back huh I see for this one we need to have some space between these two preview so you can see this is H1 H2 H3 okay let's do some styling to this one so for that when we render this one we can do the component and then we can render based on individual component that we want so for example when we want to render the custom our H1 it's going to be something like this we can have a note and then we can have spread the prop right here and this is going to return back the jsx which is our H1 and we can just spread the props back okay so right now we can use the class this one to do some styling so for example this one we're going to do text 3 Exel and the font to bowl so right now you can see it look something like this and we can do the same thing for the rest of the content right here let's do H2 and H3 and this is two and this XEL so you can this one you can do customiz all the way that you want so you if you have another component that you want to customize let's say an aink type or the par of graphs so we can do that as well so for now I'm going to focus on the this Tre only and for the paragraph so for example if I type something right here and it will render something like this I think I'm okay with this one okay so for this one let's give a class name of this one and add a little bit of space between these two so what we're going to do is I'm going to use the CN right here and I'm going to do the space y to five to six so you can see we have some separation between these two and for this one let's add the class name that this is going to be the class the custom class name so in case someone pass the custom class name all right so right now let's going back here and click on preview or as you can see when we type right here it will automatically uh uh pass it for us okay great so right now the next thing that we wanted to do is we going to focus on the Block code so for example when I do something like this let's say the CH codes and like that I'm want to render the JS block code so right now it's render but do not highlight so in order to highlight this block code if we can come back here we can do the rehabs plugin okay and then we can import from that so input from this one is going to be from the rehabs that we just install rehab highlight right here and then we can use this one I think we can do something with this with the Highlight okay so right now we can put our plugin right here and if we refresh this one all right so right now I need to okay maybe we can just copy this code right here okay and paste and preview which should be something like this but as of now it do not have any highlight so to highlight this one we need to import from the Highlight JS so we're going to UT from highlight.js sty so if you I have different style for this one so we can go ahead and check this one as well let's go ahead ins inside the note module and then you can find the highlight.js I think it would be right here you go to starty and then you can see we have different style of this one and also you can check the demo of this one as well if you go to highlight.js and you will be able to see the demo of this one and with different sty that match this sty of CSS right here okay so the one I'm interested in which is this one so I'm going to cop uh I'm going to copy the name of this one and then we can come back here we can import this St right here okay so right now if we go back and let go back to edit make sure I save this if I refresh this one click on this one again click on preview okay so right now it look like our was sty is not render all right that's weird let's do it again so we do this okay and click on preview all right so why is not happen Okay so okay I see because right here we can use we need to use the rehab plugin not remark plugin so we need to use rehab plugin so right now as you can see our code of block is being render okay nice so right now we can custom our code block into something that we want so the way that we do that we can use the code right here and inside here we're going to have the note and we have a class name and also we going to have the children which is the content of the code and we going to have spread the prop right here okay I think we need to do something like this and right here we can return this one is going to be return the block of code so or if you want to kind customize this one as well so right now for example if I return this div so this one is gone because right now we just return empty d okay so first what I want to do with this one I wanted to get the language from this one so you can see when we do this back deck right here we can get the language the JS and seem like like that right so if the user not pass the language for us we're going to do some another condition so for that to get this language we can do something like this so I'm going to paste this one so this one is will do some record from our class name to get this value right here as you can see all right so right now from this one I can check if the the match. length so if there's any match that the user provide to this one and then we going to do something to this one else we can just return the code so I'm going to return the code right here let's remove this one and so we can pass the children that we have right here okay so right now for example we have this paragraph it like hello world and the way that this work it will act as like a highlight so when preview we'll return the hello world and then we can add some style to this one so for example we give a class name to BG this one to Red uh let's say 400 and maybe I think it should be 200 uh n 700 and then let's do round it to MD and then PX to2 okay so this is act will act a highlight so we can change the color we want maybe we can use this color instead okay great so right now let's focus on building the block code so for this one is we going to return a diff like this and I'm going to give the style of this one to BG to gradient that we just uh added so it's going to be BG gradient this is going to be gradient do all right and the tech of this one to gray 300 order this one and then we're going to do round it to MD okay so we hit save we should be say something here and right here we're going to have another div inside so the first part is going to be if you look at the dashboard that we have so inside here so for example if I do JS code right here if I click on preview we should be able to see this icon and the copy Bon and the content right here here so this is where we going to do the icon and the copy Bon and this one is we going to surrender our content right here okay right here I'm going to add another diff and then right here we can have the children and this one I'm going to give the class name to pii pii and then for this one I'm going to give a class name to overflow X to Auto and the width is going to be full okay so right now if we going back we should be able to see the block of code right here all right so I'm not sure why our gradient is not working right here so it's going to be BG to gradient and gradient do right here if we hit saves all right so right now we have this gradient do which is look really nice great so right now we have this one so let's work on the render the icon and the copy we don't all right so right here for the icon I'm going to let the icon is going to be equal to the default icon so for now I can just import from react icon and I'm going to use this icon right here P terminal uh Pi I think this one we need to do SL pi as well and right here we can do PI terminal and this one is going to it's going to be Pi terminal and Sy right here okay so right now we can use this one and then we can use this to render the icon right here okay so right now let's make sure that this one is working so right now you can see we have this terminal icon so let's do some styling into our this one right here and so for this one we going to do the PX to five then py to two Okay and then I'm going to do this one to the Border to be so right now we can I think this misspell this one so right now there you go we have this one nice so right here we can have to display the for example when we edit right here we we can do the let's say app.js so we can get this value as well so to get this value we can use it something like this right now I'm going to have the span for this one and to get that value we can do note do Theta do meta okay so right now we can do something like this let's hit save so you can see we have this one really nice so right now I can wrap this one in another diff so for this one we're going to do Flex item Center and then Gap this one is going to be two okay so right now we have this value nice so for this one it's going to be error so one thing that we can do on this one we can just do the TS ignore going to do add TS ignore all right right so we're going to ignore this line great so right now we have this one so the next thing that we wanted to do is we going to build the copy right here okay so for that I'm going to I'll go outside right here and I'm going to create the copy Bon so going to be copy bong. TSX so we can run a snippet orc and inside the copy Bon right here right now I'm going to hit save so we can cut this one and then we can import it back inside our the terminal so this one is going to be uh this one okay and then we can just click save this one and this one will Auto Import for me all right right now this one is gone so we's try to add something here I think for the code right here we can just copy this one oops and we can paste this one right here now let's preview and we have this copy bhon okay so for this copy bhon right here we going to do the flex so make this one to be at the end of this one so for that if you make sure we do this one and as you can see we have this one right here so we're going to do Flex item Center and then we're going to do just the five between okay great so right now let's work on the copy Wong all right so for this one I'm going to use the icon so it's going to be BS copy from react icon right here so right now you can see we have this one so let's implement the function copy on this one so it's going to be handle copy is going to be equal to uh this one right here so right now we need to get an ID of this block of code right here so when we click on this one we're going to select the block of code and copy it so for that we need to get an ID so an ID of this one is going to be a string all right so right now let's come back here we need to make sure we pass the ID of this one where do we get this ID so this ID is going to be generated I'm going to do it soon and we going to pass the ID right here to the block of code right here so this is we cannot use the same ID so that's why we need to generate an ID for this one so in order to do that so we can do something like this for an ID so C ID is going to be equal to math. floor and inside here it's going to be matt. random and it's going to be time 100 and then we're going to do plus one right here and then we convert this one into the string okay we convert this one to string and right now we should be able to remove the error we pass the ID to our copy Bon right now we can implement this function so going back into our copy right here so we can get the text from this one is going to be document. get element by ID which is our ID right here and then we're going to do the text content okay right here we're going to do try and catch so we're going to do try and then we do catch here and then we're going to do a wait Navigator do clipboard creator. clipboard and then I'm going to do write text with the text that we have and then I can do something like this and right here we need to ruce an aing so if we have an error we can do consoles. loock error copy okay so right now we can come back here we can call this one and then we can call this one on click and then we can call and All Copy great so right now if I click on this one and right now let's see we can control V so you can see we be able to copy this one great so right now let's try to add some styling and to this one so for this one let's do the P of this one to two and then for when we h on this one let we do scale and then this one is going to be the CER pointer when I hover so you can see we have this one and also let's add the hover the background so over DG to 700 okay great and then let's do round it of this one to MD okay great so right now this is what I want right so right now when whatever we want is that when I click on this one I want to give the feedback to the user that okay right now the comp the copy is complete okay so the way that we do that is we going to have the state to hand to keep track of this one so we're going to do on copy and we're going to do set copy is equal to use State and this one is going to be Fall by default let's Auto Import this one and from react and when we do this one make sure that we do this one is going to be use client okay and another one is going to do on done and then we're going to do sets done okay so when we complete this done me okay so right now on this one I'm going to wrap around this one with another diff and for this copy right herey I'm going to give a class name to height to full and then the width to full as well when we absolutely Loot and top to zero left to zero we're going to do Flex item to Center and then we're going to do chestify to Center as well okay so right now we have this one okay I think then we need to add the relative to this one okay great right now it's right here so let's give a class name of the uh copy right here so this one I'm going to use with the CN class as well so this one I'm going to do the transitions to all and right here we can check if it's uncopy right now let's do uncopy I'm going to do this one to scale to zero all right L I'm going to scale this one to back to 100 all right so right now we hit save so when I click on this one then I make sure that I need to set copy this one to True okay so set copy to true so right now when I copy this one so you can see it's gone right here great so right now we need to show the user that the copy is done and then we need to import the icon so I'm I'm going to import one icon from react icon as well it's going to be from the io file right here this is going to be IO checkmk outline okay now we can do the same things for this one okay so right right now when we click on this one so you can see one is gone and we can have this check right here and we want the check right here to appear if the copy is complete as well okay so for that I think we can do something like this on transition N I think uh it's probably right here on transition n so then I can copy this one because this one is do not give me intelligent and so we can do something like this so when on transition and can do if on copy all right if uncopy going to set done to True okay great so right now we can give the class name of this one all right so class name and I'm going to use the CN as well and for this one let's do the curer of this one to pointer transitions to all and the width to five and hide this one to five as well and we're going to do text green to 500 and this one we're going to do if undone we want to scale this one to 100 and else we want to this one to scale to zero let scale to zero and then we do something like this okay so right now if we click on this one so you can see that it's show the user that it's complete but also we want to go back into the copy so for that we're going to do the same thing we going to do on transition end and right here we're going to do set time out and then right here we can call this one for let's say five 100 millisecond and then we can reset everything so we're going to set uncopy to fall and we're going to set done to fall as well okay so right now if I click here there's my animation it will pop back as you can see nice right now make sure that the function copy is good great so right now our function is complete so let's actually test this one we go toit at image URL at random title right here and click on preview we should be able to see this one and so whenever we type we should see this one actually make sure that the uh this one okay so right now we have one problem that this is Overflow so we can flick this one so then we can complete our editor right here so for that let's go into the block form which is create right here I believe if we scroll down we can go down to markdown preview right here this is where it is I think the px10 right here is not necessary so I can remove this one and for this one I'm going to do the Overflow uh y to Auto so right now if we go back here as you can see right now we can be a to scroll this one as well so we want to have the same height at this one so when the user type they can see this one immediately okay all right so maybe we can add some patter in uh between these two so we can see it easily so going back here and our form I'm going to go with the PB of this one to 10 okay so right now I can have this one so when user they type so we can see this one immediately okay okay great so right now if we go under preview so user will be able to scroll something like this okay all right so right now our this one is complete and make sure we click save we can get all the value and everything is responsive is it scroll down right here as you can see okay all right so another thing that I forgot to do as you can see right now this is a JavaScript code but we render the icon of the terminal so one thing that we can do is to render the right icon ion for this one so for that let's go ahead inside the lips right here I'm going to create a new folder called icons and inside here I'm going to create a file called index.ts okay all right great so right here I'm going to export con icon is going to be equal to so for example this is going to be an object of key that return an icon right here is going to be SI JavaScript so from Thea react icon s i right here you have all the language you want so for example if we want to have reacts we're going to have to SI reacts right here all right so we want to python so right now I'm going to make three of this one going to be SI python okay so right we have this one so let's use this one inside our preview right here so first we're going to check the match language from here so because this match right here will take all the right here the JS or the sh from here is we going to do is match is going to be equal to icons start has so we need to import the icon first so the icon here has own property and this one is going to be icon okay no no no this one is going to be match index one all right great so right now we can check if this match right here is one of the key property so we can change our icon from here it's going to be equal to Icon going to be equal much in the one and but we need to cast the type of this one it's going to be key of type of icons right here all right so right now we hit save this one we click on preview you can see this render with the right types so for example if I change this one to Pi and it will also change this one to python as well great all right so the next thing is for the image URL right here if I type just a random string and I click on preview this is going to fail because this is invalid URL the next image is going to crash so for to fix this one we can first not enable user to click on preview if the image URL here is invalid okay so to do that we can do not form. getet field State and the field state right here is going to be a make sure all going to do this in invalid okay so right now if this invalid we cannot click on preview all right so the next thing is that for example right now if I try to put an URL right here click on preview this is still not support because right now our image is support only from the UN flash only so to fix this one we can come back here inside the form schema and then we can do write some validation code for this one okay so for that we can do refine and then we can have data and this data we can get the URL is going to be data do image URL okay so maybe this one is going to be image URL and for this one we're going to do try and catch of this one so if it's a catch this one if it's going to be fail if there's an error and this one we're going to have the get the URL so it's going to going to be URL is equal to new URL with the image URL we have here all right so right here we're going to check if so all we can just return the URL do host name is equal to the one that we going to add right here so right here this is the host name that we support so this is the image that we support only so if you have another support image host so you can add the include instead of equal right here all right so right now now we need to pass the message for this one is going to be the message right here we can say um currently we uh support only the image from unlash all right and then we need to specify the pass for this one as well so the pass for the the message is going to be image URL all right so right now if we try to go here you can see we validate this URL and see that this is not from the N flash image and then this is going to fail and but we when we use the image from the end flash right now is a put and we can see this one all right great so right now look like our block form is complete so right now the next step that we going to do is focus on getting this one and save to our database all right so now we're going to create a table to store block content and so for that I'm going to create the new table called block and this one is the ID is going to be U ID and this one is going to be the title of the block we're going to have more column right here so the next one is going to be the image URL and we're going to do this one is premium and another one is going to be is publish so that pretty much it so now we're going to give the type of this one this is going to be a text this is going to be a tech as well this one is going to be the Boolean and by default this one I'm going to choose fall and for each publish right here let's go with the default value so this one is going to be bulling as well and the default value is going to be true and for this one is not nullable everything here is not nullable right okay so right now let's save this one so we're going to create another table is to hold the block content so as you can see we have this one it's just a block information another one is going to be the block content and then this one is we going to do the one to one relationship so that's why we have the block ID here and this one is going to be Type U ID and this one will be linked to the block table an ID we do cascate if we delete the block we will delete the block content as well and right now we going to have only one field this one is going to be the content and the type of this one is going to be text okay so the reason that I split this one because the content here we going to protect it only atmin or subscription user be able to read on some post and some post is available that's why we can do this and then we can prevent user from reading this content but the title and the cover and things like that the user can easily read this one okay all right so now we have this one so the next thing that I wanted to do is I want to generate all the types here from super base inside our project all right so to do that we can follow this documentation so the first one we're going to install super base inside of a project so go into our terminal and install this one right here and as you can see this is in da dependency only so the next thing that we wanted to do is to log into our super base so right here we're going to do log in so when you lock in right here so it will prom you to the super base dashboard and you can just copy this link and then you can paste it right here so right here you can generate a new token for this one I'm going to give the name this one testing 02 and right now you have this token and then you can just copy and paste and use it to lock in please don't copy my my SS toen all right so the next thing is we going to run this Command right here right now we can just paste so this one is going to need the project ID so this is where we can get it from the super base dashboard come to API and this is the reference ID and so you can paste it right here and this is where we get can tell them to where it's going to write this this type so for this one I'm going to give into the lip SL types super base so right now let's create inside this folder let's create a type and then just press enter right here all right so I guess we can just run so right now it will generate the type so if we go back here we have the super base right here very nice all right so when that done right now we going to inside the app right here so if you look at this component right here this is create component but if we go back into our dashboard this component will be responsible for edit as well so for that we going to make this component reusable and we can use both in for create and edit so for that let's go inside our app dashboard block and create right here so I'm going to copy and paste everything right here and and then inside the component right here I'm going to create another component called the block form TSX right here so right now I can just paste this content and we can have everything right here all right so right now we hit save this one so another thing that I wanted to do I want to cut the schema the form schema here into another separate file so let's go ahead and do this one inside of a dashboard create another folder called schema and this one is going to be schema. index.ts okay and then we can just paste this one and right here we need to come back and import our Z right here I'm going to cut this one and can paste I'm not going to cut just going to copy on all right so right now when we have this one so we can export this one and for this one I'm going to export schema type for this one as well as of now we can come back and flick this one let save and then you can see where this wrong so instead of this one I think for this one we can change to block form schema all right so right now we copy this one and we change this one to block form schem here and then we can do this this one will Auto Import for you and then we're going to chain everything from here okay so the next thing is I'm going to create this type of this form so I can just copy this one and so we can export block form schema type is going to be equal to this one okay so this one is going to be export type all right so right now we have this one and then the next thing that we going to do when we call this fun block form right here we're going to pass the function to handle submit so we're going to replace this content right here okay so right now we're going to do handle submit and this is will be a function and the function so let's keep a type of this one and this one is going to be going to pass the data and that's going to be return Bo and the data right here that we're going to pass is going to be the type of block form type okay so right now let's call the handle submit right here and then we can pass it right over here okay so this one we're going to pass the data to here okay so right now we have this one so let's go back inside our page right here I'm going to remove everything then I'm going to do this one and then this one we're going to do the block form and we need to transform our create page into the use client okay so right now the block form will need our handle so we're going to do handle create and then for this one we going to return and then we're going to pass the handle create to handleit right here we going to pass our function and I'll create right here okay so right now this function will accept data and then this data is going to be the block form typed and then let's go back in here so I can cut this Tas right here and then we can just paste it right over here and I hit save on this one and this one we can just control click and then we can see this AO import for me okay so right now we make sure that this thing is going to work do this one so right now let's add the title is one test 01 and they image all and then we're going to do add some content here okay right so right now form is not Mallet maybe let refresh this one so let's add again meure all and this one okay you can see this is wallet when we hit save you can see this task right here it's coming from from this one great all right so right now we're going to create the action to handle the create right here so for that I'm going to go inside of a lip I'm going to create another folder called action and inside action right here I'm going to create a page called block. TS okay so right here we going to create use server and right here we can create the super base client so for that we can follow this documentation you can go into the server client right here and right now you can just copy and paste this one right here all right so we can call create right here CR c contrl v right now we need to import this one and then we need to import the Cod key as well so I'm going to import this one and then we're going to call this one as well okay so right now the super base is ready so next we're going to create a function export function this is going to be the Asing function and this one is going to be create block all right so the create block right here will accept data and the type of this one is going to be block form schema type all right so the first function that we going to create see now where we have two table so we going to insert to Block Table first so for that let's go C so we can call super base do from so right now since we import the the type from super base as well so we can use it right here so we can do data database so this one as you can see it come from the super base so right now if we can use it right here we can see the give is intelligent of the table that we have inside here all right so right now we have this one so we can use from block and then we're going to do do insert and then we're going to pass the data right here so I think the data that we have here is going to be wrong because From the Block post right here we do not have the content F right inside this table so this is going to fail so right now let's try to exclude the data uh the content so the way that we do that we can do something like this so right now we have the content 10 and this one is going to be the excluded key then we can spread this one into a new one and then it's going to be data okay so right now we have this data so if you h on this one you will see that right now there's no content so then we can use this one inside here so right now we can do the weight on this one so when we insert on this one we need to select this one back and this one is going to be the ID and this one is going to be a single as well okay all right so right now we can have the result and right here we can check if there's an error or not so for this one we can do result block. error if we have this one we're going to return immediately so when we return this one we're going to do Json string F result block okay so if we do not have any error so we're going to do another insert for another table so for this one it's going to to be the block content all right and then when we insert into this one we going to insert the block ID with the result data. ID that here and then we can do this and another one is going to be content which is going to be data. content all right so then we can do this so this one is going to be just a result all right and right here we do not have to select anything back so right here one thing that we need to do we can just return directly Json stringy and then we can have the result right here okay great so right now we have this one so the next thing is like this one we're going to do revalidation as well so but for now we can keep it this we can come back later so we can have this function let's go back inside our page right here and then we can call this one so I'm going to call create block and we going to pass the data and we can call your weight right here so right here we're going to have we need to use an eing okay so right here we going to have the type of this one so we going to be result and then we can get the result from here it's going to be error then we're going to do Jon pass is going to be result right here okay so this is what we wanted to do great so right now we have this error we can check if any error that message if we have an error from this one so we going to toss the user an error l if we do not we're going to toss the user something else so as I'm now for successfully we can just toss the user successfully create okay Suess fully create I think we can have the block title right here data title and if we fail so we can just display right here the error do message okay so right now maybe we can this one we can do fail to create block great so right now let's actually test this one so this one is going to be test and the image URL with this one and right now let's give the fake content so you can see we have this enabled so let's click on this one so you can see we have this error very nice so this is the error from Ro seuality level well so for that we need to fix inside our table right here all right so right now we're going to add the policy to this one so for that we can go to block as you can see there's no roow security level so for the block content right here for read I'm going to allow everyone to read the reason is that the block here can be free so the user can come into our page and read the free Block but some content if it's premium we cannot allow them but if it's free so they can read so that's why for Block I'm allow everyone to read so I'm going to review and save this one so but for the block title but for Block content such as the title like that we allow only the admins only so to do that we can create a function so then we can do this easily so the function that we going to do I'm going to create a new function called is admin right so for is admin right here it's going to return Bull and then we going to do begin and end right so for this one we can select from user where I think not select St we can just select R from user table okay so where Ro ID is going to be equal to r. U ID okay so right now we have this one so then we can return this and then we can do equal this one to admin all right I think this is going to be a single quote only okay so right now we have the semic column and then the next thing we can security this one and then we can add the security definer right here okay so right now let's hit confirm on this one so right now we have this as admin so we can come back here go to policy new policy and for insert here and then use this template and then we can just call function is admin and right now let's hit and this one let's hit review and save Poli C so another thing that I forgot to mention is that you there's two way you can call to this one one way for this admin right here if you look we can read it from the user table or you can read it from the O table inside the session as well so either way it's fine so this is yeah all right so right now we can come back here we can add another policy to a block content right here so for this one for read this one as I'm now I'm going to only allow to admin only to read the block content okay so and then authentic I think probably we do not need to authenticate it and then this one let's save oh yeah for I think for the insert for Block content I think for select okay this is Select another one for the insert so for insert right here you need to be authenticated and you need to be an admin as well okay so right now let's hit save this one okay so right now everything should be fine so if we go back inside our block if we going to save right here we should be a to SU ESS created test right here great so right now if we going back to our table and going back here we can see we have the block content which is this one and then we can have also insert to this one as well all right great so right now we finish with the insert so another thing before we finish this one so right now if I try to post again so we should have some animation to the user to know that this is being uh doing that all right so for that let let's go inside the block form and then so right here we can do the transition so we're going to do is ending and then we're going to do start transition is equal to use transition okay so use transition oh no I think let's import it from react right here then we have this one okay we do not have yet so let's type this one it's going to be use transition and this one has come from react so we can just do like this nice so right now when we have this one we can call this one from here and then this handle submit we can paste it right here so right now for is pending we can go into our save function so our save right here we can give a class so right now I can wrap around this one and then we have a CN class so right now we have this one so when is pending so we can do like um animation Spin and for this one is is pending okay so we hit save this one so you can see right now it's not spinning so but when we type on this one let's say I'm going to do test 03 image URL and then we're going to do something here so when I hit save so you can see we spin this one so right now we spin the whole thing and then I think we can just do this one for the BS only I think for now I'm going to keep as it is great so right now the next thing that we wanted to do when we save this one we want to read direct user back to the dashboard right here so for that we can go to the page and then we can use this router it's going to be use router make sure that you import from use navigation this one right here and right now we make sure that this is application we use with the hook so we have this router and then we can call router push to the dashboard right now let's test again test four and then we have this image URL and then we have the title A content right here and then we hit save okay so right now you can see we redirect to this one but this one is still static so let's work on read on this one okay all right so right now let's work on rer this list right here so for that we can go into our block component and inside the block table right here so this is where our table so for that we need to render our list right here so so then we can go into our Act which is going to be Block action we can create another function to do this so this function is going to be export function and then the name of this one is going to be read block okay so right now we don't have to pass anything so for this one we can just call return super base. from block and then we're going to do select of this one is going to be star and then we can do order of this one and the order is going to be by created add and I'm going to do the ascending to True okay great so right now we have this block so we use this one inside here so then we can transform this function to the server action and then we can call read block and right here we can do the await and then we can have the data and the data is going to be the blocks okay great so right now we have this one let's actually use this one and run under our list right here so to do this we're going to do block map and we're going to have block and then we going to index so we can just return this one so I'm going to return at this one and then I'm going to have the key is going to be equal to index as well great right now you can see since we create four block we should have this one so then we can just change from the Block title right here to the block. title and the is premium right here is going to be block dot is premium and this one is going to be block dot is publish and voila so right now we should be able to see this one great so right now the next thing that we're going to do is to work on the delete first and then we can come back and update this to later okay all right so right now we're going to work on delete right here so what we want to do is when the user click on delete we don't want to delete immediately what we want is when user click we're going to pop up the dialogue alert and ask the user to confirm whe they want to delete it or not all right so to do that we're going to go into our block table and this is where our action is so you can see this is we going to do the action and the action is going to delete and for that I'm going to transform this one into the the alert instead so for that let's go into dashboard and component I'm going to create this one it's going to be delete alert. TSX okay okay to OPC and then we can cut this one and then I'm going to paste it inside here okay so right now we can Auto Import this one and then we can Auto Import this one as well great so right now we have this one and for this one we need the block ID that we want to delete and then I'm going to have the block ID type of is going to be string as well okay right now we can cut this one and then we can call it from here and this one is going to be a block ID and then we going to pass the ID right here so make sure we Auto Import from here and inside here we can to have the ID and the ID is going to be a string okay so right here we can get an ID equal to block. ID all right so let's hit save this one and if we refresh this one make sure that everything is working fine great so the next thing if we need to go back inside the shat CN and you can search for the alot alert dialog which is right here and we're going to install this one I'm going to choose npm open your terminal and paste this one right here okay so right now let's go back inside here so we can copy the code that we have here so this the first we're going to import this one and the next thing is we going to uh import copy everything from here and then I'm going to put it right here so right now we can cut this puton and can use it as an open right here so I'm going to replace this one right here okay so right now let's hit save this one let's go back inside of block table and if we refresh this one make sure that everything is okay so right now let's click on delete so you can see this is the confirmed outlock right now we going to implement the continue right here so when the user click on this one we're going to delete the block right now instead of doing this one I'm going to use the form instead and the form right here we're going to have another Bon for continue as well okay so right now if we refresh this one we have this one and then we call call this one so for this one let's create another function call on submit function oops not this one and then let's call this on submit right here so and then we can call the onsubmit right here and then for this one what I'm going to do I'm going to do use client instead okay so right now I hit save and make sure we do this one okay great so right now we can call our function to delete inside right here so for that let's go back inside our Block action and create another function to delete and right here I'm going to do delete block by ID and then we're going to have our block ID right here which is going to be a string okay so right now we going to do select block and this one is we're going to do delete and we do not have to pass anything and for delete right here we going to have the order not order but we're going to do check equal to ID which the block ID okay so right here we can get the result and then we can run a we right here and then we can return jon. stringify result okay right so right now we have this result let's use it inside here so right now we going to call delete delete block by ID so delete block by ID we can pass the block ID and we can do the await and then we can call aning or we can call the use transition right here so we're going to do is pending and then we can start transition I think we can go into the block form and then we can copy that it would be right here I'm going to copy this one past it right here and then import this one from react and then we can call the start transition right here okay right now we can cut this one and use it right here and then for that we can have an aing right here okay so for this one we're going to have the res and we can pass this res is going to be we going to have the error and the error is going to be json. pass result right now we can use the toast so for this toast let's do the if error message I think we can call this one from page create and it was the same thing so we can copy this one come back here and then we can paste this one and just we need to import this toast right here all right so right now this one is fa fa to delete with the message and then successfully delete this one and we do not have anything which is successfully delete block and then like voila so right now we do not have to do anything so also inside our Block action right here we want to do revalidation pass and this pass right here I'm going to create as a constant on this one is going to be dashboard equal to slash dashboard okay so right now we have this one let's use it right here dashboard so we did validate the pass dashboard right now let's go inside the delete aot right here so this this should be good to go so right now we can use this one to show some animation for the lead so I'm going to import the AI I think this one is going to be loading it's going to be outline three quarter I think maybe I can import it from here first so it's going to be import react icon SL Ai and this one is going to be AI outline loading and three quarter right here okay so right now we can come back here and then we can uh click this one okay so and then this one we're going to give a class name and can we can do some animation and then we can do tle here okay so right now if I click on the LD we can see this one and let's do some styling for this it's going to be class Flex btom Center the gap of this one is going to be two and for this one what we're going to do is we're going to check if it is pending okay so it's going to be animation Spin and I think okay we not doing like this so the animation spin should be outside right here with the comma and then right right here we're going to go with hidden and is pending okay so we hit save this one so this one should be not pending all right great so right now we have this one and this function is being called to this one as well okay so right now let's actually call to delete this one so when I call on this one so you can see okay right now it's not being updated all so if we refresh this one okay I think maybe for this one one as of now I'm going to do prevent default this one going to be e do prevent default on this one to test this out and let's do delete again so make sure we refresh and we can click on delete and click on this one so you can see successfully delete and but why we still here I think we forgot to implement the functionality for this one so if you go to block and active right here and inside here we're going to create a new policy for the delete and for the delete right here we're going to do is admin only okay so if it is admin we going to do delete and hit save save this policy and come back here to this one right now let's do delete on the test 4 okay so delete so right now as you can see theet here is gone right make sure we have the refresh and the Del three click on delete and you can see delete is gone as well great so right now let's fix this one I think for now we can just do the type this one is any okay let's do it again make sure everything is working I spected okay great so right now we have everything the delete is complete so right now let's work on the update is premium and the population right here all right so to do this one so we need first we need to transform this one into the switch form and so for that let's go into the component inside of a dashboard block component right here let's create another function called switch form TSX okay right now let's use this one so this one is going to wrap around a form so we can have a form and this one need to be the client component as well so for that I'm going to use use client and inside here we going to have the switch component and which is this one so then we going to have a check value and the check value right here is going to be come from props right here so we're going to have the check and the check right here I think let's do this one oops and give a type of this one okay so right now let's do check and this one is going to be Boolean huh this one need to be K okay so right now we can use this checks right here okay so I'm not sure why this checks any type h ah we need to do this one not come okay great so right now we have this and the type of this one is going to be submit type so it mean whenever we tackle this one it will trigger the form and the form right here we going to do onsubmit as well and then when we unsubmit this one so we going to call the unsubmit and then we can call this one so right here we can call to the server action and then we can do toggle and switch like that so so for that this one we're going to create a function to toggle so on toggle and this one is going to be on tuckle which is we going to pass one and return of this one is going to be promise string okay promise string so why would I do this one so if you look at the our Block action so for example this one it will return as a prise string so when we update we're going to do the same thing so we're going to return to this one okay okay so that's why I'm going to call it right here so inside here I can just call the tackle right here as well and so for this one we can do the same thing and we can just do we can get access this one it's going to be Json pass this one but we need to do the weight first so for that we can do the weight and then we can have the res right here and the res right here we can check if the result I think we can destructure from this one is going to be an error and if we can check if the error message if there's an error do message so what we going to do I think probably can do not and now we're going to do task I think let's go ahead and inside the delete alert and we can copy everything that we have here okay I'm going to copy this one and we do and then we can do the same thing for here so let's do this one and this one fail to update so right here you can see we have two of this one right so we need to know which one of we updating so that's why we can pass the name of this one and the name is going to be a string okay so right now we have this name right here so right here we can just fail to update plus name and then successfully update also plus name as well all right so this should be good to go so right now let's put copy the switch right here and let's go into our block table and we're going to replace this one right here so for this one let's do the switch form and the switch form right here we're going to have the value I'll check up this one and another one is going to be this one right here and let's hit save ah voila all right so right now look like we have a problem okay I think I forgot to add this one let save and we have a name right here is going to be premium and another one is going to be publish okayish okay all right so block premium and then this one block is publish premium so you can see we this one so right now let's create a function to handle this one so for that let's go to block first and then we're going to create a function to update by ID okay update block by ID we're going to have the block ID and another one is going to be data which is going to be block type schema type right here and this one instead of delete we going to update and then we going to pass our data right here with the ID that we have and so once we do that we going to have result and we do validate and we return as well okay right this should be good good to go so we can copy this one and then we can come back here so we can call this function we're going to create this one right here but this one is going to be update premium is going to be equal this one and then we're going to pass this one going to do buying uh not this one buy and then we're going to do null we're going to have the block. ID and another one is going to be is premium I think we need to import from here first and then we're going to do is premium is going to be block. is uh is premium okay so and then I think we can cast this type it's going to be block typ schema all right so we can copy this one we do another thing it's going to be publish this one is going to be is publish with the block is publish as well okay let hit save this one and then we can pass this one to the handle so on tuckle so we can pass update premium and then we're going to do on another tuckle so we going to update publish okay so right now if we go back make sure everything is okay and I will switch form right here no yeah this one we're going to call the arm submit so I'm going to do e of this one with any I'm going to do e do even defa as well okay great so right now this should be good to go and before we doing that we need to update the policy of our table as well with the block right here and then let's use our update and this one is going to be checked is atmin okay let's hit C of this one and then this one and then authenticate and let's hit review and save okay so h i see spell this one it should be is admin this one is admin as well then hit save great so right now can have this one so let's go back and try to update our block so right now right here I'm going to update this one to is FL okay it seems it doesn't work so let's go and have a block table and Slide the block right here I think we do revalidate this one as well H okay so for that let's try to go into block table and see what happened you can see when I pass here ah I see so you can see right here we do not pass any different value to this one so I think this one should be not right this one and this one should be not right because when we update we want to have different value right now hopefully this is going to work let's close this one and update this one as you can see a chain here and let's do this one nice so right now let's confirm that by into our database and as you can see the value right here so we get this premium true with the publish is fall and then I'm going to post this one to true and make sure this one true as well okay great so right now we be able to do this one so the next thing that we going to do is to work on edit right here okay so for edit right here when we click on this one we should be go to a new page that just do the delete so for that let's go into our app dashboard block and I want to create another folder inside the block right here is going to be edit and inside here we're going to create another folder because we're going to get the ID of the block and then we're going to do the page. TSX okay so right now we're going to have this page and let's try to get the PM of this ID get the ID it's going to be Pam and it's going to be parms right here and then it's going to be an ID with the string okay now let's hit save this one and make sure we have this Pam so as I'm now we can get the params right here. ID okay great so right now let's go back inside our block table and for this one instead of doing the link so this one we're going to use the link instead so for that let's create as a link and the H for this one is going to call into our slash dashboard SL block slash we're going to plus the ID that we have right here okay so I'm going to cut this one and then we can paste this one right here great so right now when I click on the edit right here it should take me to this page which right now is do not exist ah which is weird Okay we going to have the dashboard block and the ID right here ah I see so right now we should go into block slash and this one is going to be edit slash this one okay so let's going back let's come back here let's click on this one you can see right now we get a block ID okay so for this one we're going to create another function to fetch this block ID with the content of it as well so for that let's go into the Block action and I'm going to create another function so this is going to be another read block so it's going to be read block but this one is going to be we read both content as well so I'm going to call this function maybe read block edit or maybe just read block content okay block content and for this one we going to add the blocks content inside here and then it's going to be block content and we going to get star from this one okay so right now we do not need this one and then we're going to have an ID so I think we can do read block content by ID okay and then for this one we're going to pass block ID which is going to be a string and I'm going to select this one it's going to be equal to an ID with the block ID that we wanted to read and then we're going to do do single right here okay so right now we have this one so let's call this one inside our page and make sure to transform this one into the server action so we can do server action and then let's call this one let's switch this one we're going to do a wait right here and then we're going to have the lck we going to have the data right now let's actually try to display this data this is going to be Json do stringy data okay so okay we need to import this function right here so let's do this let's hit save and this one need to pram do ID okay now let hit save this one okay so look like this one ahuh so let's going back inside of Block action so maybe let refresh this one okay invalid cookie expect to request an acing not available H but this function is acing right so you can see and why it say like that so right now let make sure everything is working try to run this one again and click on open this one okay so I'm not sure why it said like that maybe let's try to restart server and make sure everything work out and let's have this one refresh this okay so it look like the cook keie here is fail and and I'm not sure why we have that as well so I think one of the reason that it's fail maybe we need to call super base right here in each individual function I guess so right now let actually test this out so when I let's say if I call this one inside this one instead and then okay this is now weird so right now let's cut this one and and let's call it right over here okay so right now I'm I'm going to try to do this one and let try to uncommon every function first hopefully this is not going to crash whole application because we going to focus on this page only uh so you can see right now this is the problem that we come from so we need to call this page every time so we run on it so okay so that's that's fine so for that I can create another insti lip right herey I'm going to create a super base and the super base right herey I'm going to do index ATS and we're going to do export a things function not this one a things function this one is going to be create super base server okay and right now inside here we need to use this one as the use Cent and then let's go inside here so then we can copy and paste this one so I'm going to cut this one think I'm going to cut this one right here and going back here we can paste let's import this one and let's import this one as well and let's import this one from the head next header okay we hit save and this one is going to be con base is equal to weight create super base server client and uh not this one so it's going to be create super base server client and right now okay so huh this is still Weir I think this one should be create ah this one we need to return this one okay so we're going to return and this one we're going to do this and then let's import this one okay so right now let's scroll on top right here we have this two so let remove this one and let try to refresh this one and hopefully everything is going to work okay uh you import a clent component use Clan so the clan component huh H this one I do not all right so now it's everything is being weird right here okay so make sure I'm going to do this to every function which is the super base right here and let's come on this one going to do this next we're going to do this as well and also for this one that uncommon create a super base and this one as well oops not that one so this one is we need just we need to remove this okay so right now let's try to go back again and a dashboard hopefully this one okay you import a component that needs Head there that only work in so a component but one of it parent is Mark as used client so the client comp so it's a client component H so make sure that super base this one and the cook key here all right so right now we have this error ah I see so you can see on this one I used to use server I used to use client all right that's all my bad okay so right now we can fck everything hopefully we go to a it and we can fetch this data okay great so right now we be able to fetch this data so we're going to pass this data into the block form component just like create for that I'm going to create another component for this one and this one is going to be the edit form okay edit form. TSX and we're going to run this one and then we can call this one is going to be block form and then we can pass the block from here that's where being being touch okay so this one right now I'm going to do I type uh let's I think this block right here is going to be block form schem okay so maybe I can cast this type later okay so for this one it's need a function right this going to be on handle submit okay and right now let actually just return y this one right here I me be return empty okay so then we can come back and fix this one later go back here and call the edit form and then we're going to pass the block right here with the data that we have okay so for this block right here this is a type of it so for this one I'm going to create a new type for this one and let's go into the types not this one I think I'm going to create another one it's going to be index but yes okay so this one is going to be the block detail so it's going to be export my block detail is going to be equal to this okay so right now we have this I block detail and then we're going to have this block right here and then we can just pass the block and let's go inside here and the block right here is going to be I block detail instead okay let's hit save suppose this one is save so right now if we refresh this one they should be able to see the form to update instead okay so right now let's go into edit form okay so for this one when we pass like that we need to make sure this one is going to be use client instead I think for this one we can remove okay so right now so when we have this block so we need to pass into the block form of the content that we have exist right here so for that let's go to block form and we're going to have the block and the block right here I'm going to do as a default and this is going to be I block detail okay so this is going to be nullable so then in create form we don't have to passes so for the title right here we're going to do block title and L of this one we're going to do just do or Mt okay and for the content it's going to be block dot do block content do content right here okay or we're going to do empty this one going to do block. image URL or empty this one is going to be block that is premium or fa and we going to do block. is publish or true great so right now we have this one so if we try to refresh this one again so we should have the default value of this one H but look like we do not have anything so because we do not pass it yet so we going to have the block and then we going to pass the block right here so we when we hit save on this one maybe let refresh it again so you can see we have a default value here with existing value great so right now we can create another function to on submit and then we can call this one okay so for this one we can just copy from the create page which is this function and I'm going to copy the whole thing from this one right here Cy then let's do this one and then we need to import the use router and then we're going to import this one block schema and let's go to the router and then we import this one as well and okay so right now the only thing that we need to change is the function to update this one all right so let's create that function so I think for that function is already exist right so if you go into Block action this is the one that we can use but I think this one is only update the block table only another thing that we want is to update another block so maybe we can create another function for this is going to be update block detail I'm going to do as a block detail by ID so we're going to have this one so first we going to block update this one the block table and the next thing that we wanted to do if going to check if result error we want to return it immediately Chason not string F the result right here and we can change this one to result block and this one to Res block as well and L of this one I think let do this then we can call another function to update the content okay so for this one let's go into the block content and then we going to up date this one is going to be the data is going to be content and is going to be data. content all right and then the ID of this one is going to be block _ ID with the block ID that we have here okay so and then after that we can return the result and we revalidate the dashboard as well okay let's hit save so right here this one is we to fail because we need to exclude the key of this one as well so for that I'm going to do the same thing for this and go back inside here and for that we need to exclude the data and then we can just call the block right here okay so right now this one update everything should working fine update the block content with the data ID right here okay so right now let actually try this one and this one instead of this one let update Pro this one by ID and then we're going to pass the data and another one is going to be the block. ID okay that we have block right here and let's do this okay let's hit save and go into the handle uh this one is going to be handle edit and this one we going to call it right here okay all right so right now the should error should be gone and we have this router this one is client not sure why we have this error right here we try to maybe refresh this one okay next router was not mounted ah I see this this one we need to use navigation instead right now let hit save everything should working fine right now let's try to update with the real value so I'm going to copy from this value from here of this block right here I'm going to copy this content come back here and I past this one right here click on preview and hopefully everything is going smoothly for us and then we can see right here great and let's do update this one to publish as well and okay right now everything Goods let's try to update this one right now successfully it's not update I think actually this one is to be um I think successfully update right we need to this believe update and fail to update let try it one more time to update this one test update it and make this one premium save you can see test updated and this one is premium and we can click on edit again as you can see the content here is not being updated at all all right so let's see why this one is not being updated I think it's probably of the policy that we have here I see so you go back and you go here and you come back here and also I need to check if the block content okay great okay so right now let's go back in here let's create a policy for update and this one we can check is admin as well and another one is going to be is admin as well it's be authenticated and let's hit save this one okay great so right now let's going back and try to update again I'm going to copy this content come back here update click on Save here and right now you can see it successfully updated and if you look at our dashboard or try to edit again as you can see right now we have this value okay nice so right now we finish our edit all right so so right now we're going to do is to try to do the loading for this one so you can see right now if the pages take so long we can have some loading state so for example if I open this one in a new tab and because this one is really fast so you can see but if it's slow we should show the user some loading okay so for that let's go inside here and the page and inside the this one I'm going to create another one that's going to be called loading. TSX okay and right now let's do this and okay loading react component in dashboard let's hit save to make sure everything is okay so right now if we refresh this one it will doing so fast that you can I mean like we cannot see this one but it's all right so right now let's try to do this one I'm going to add another diff inside this one and for loading right here we going to do the animations two PS space y of this one to five and inside here I'm going to do not create a two diff so this one is going to be an H1 let's do the height of this one to 10 I think maybe this one let's just do all diff so height 10 width 56 and the BG gradient to dark this one and then round it to um the okay we hit save and then we can create another one and this one is going to be with 48 each I think so this one we try to simulate this two right here okay so right now we're going to do Flex item Center and then we're going to do justify this one win all right so right now we're going to have another one another diff but this div is going to have a class name and the class name is going to have the Border I 96 and rounded this one to MD and BG of this one to gradient do as well okay BG to gradient I think we can just copy this one see it's not give me the intelligent all right great so right now if we refresh this one so since this is really fast we do not be able to see for example if you go into the dashboard right here in the real world so when I click on dashboard so you can see we have this loading right here so this is what it's look like that we just do but I'm not sure why this is so fast okay this is just the internet when internet is so fast we can just see this one instantly okay all right so that's great so right now the next thing that we going to do is to work on The View right here all right so right now before we work on read so we going to create more block so I'm going to do test this one 03 and then let's do MHL and then this one just a random content okay let's hit save this one okay so I think we have some problem on this action that is not update let's go ahead inside the Block action and I think I forgot to revalidate I see so this one right here we forgot to do revalidate pass so it's going to be revalidate pass is going to be the dashboard right here okay so right now let's go back and then try to update this one it's going to be test 04 image URL and then we going to do some content right here let hit save so right now you can see this is update great so right now let's work on this page right here so for that let's go back inside our app and go to this page so right now we have only click down right here and this is going to be an Asing page that this one is going to do a wait rate Block action and then right here we're going to have the data which is going to be blocked okay think I misspelled this one right now we can use this one want to render and then actually see this block right here so now let's do json. stringify and we going to have this block so if you refresh so you can see we have this block content that use and build a component to render this one okay so for the parent of this one so I'm going to give this one to width to full we're going to have grid grid of this one is going to be calls one but from the MD up we going to oops we're going to do crit call three instead and then we're going to do Gap to this one to five T5 and all right so right now let's hit save this one or maybe we can do excel up to p 0 okay huh I'm not sure why okay all right so right now we have this one all right great great okay so right now we have this one so let's create on the links component so this one is is going to which is going to return I think we going to map block first so we're going to do blocks map and the map right here will return a block and the index of this one which is we're going to return a diff right here and I think I can uh remove this one and we can give index of this one uh I think this one is going to be key is to be equal to index okay let hit save so right now we should have an empty and I'm going to remove this don't click right here all right so for this one let's give uh this one I think this one should be a link instead of a div because we can later on use this one to go into the Block it's going to be slash block and I think should be this one and then we're going to do plus the block. ID okay great so right now for this link let's give a sty of this one so I'm going to give the class last name of this one to WID to full and we're going to have the border and then we're going to do round it to MD and then we're going to do the BG gradient to dark that which our custom one so I think I believe this one right here and let's do P5 and beh on this one let's give a ring of this one to two and the ring is going to be green 500 okay and then we we're going to do Transition all CER to pointer and we're going to do space y to five and the First Column of the crit is going to when from the LG up I'm going to do call span of this one to two Okay span to two and then the first content of the crit as well from the MD up going to do call span to three okay so right now we hit save this one right now let's work on this one one so the first one we going to render is going to be an image and this one is going to import from the next image and this one is going to be class relative and the width of this one to full height 72 at the M from the MD up I'm going to give the height of this one to 64 and from the XL up I'm going to give the height of this one to 96 okay great so right now for the source of this one is going to be block do image URL and the all of this one is going to be cover image and all right so we going to add the field value to this one let's hit save this one so right now we should be a to see this and let's give some style to this one so for this one is going to be object cover and then we're going to be object Center this one as well right right so right now you can see our image looks better and so for this one we can give a side to this and this one is we can have something like this so right now we're going to do Max width is going to be 768 so this one is going to be pixel and then we're going to 100 we WID and then we're going to have another one it's going to be when we Max with this one at 120 pixel and then we're going to give this one 50 wiwid and we're going to do the4 one is going to be set three we WID all right we WID okay so right now everything should be fine for this one and I'm going to give this one to priority as well okay so right now our image is done let's move on to another component and for this one we're going to have the P1 and then this one is going to be the block dot created at but we need to cast this one into the date so for that we're going to do new date and then we can wrap around the created ad and then we can do to date string all right let hit save this one and we should be able to see this nice and for this one let's give a sty to Tech XM and then we're going to do Tech gray to this one 400 okay nice so the next one is going to be an H one of the this is going to be block of title and we're going to have the H1 and right now let's give a class name of this one to Tech XL one to bowl and then all right so maybe we can do have this one okay and right now let's have some space between these two so for that let's do space y to two Okay so I think this is great this is what we want and I think that pretty much it for this one so we try to scale this one on the larger screen so you can see it will have this sty right here and we can Mo on a larger screen this take two and we have this one so right now now we can fix this one you know by adding different image but I think it's fine so another thing that we wanted to do is so right now if I go to back to the dashboard and if we scroll right here ah okay so I think the layout here is somehow some problem so I think maybe we can fix this one later it should not have the scroll all right but for this one so as as you can see right now we have this one so for example if I unpublish this one and this one as well so if we go back right here we should we still see this one so this is a problem so for this one what we want is like if it is not published we don't want to the user to see this one okay so we want to read here only the publish only and all right so let's do that so for that and I think we can need to refactor this API and call right here right now let's go to this one and for this one one what we're going to do we're going to do equal is publish it's going to be is publish and this one is going to be true okay so the user will be able to read only the publish only so if we hit save this one so right now we should be able to see only two of this one okay very nice so right now the that's great so but if you go back to the dashboard so right now at the admin have only two as well so for this one we need to fix this by create another function I think I'm going to create another one this is for an admin okay this is read block admin and so then we do not have to do anything we can just read everything from here and right now if we going back into the block table and instead of R Block we can import the R Block admin and we can import right here and then we can this one and we hit get save so right now this one should have everything okay so and then another thing that I wanted to do is I wanted to create a policy to make sure that the the other user won't be able to read the our post as well so we go to plock and then go to policy and then go to select right here and as you can see the policy here is true so what I wanted to do is we want to allow only to read the publish only so for that let's go create another function I think we can create another function for this one let's go to create a new function I'm going to do is publish and this one is going to return bullan and we're going to have the argument on this one on the one which is going to be the block ID and which is the type of this going to be a uu ID we can do begin and end this one so we're going to return select is publish from public do block where ID is going to be equal to the ID that we pass okay I think maybe I can change this one to block ID instead and then we can oops can save this one and we can have this one right here okay so right now we can control this one and then let's return this one because the a publish here is the type is going to be bulling so right now we have to return typ bullan okay make sure to go security Advan and choose a def finder okay so right now let's hit confirm on this one and let's go back here go to block add some policy and new uh not new policy but inside for the select so for select right here we're going to do is publish okay I think maybe I misspell the name of this one so let's go back and our function our function is is published okay great let's go back and then it it right here and we're going to do is this one and then we're going to pass the ID to this one so right now we be able to read only the publish table only and then or is admin okay so right now if you are admin you can be able to read everything so for now let's say for example if I save this one and then let's hit review and hit save so if we go back to our dashboard even if an admin Bas on the policy we read only on the publish only so if I remove this one so you can see it's gone as well but the thing is like we want to admin to read everything so for that that's why we need to add an or is admin okay so we hit save and then let's go back if you refresh this one so as an admin I can read everything and but for on this page we read only one post only so that's why for another user that's not being loged in yet they cannot they read only only one okay so right now for example I publish all of this one and then if you be going back to that same user that right here so this one we can see all of this content okay so right now we try to fix this layout so you can see we have some scroll bar right here and this one is not nice so let's try to fix this one so for that let's go into the block table let's search for this one and all right so I think the first that we need to do from this ASM with full I think I'm going to go with the SM up we going to do something like this so right now if we hit save so you can see this is uh removed by default great so right now if we come back this is fine and then hopefully this is fine as well and then for the fle wrap right here maybe I think we can do fle wrap but when we on the larger screen froma the MD up maybe we can do Fleck row instead so it will look something like this okay okay so right now we fix this layout so let's go back inside this one and let work on this one right here okay so for the block detail right here so if you going back right to the demo so you will see that each of this block right here is static so the moment that you click it will instantly there because this title this date this image right here is static but the content here is going to be dynamic we going to fetch this one on the client because this content right here some content will be shown to the user if it's subscription and some content need the user to do subscription like that so that's why this is will be automatic but if you can see most of this content right here will be static so we want to make this page static so right now the problem with super base is that we cannot create the static using the super based client so in order to work around this one we can create an API to fetch the data and then we can call it later inside of a page all right so to do that inside our app right herey I'm going to create another folder called API and then we're going to do SL brout right here I think maybe we can do API block and inside here we going to have the route pass inside okay okay so right here we're going to write the function so I'm going to export Asing function and this is going to be the get request so we can do something like this and right here we going to have the request parm and then we can have the request right here okay so right here we can create a super based client so for that let's go into the login form and I can copy this one let's save this one p so for this one I'm going to use from create uh client instead so create client and this is also from super base as well all right so right now we have this one so the next thing is we're going to have to search parameter so we can use inside this API so it's going to be new URL it's going to be request. URL all right so right here we can get the search param and so right now for this API right here we're going to f f for individual block so you can see we use this one to fetch for individual block right so for that let's get an ID from this one so let's do c ID is going to equal to search pam. getet ID okay and then we can do if ID so another thing that I want to for this API I want to read all the block as well from this one and so for that let's go if we going to give the ID to Star so it mean we going to read all of the ID from this one so for that let's do cont result is going to be equal to a wait super base do from this is going to be block so if you want to have intelligent you can do this one where you can have the database type and then inside here you will have the intelligent so right now we're going to do block and then we're going to do select this one with an ID and then we're going to limit this one only to 10 only okay so not this one and then we're going to return respond. Json and we're going to spread all the result that we have here l so if we have ID so if ID so if we have an ID okay so and then so right here we're going to do the same thing we're going to call through this one and then for this one we going to not select we're going to select this one start and then we're going to do equal this one with an ID with an ID that we have and then we going to do do single okay so right here we're going to select From the Block and this one okay great so right now we're going to return the same result L if we do not pass anything we're going to just do respond do Json right here and then we're going to do pass something like this great so right now we have this one so we should be a to see so if I go to local homeost post slash API SL block and I'm going to give an ID of this one let's say for example I'm going to keep start and if we search so as you can see we have all of the data that we have right here great so right now we can use this one inside our page so for that let's create a new page inside our apps and let's go inside here I'm going to create a new page this one is going to be block and this is going to be dynamic so we're going to have an ID of the block and then we're going to have page right here okay so for this page we're going to do offc and right now we can get the param from this one it's going to be pram and we can give a type of this one it's going to be param and we going to have the ID which is going to be a string okay so right now we can call the fudge right here so right now I'm going to have this one as an asyn and right here we're going to do the await fetch this is going to go into the S URL so for that let's go inside the EnV do this one I'm going to create another one is going to be S URL is going to be equal to htpp 3,000 okay so when we deploy to production this one we should be change to this uh some you something else okay I think maybe we do not pass a quote right now we have the side URL so we can fetch this one so we're going to do process dob do copy just only this one all right so and then we're going to do plus this is going to be API SL block and then we're going to give an ID to this one okay so right now we're going to lose ID equal to param do ID all right and then I think we need to do plus right here okay so right now we have this one so we're going to do dot then and right here we going to have the rest and then we can respond the rest. Json right here and right here we going to have the data all right so data and this data will be a block content all right so right now let's actually use this one inside here and try to do json. stringify block right now if you go back right here if we try to navigate to this page which is not this one which is this one so if we navigate right now as you can see we have this data right here really nice so right now we be able to fetch this one so let let use this one to render our page so for that I'm going to give the class name of this one to Max withd to F Excel a Max to Auto minan height of this one to screen and PT to 10 and we're going to do the space y of this one to 10 as well okay all right so right now look like we have this one it's all right so we can fix this one later so right now inside here I'm going to have the H1 which is going to be the block title and all right so you can see we have this one which is really nice and another one is going to be the block. created at okay and then we need to cast the type of this one into the date type so for that let's go into new date and then we can do something like this and then we're going to 2.2 dat string all right great so another thing I think maybe for this one we can create the type for this one so then we can access this one easily so for that let's go into the lips and then let's go into our types right here and this is for the block detail I think for another one is going to be create the I block types so I'm going to create the I block and for the I block we'll have only this value only okay so maybe we can do null so we have PA is one so let's go to I block and then we can cast this type which is going to be S Thea which is going to be I block okay so right now we can do with the not operator right here okay so this one we can do or with the string okay great so right now let's give a style of this one so for this one is going to be class name Tech to3 XL but of this one is going to be bow and for this one it's going to be class to take to SM and I'm going to give this one to Tech gr 400 and let's give a space between these two so I'm going to do from SM PX to 10 and then for space it's going to be y25 okay okay so right now we should be able to see this and great okay so next we going to render the image of this one so we can to have this div so this one is going to be width full height to 96 and we're going to do relative and so we can render our image right here so we can have our image and this one is going to be priority I think we can just copy the image from our page right here so if we go to our page we should be able to have this one just copy this and we're going to replace this one right here and this one we can just do like this so right now we should be able to render this image nice and for this one let's give the class name of this one I think maybe this one we can just do the slash right here and this one is going to be rounded to MD I'm going to give to a border to this one as well and all right so this is looking good okay so great so right now we want to this one only so if we navigate here this is going to be text two and this is going to be textt three and for the block content we're going to keep it later because the block content it will depend on the user subscription and things like that so for now let's fix this one first so if you go into the dashboard and try to update this one it won't work so for example if I come back here to edit and this one is going to be I'm going to test one instead and right now let's hit save this one and if we try to navigate back so as you can see but this one is read from database on runtime so it's fine but if we navigate here this is still updated so when we ever we going to change when we make edit to anything so we need to revalidate that task as well okay so for that let's go into the edit block right here so it's going to be Block action and then let's go into the update so it's going to be update so this one is going to be update by ID and another one is is going to be update detail right here so this is where we going to revalidate so I'm going to revalidate this one is going to be SL block slash and then we're going to do plus the data. ID I see we do we have this one we have the block oh we have the block ID right here so we can just do the block ID okay so right now let's going back and try to edit this one so right now let's edit and to test one test One update it and hit save click on this one we going back test One update and if we go back here you can see the test one is being update so this one is we revalidate this pass very nice all right so another thing is that we going to work on The View right here so right now I click on this one it will not navigate to the page detail so for that let's go into block table and then for this one we're going to make it as a link as well so we going to cut this one and then we can cut this one right here place it below this one and this one will be navigated to the block SL ID okay so right now if I navigate into this block right here with the view so we can see this one nice great okay so one more thing that I wanted to fix is you can see so right now for example if I try to unpublish one of the page so I'm going to un publish this one and if I click on view this one I be able to see this one this is not what we want so if this one is start publish we don't want to show the user this one okay one thing that we can do is we go to the page the block one and then we can check this one if block. ID if we have if we do not have block aot ID so what we going to do so for now you can redirect user back to the homepage but what I'm going to do is to return N Found okay so this is what we're going to do so right now if we navigate back to the dashboard and also I think we forgot to update the action as well so inside our action right here update by ID we need to revalidate another one which is going to be the block pass as well right now it's going to be slash block slash plus ID right here I think the block ID should be block ID okay so right now for example if I try to unpublish this one again and then let's try to unpublish this one again and try to unpublish this one as well let's click on view so right now as you can see we do not found anything on this one and also you can if you have another page you can redirect to the user but I'm going to show the user this information okay so let's try to redirect back let publish this one and let's go back and to click on view make sure that this we can be able to see okay so all right so right now we finish this one so the next thing let's work on the content right here all right so right now let's work on the Block content this one so for that let's go inside here I'm going to create a new component inside our ID folder right right here I'm going to do components and this one is going to be block content okay TSX and the block content right here what I want to be with this one is going to be use client and so this one is going to be the client so the reason that I do not fetch this one from the server is because first we want to this page to be static all right so if we use this one as a server component this page will be a static page uh it will be a server page so what that mean is that if it's slow the page will be blocked if it's in a server but if it's static so the moment that you click it will see it immediately just for example this in this case so for example H this page so when you just click on this one you will see this one immediately and then the content we can dis fetch dynamically later okay using on the client side all right so let's do that so for this one we can create a function to fge From the Block content table so for that let's go into lock in for form and then we can just copy this one right here I'm going to copy this one and then I'm going to import this one right here so right now we have the super base and then let's create a function to read block content R Block content is going to be equal to uh this one and then we're going to do a weight super base I think I'm going to give the type of this one which is going to be database all right okay database great and so for this one we're going to do from block content and then we're going to do select this one is going to be select star from here and then we're going to do do equal with the block ID so then this one we need to pass a block ID to this one so we're going to block ID and then block ID here type is going to be string okay all right so right now we can use this one right here and then then right here we can do the aing as well so right now for this one we need to do do single as well oops to do do single and right here so we should be able to have the data so we going to have the data and then we can use this data and then we can create a state and store this one okay so for that I'm going to create the block and then we're going to set block is going to be equal to use state and this one is going to be by default it's going to be null and then let's give the state of this one so for that we can copy the type that we have here I'm going to copy this one and we can open like this and then we can close like this okay so this one is not like that we can need to fck this one okay great so right now we have the set block so then we can after that we can call set block with the data that we have and this one is going to be really simple we're going to call the macdown preview and then we can just pass the content right here so the content is going to be equal to data dot or maybe block do content L is going to be empty or empty all right so right now if we navigate back we click on this one and so we forgot to call this one let's go inside here inside this page and below this one we can call the block content and then we can call this one then we going to pass the block ID which is going to be equal to block. ID right here okay so right now if we have this one reading undefined they should not be undefined okay okay so right now it seems that we do not have any block content at all so we have this data okay we do not call this function yet so right now we're going to call this one is is going to be use effect and inside this use effect right here and we should be able to do this and we're going to read block and this one is going to be eslin disable next line okay great so right now as you can see this is the content of the block one and then we should be able to read this content nice I think for this one I'm going to give the class name the from the SM up we're going to do PX to 10 okay so right now we have this one and there you go okay great so right now we have the SP content we read this one okay great so right now let's test this one one thing that I want to make sure like for example if the user read it from this one and if they try to fudge as you can see this is not beable to see because right now this block post right here is will read beable from the admin only so if I have Clos this one if you going back into our session right here and let's go inside the block content and let's go into the policy of this one and to the select and then we can edit so you can see this block right here is going to be read from the admin only one thing that we wanted to do the block content is we wanted to allow everyone to read if it's not published okay so you can see right now if we go into the dashboard let's say for example one of this not premium content so let's say I'm t tle one and I preview this one and I open this and then let's go into private and then open this one so this user should be able to see because this one is published and it is not premium so anyone can read this one so let's fix this one so for that we can come back into our super base dashboard and then try to create a new function to check if the block is premium or not so for that let's go inside the function and create the function is premium and which going to return the pool and then it's going to be begin and end this one and right here we can can return select is premium from block where ID is going to be equal to block ID okay and the block ID will be an argument that we going to pass block ID and then this one is going to be a u ID okay so right now we have this one and then we can check okay so right now we can security setting and then security Define there okay so right now let's hit confirm this one and make sure this is the function that I wanted to call let's hit confirm and then we come come back here for the block content and then for this one right here to go into the edit and then this one is we be able to admin to read and or this one is going to be not is premium okay okay now this premium is going to be block ID that we going to pass and we can once again this is be able to admin to read or the block post is not premium all right so let's on review let's hit save policy and right now if we going back so this in this user is an admin we can be able to see this one but let's say for example if we navigate back to this user and we can try to fetch so you can see this user should be able to see this one as well very nice all right so let's say for example let's try to for this user and for the admin try to make this one premium back and right now if we go to view and then if we copy this one into to the private window and as you can see right now this is the premium content this user do not be able to see okay great so right now one thing that we need to do we need to do some loading States because this not give a pleasant to for the user experience so you can see so right now this is fetching so we should be able to see some loading so let's do that okay so for that it's going to be really simple I'm going to do like you know block loading TSX right here let's do this one and for this one I'm going to go with the class name animation PSE space y to five and P one to 10 and then we're going to have da right here with the class name of height to 10 and then we going to do the BG to gradient uh the custom gradient so let's go with the gradient dark right here and then we're going to go with to full and then we're going to do round it to on the okay so right now I'm going to make a couple of this one and hit the hit save so right now let's go back inside the block content we need to create a state of this one we going to do is loading going to set loading is equal to US state and this one is going to be four all right I think and then when we fetch on this one we can f set the loading to true and then when we finish we send loing back to fall and then we can check if loading if is loading so we're going to return the block loading okay block loading right here all right so right now if for example ref fetching this one refresh so this is loading uhhuh okay so I think maybe for this one we can just do not do this we can just set by default it's going to be true and so when we fet this one so we can see there's some loading and then when we finish we set it to fall all right this is great so let's go in back refresh this one we see some loading and voila okay so right now one thing that I I want to make sure so for example if for example if I try to delete this one I think the page is still there so we need to revalidate as well so right now try to copy this page and run it right here and come back back here go to dashboard and try to delete this one okay so right now for example if I delete this one and if you come back if I try to refresh so you can see this page is still there but instead this one is should be gone right so for that let's go ahead and inside the block table and going to the Block action and let's go to revalidate as well let's go for the function to delete so let's search for delete okay so delete delete by ID and we can do revalidate this one as well all right so right now let's see what where we can revalidate as well so everything I think is revalidate now great so right now let's actually try to test this out again test everything so for now if I go here and let's go inside the page so right now we have nothing so we do not and so for that let's go to dashboard let's create a new block so for this one let's go I'm going to copy the content from this one and then let's go into dashboard it did and then I'm going to copy the content from this one right now let's go here I'm going to do test one image URL from un Flash and C paste this one and I'm going to make this one is available for everyone so I'm going to publish and right now let's try to create another one which is going to be test two the URL and then we're going to do the same thing and this one I'm going to set to premium okay so right now the test one here is going to be available for everyone so let's click on view this one and okay so you can see we be able to see since this is not a premium so which mean if I try to go to navigate this to this user that did not lock in and things like that this user should be a to see the content as well great and if you go back here this content should be a to see two of this one as well but for the first one is they can see but the second one is they cannot because this is a premium so later on we going to update this one with more like more information to the user to subscribe with stripe okay all right great so right now this premium thing it thinks is working fine so let's close this one but let's go back inside of a dashboard so right now let's try try to delete this premium right here so and then make sure that this Pages do not exist so for example if I can keep this one right here and save so let's come back here and try to delete this page right here so right now if I try to delete and right now it's gone so as you can see if we can come back here so for the moment this user still see but if they refresh this one you can see the page is not found and you can see if they navigate here the page is gone as well great so right now we be able to do this one and be able to edit make sure the edit is fine let's go into the edit test 20 this one let hit save click on view and we can see we have this one and let's try to edit the block content as well so for example Adventure I'm going to do edit it and let's hit save and let's go in a view so you can see this is edited great so right now most of our functionality has been done and also for this one as well so the next thing that we going to do is to work on the premium content for the user to subscript with stripe okay all right so right now we're going to let the user to subscribe with stripe so for that as you can see this user do not lock in yet and they navigate to the premium post so for that we need to display them the information that they need to do is to check out and call to stripe and then submit and then we'll come back to this page so for that let's do it so right here you can come back into the component I'm going to create another folder called stripe and inside this one I'm going to create a new component called checkout okay and then I'm going to do this snippet and then we can call this one inside our block page which is going to be the block content and then we can check this one if there's no block. content and then we going to return the user to check out okay so right now let's do check out component and we can run this one and then we can do control Dot and this one will do Auto Import for you okay so right now we should be able to see this checkout component and if we head back okay right now you can see we have checkout nice so for this one let's build this one so this is going to be the form and right now let's give some styl this one I'm going to give the height 56 withd full we're going to do Flex item Center and then get to do justify Center as well so it's going here and for this one it's going to be a booton and the variant I'm going to give the variant of this one make sure to import this one do control Dot you can have this nice and I'm going to give the variant of this one is going to be a ghost variant all right great so right now let's give some value to this one so this one I'm going to have to two span let's do a span right here do this and then for this one we're going to do we going to have the text is going to be unlock all block content okay and for this one we're going to have the icon is going to be a lightning bow which is from this icon right here this one and then we're going to have the text right here so it's going to be upgrade let's hit save great so right now let's give a class name of this one I'm going to give the flex and then let's do Flex call let's do P10 and then gap of this one to five so right now it should be something like this and for this ban right here I'm going to give the flag as well it's going to be item Center and then a gap of this one to two and for the tech let's do text to 2 XL to font bow and it's going to be text green 500 all right great and for the icon right here I'm going to give the width to five and height to five as well and we should be see something like this and for this one let's give a ring of this one to two and then it's going to be ring green 500 all right great so right now we have this one so later on we going to we're going to create the stripe and then we're going to call this one to the stripe but for now as you can see this user is not lock in yet right so what we want is like if they not lock in yet we going to show them to lock in first before lock into to with stripe so for that let's use this one going to be user equal to use user and then we can have the state and this one is going to be state. user okay so we can check if not user. ID and then we can do like this if there's no user we going to return them with the lockin form so we can call to lock and form and hit save so right now we should be able to see this let's give some styling of this one and then Flex item Center Height 96 width full and then we're going to do justify Center as well and then we're going to have this one to R so and then let's give the gap of this one to two Okay so right now when the user is not locked in so we need to tell them okay please lock in to it first great so right now we have this one so next we need to connect this one and call to check out with stripe all right so now we connect with stripe so for that you need to create the stripe account and also you need to register and add your store right here and right now you don't have to activate the payment so we can just still and do in test mode as well so you can see this is still in test mode all right so once you do that you can go navigate into the developer if you go to home and then you can click on the developer click on API key you will get the public key and secret key right here so please copy this one and go back inside our VC and go to in V local and add this one so this one I'm going to do next Public public key is going to be equal to this value and another one is going to be stripe SK key which is going to be secret key so and then placee reveal key and then we can copy this one and paste this one as well okay so right now let's hit save this one and right now let's implement the function to check out so before we doing that we need to create the product inside our stripe so let's click on more and let's go to product catalog and right here you can add a new product so our product right here for the name of this one I'm going to go with the let's say daily block R okay and right now for this one occurring so because we want the user to subscribe and to this one and then we going to char this one for9 $9.99 and it's monthly basis and this one we do not need to do anything we can just click next and we can add product all right so right now we have this product let's navigate to the product page and for this one what we interested in is going to be the price ID right here so I'm going to copy this one and I'm going to save it inside our local en as well so it's going to be the Pro price ID is going to be equal to this one so in this case so we because we have only one subscription so if you have another one you can add another price to this user and so for now we want to user to subscribe to only monthly only so if you want to do yearly you can create another one and add to this one okay all right so for now let's navigate back and create a function to check out with stripe all right so first we're going to install the dependency that's needed so I'm going to do NP M which is the first one is going to be the stripe and another one is going to be stripe.js right here okay so right now let's copy this one and then we going to run this one great so right now while this one installing so let's go ahead inside the action and inside the lip action right key I'm going to create a new file called stripe action it's going to be stripe. TS okay look like our installation is complete as well so the first one we going to make this one as a use server and and then we're going to import stripe stripe okay make sure this one nice and then we can create the strap instant right here is going to be new strape and then we're going to do process dob do secret key that we have okay so right now let's go this one and paste this one right here and then we can do the not operator at the end so to avoid this squishy line and right now let's create a function to check out so we're going to do export Asing function and then for the function name is going to be check out and for the checkout what we need is going to be the email of the user that has been checked out and this one is going to be a string and then we going to have the pass to redirect two as well it's going to be redirect two which is going to be a string as well okay so right now let's go in here and so for this one we're going to do a weight strap checkout do session and then we're going to do do create okay and then we can here we're going to pass a bunch of parameter so the first one is going to be the success URL where you want to redirect the user after success okay so this one is going to be redirect to or we're going to do the process. env. URL which is this one okay the S URL right here so if the user passed this one to us we going to redirect to them if it is not so we're going to redirect them to our homepage okay so the next thing is going to be the cancels URL so right here for this cancel we can redirect to the homepage as well so this one we can create another custom page to handle the cancel and show to the user and another one is we going to get the customer email and then we going to pass here and then this one is going to be the line item where we need to use our price ID this is going to be an item so which is going to be the price then you can get the price ID right here it's going to be Pro price ID which is going to be process. env. Pro price ID and we're going to pass the quantity to one okay and the mode of this one is going to be subscription Not subscription okay so right now we have this one so let's call this one inside our checkout component okay so for that let's go into our checkout let's create a function it's going to be cons handle check out and then for this one we going to do uh de prent default on this it's going to I'm going to pass as any and I'm going to do e dot PR default and then we can call this one inside our bong right here to unsubmit so on submit and then we're going to call hand all check out okay so right here we're going to do call our function to check out so I'm going to do check out function from stripe and then we're going to pass the user email so this one is going to be user. user met. email okay email and then we can do this and then we can do not operator right here and then we going to pass another parameter which is going to be the pass so I'm going to get the current pass of the user that call from this one which is going to be use P name okay so right now we have this pass name and then we going to call with the past name that the user redirect back here so right here I'm going to get the state from this one so for that let's use a transition I'm going to do is pending and then start transition is going to be equal to use transition right here and right here we can call the start transition and then we can call to this one okay so right now we can do a weight and since this one right here we uh call from check out and then we need to do an aing as well so I will check out if we go back right now we do not return anything so let's do that so return and this one is going to be return as the Json that's stringify because this one will return to the client component so we have to do something like this great so right now from this one we should be able to have the con data and then we need to pass this one so it's going to be json. path and let's do this okay and so for now let's when we call this one we need to do some animation to this one let's work on that so for this one for the parent component right here I'm going to wrap this one with the CN and then we can do something like this and right here we can do the logic right here so we going to do the animations to pulse if it is is pending okay so if it is pending we're going to do this and then for the lining icon right here what I'm going to do is do animation for this one as well so let's do the I'm going to use CN for this one and we can wrap it like this and for this one we going to check is pending if it's not pending what we going to do for this one is going to be the animation bound else we're going to do the animation spin okay so right now ah I see so okay this is should be this one right here all right so this is should be good to go so right now let's go back here so right now I'm going to test with this user so I'm let this user lock in first all right so as you can see right now we need this user to subscribe with stripe first in order to come back and see the content of this block post so for that we're going to call to this one and then we get the data so another thing that we need to call is we need to load stripe result of this one so for that we going to call the function load stripe and so we need to import this one so this one is going to be import from at strip JS so this is going to be load stripe okay so right now we need to load stripe and then we going to pass the the EnV of this one it's going to be process. env. the public key one is going to be this key right here all right we're going to do not operator right here so right now we need to do the weight and then we going to have our Stripe Right here all right so right now when we have this one so we can call this one await strap. redirect to check out with the session that we have going to be session ID it's going to be data. ID okay so right now let's hit save this one so this should be able to call the function to subscribe all right so let's test this out so right now let's click on this one right now we can have the animation there's no wallid URL ah I see so for the past name right here so we need go with the locations do origin as well so because this one is not a valid URL so you can see uh this is error come from this one all right so right now let's try to run this one again the user is locked in he need to subscribe right now let do some spinning and this one it should redirect do to strip okay right now as you can see this is with the product that we just create and for the test right here you can use the fake uh credit card so for example you can see this is a test mode so the fake credit card which just uh just only 4242 number and this one you can put any any value that you want and then this is 111 and name this one is going to whatever you want okay so right now let's do subscribe on this one so it will if it's success it will redirect back to our home page which is this one so you can see it redir here so right now we do not do any listener that the user is subscribed but first we need to make sure that this user is subscribed to our stripe so right now let's go back into our product and then if we go come back here I think if we refresh this one we should be able to see the customer and if you click on the customer right here as you can see this customer is subscribed to our strip so the next thing that we need to do is we need to create a web hook to listen to this event and then when the user subscribed we need to update them the status and be able them to read the block content okay all right so right now we're going to create the web hooks to listen to a stripe event so for that let's go into the apps API and then I'm going to create a new folder for this one is going to be stripes and then inside here a new folder inside the stripe is going to be a web hook okay so right here we're going to do routes. TF great so right now inside here this is going to be the post request so I'm going to do export a function and this is going to be post and then we're going to have the request and and this is going to be the request type and then we can call this one right here okay so for now let this one so we need to import the stripe first so import Stripe from stripe as well and then we going to create a new instant of stripe let's go into the stripe action and then so we can copy this one right here so I'm going to copy here and then I'm going to paste this one here and another one is we're going to get the endpoint secret so for that let's go into the stripe documentation if you come back here if you go in here you can search for the web hook and this is for the developer and this one is going to be let's say to test in our local so this is the step that we need to do and you can see this is the secret that we can use to in our local so for that I can copy this endpoint right here and let's create this one C and make sure to change this one to noj so then we can read this one easily all right so I think for this one I'm going to save this one in our Local Host uh e and B as well so local local and B so this one is going to be endpoint secret is going to be equal this value okay and then we can copy this one and then we can come back and then we're going to do the process. EnV dot this value okay great so right now we have this one so you can see this is what we need to do so right now what I can do we can just copy the whole things from this one and then we going to replace this one a little bit to work in our case with nextjs all right so right now I'm going to clear this one and I'm going to clear this one as well to get the signature right here what you need to do instead of doing this one we need to use from the next header and then we're going to call to this function and then we're going to do get instead of calling like this so right now it should be look something like this okay so right now as you can see we get this signature and I think for this one we can do both of this one inside the try and catch right here and the endpoint secret will be called from this one I think maybe we can just do and change to something like this so the next thing is we need to get the body of this one and to get this body is going to be cons raw body is going to be equal to await buffer from this one and then we going to pass the request body all right so which is this request right here okay so right now we should have this raw body and then we can change the this one to this and for this one we can just do not operator and then for the respond right here we not going to do this we're going to do next respond and then we can do something like this so it's going to be respond. Json and then this one we going to have the error status so it's going to be the error and the message for this one is going to be web hook error we're going to do plus the error message okay error. message and this one I'm going to give the type of this one to any and we can do something like this to make sure it's safe okay so right now we have this one and I think this one we got a problem as well so maybe we can just change the request right here to any instead so right now to avoid this error so right now we have this even right here so for the even let's call it outside here so then when we assign so then we can call it down here all right great so right now let's try to test this uh result right here so for for now let's just do the console dolog and then get this object so this is the event so we want to make sure that everything is working okay so right now our web hook complete so the next thing is we going to test with different case so but for now we just want to make sure this is working fine so come back here we can follow this documentation in order to make this is on our local all right so first we need to install stripe inside your environment so for that you can follow this documentation click on download CLI and then you can come back here so this one will list all of the OS so for example if you're using Mac OS with home brew you can just follow this one easily and then if you don't use that you can just still use follow this documentation right here okay so since right now I'm on window I'm going to show you how to do this so first you can click on and go to link of this GitHub and then download this file right here so which is this one and the next thing is we can open this one so now let's open this and then so when you open this one we have the stripe so you can move this one into any folder outside of this one so for example I move it inside the download folder right here okay so right now we can do the CMD so this will go open my my terminal and right here we can call the Stripe from here going to be stripe. exe so right now you can do access and to do stripe lockin and back to follow the documentation so right I'm going to close this one and then going back to stripe dashboard this is what we need to do I'm going to click on this and then we going to paste this one right here so right now we have this one let's just click on this one and right now it will do the installation and then authentication please click allow access and it will R right back so right now you can see access granted great so the next thing is we need to do if we need to forward the stripe to our Local Host so I'm going to do this going to stripe forward which is going to be Local Host this one is going to be 3,000 and this going to be API and then strap because this is our API that we create you can see this is rout right here and then click enter and then right now it's just get ready and make sure everything is okay so right now one thing that we need to see when I call this one so the web hook will listen so then we will going to see the console the lock right here okay so right now let's go and do this one and right now it's running something here and then successfully and if you look at right here we should be able to see this payment right here great so right now and okay all right so right now you can see we have this one but we have some error right here so there's no respond and things like that so we need to fix this one soon okay right now let's come back and fix this one and I think for this one so you can see we do not return anything so for this one we can just return respond do Json and with the empty object right here this so this should be good to go so for now if we hit save this one if we go into compile and then let's try to run the trigger this even again and we can call this one so right now as you can see and it's called to this one great so right now we need to listen to when the user is subscribe to our product and then we need to call this one and then update the user table inside our super base okay so let's do that all right so for this for the first case right here the event that we want to subscribe first is going to be the customer updated so it's going to be customer. updated and this one is going to be customer okay okay so we're going to have the customer data and inside here we need to get the subscription status from an subscription ID because we need to update to our table as you can see let's go to the block right here so we going to have the feel of the publish and I think oh no for the user and we going to store them such as the email and the subscription status right here you can see and also the strap customer ID okay so to get this information we can come back here so first we need to get the subscription is going to be equal to a weit stripe do subscription list okay and from this one we need to list from the customer and the customer is going to be customer. ID right here okay so right now we have this subscription and then we can check if subscription here is exist or not so if there any data inside this one so right now if we have this one so we're going to have get sub is going to be equal to subscription. data which is going to be index zero right so because we filter only the customer ID that we have here and right here we going to call to our super base so right here we're going to call to super base to and update the user table update us update user table great so right now we have this one so let's create a function to call to super base so for that I'm going to create a new new function cons on success subscription and for now I'm going to just do console.log please update user table okay so right now we just want to make sure that this function is being called and then we can call this function right here okay so right now we do not pass anything but and then let's try to do subscription again and then make sure this function is called okay so right now let's go back to our application and then we can call to run the upgrade Pro again so right now it's being checked out and and then make sure to use this fake this one and right now as you can see our success is we being success so right now if you're going back here and then if you come back here so you can see please update user table so it mean like our this one is being called and then the next thing that we need to implement is to call into super base and update the user table right so for that we're going to create an admin so super base admin so for that first we need to come here go to API and then right here we need to get the service role right here okay we click copy this is important you do not want to expose the service role and if you going back here all of super base key is start state with next public and but this one we need to call this one from server okay and make sure this key is protected so for now this is going to be the service Ro and equal to this one okay so right now we have this one let's create another client super based client that use this one right here okay so for that let's go into the lip and super base and I'm going to inside this one this is from a server as well let's do export Asing function and the name of this one create super base admin and then for this one we can follow this documentation right here you can see so right now I can just copy and paste this one right here so let's copy this one and paste it right here and let's do the Auto Import which is control Dot and we have this one which is is going to be this URL right here and the next one is going to be this one that we can that we just uh create so copy paste and then I'm going to copy this one and then I'm going to change it right here okay right now uh when we have this one so we can just do return the crate client great so right now let's go back inside our route right here and then for this one we're going to do super base admin is going to be equal to a weit super base uh create super base admin great so this one we need to do an aing so for that we can call this one to update the user table and I think for this one right here I can use the super base I think the database right here so then it give us the intelligent okay so right now we have the super base admin so I'm going to do super base admin from the user so we going to update the user so we're going to update and this one the first one is going to be the subscription status and the next thing is going to be stripe ID and another one is stripe customer ID as well all right so we update this three field and then we're going to use this one as from the parameter and this one is going to be Boolean and another one is stripe subscription right here which is going to be the string and another one is stripe customer here is going to be a string as well okay great so but this one we need to know which user that we want to update so we cannot get the user ID right here but what we can get is the ID of this uh of the email of them so we're going to do equal and then which going to be the email and then we can do pass the email as well so I'm going to get this email and the email the user need to pass from this function as well which is going to be a string okay so right now when we have this one and I think that pretty much it so right now we can just do the return and a wait or maybe we do not have to do anything for this one so and this one and for this one we can check on this so we can have data and or an error so if we have an error so we can return respond or maybe I think we can just return and then we can check the respond from uh the function that we call so we can return from here okay so right now let's hit save this one so then we can call on subscription right here and then we going to pass the par to this one so the first one is going to be the substatus going to be sub. status is going to be equal to active so if it's active it's going to be true if it's not active this one is going to be FAL so the next one is going to be stripe subscription ID so it's going to be subs. ID as you can see the subscription ID next is a customer ID which is going to be the customer. ID and the next one is going to be the customer. email okay so right now we have this one and for this one we can do the not operator at the end great so right now this one we can do the await on this function and this one will return us the data or an error so for now what I'm interested in is an error only and then right here we can check if there's an error do messages for example message and then so we can return the respond with this one so let's do return respond with the key of going to be error and this one is going to be the error. message okay else I think for this one for L we do not want to return anything so for now maybe we do not do any any else okay let's hit save this one great so right now we have update on subcription user so let's use this one and test this one again and make sure that this one of our user has been filled out with the information okay now let's going back so you can see this is the user this user that we just lock in right now it's null let test is out so going back here I'm going to subscribe again so you come back here so right now we're going to fill out the information and click on subscribe right here so right now everything is complete it redirect me back here so we still see in this one so right now we do not update the UI so our goal if we check right here we should be able to see all the information so as you can see right here this user right here has a customer ID and also so if you look at subscription status it's going to be true as well nice and yeah that pretty great so right now this user is subscribe so the next thing that we need to do we need to use this information to let this user be able to read our premium content okay all right so for that it's going to be really simple so we just update the block content policy so go to the block content and right now if you go into read content right here you can see so now we allow only admin only and we can allow only if the block post is not premium okay so for that we can create another one to check if the user subscription and then we can reach show the you user as well so for this one let's go back into the database I'm going to create another function is going to be equal to a sub okay which is going to return the bullan and the function is going to be begin and end and this one is going to return select subscription that test from user dot where the ID is going to be equal to o. uid okay so right now we can wrap this one and we can end with the semic column okay so right now we come back here and then we choose the security def find the hit confirm and great so right now we have this one nice so right now it's going back into the our block content and navigate here and then go to edit and for this one what we going to do we're going to do another one is going to be or if it is premium if it is premium right here so we're going to do block. ID if it is premium and then and is sub as well okay so if the content is premium and the user is sub is true so then we're going to be able to let the user subscription this one so going to be is s and right now this should be good to go so right now C on view hit save so if you're going back into this user that just subscribed and then we can just refresh this one and right now now this user should be able to see this content right here great so right now let's go back inside this is an admin make sure that the policy is working for as an admin as well there's nothing wrong let's try to create another block for this one I'm going to create a new one and let's say this going to be test0 2 and image URL and then this one is going to be just a random and make sure we set this one to premium and let's hit save so right right now we have this one let's navigate back to this user and go into the LI block so as you can see right now we have this block test two click on test two so this user as you can see this is a premium content and this user already subscribed and that's why this user be able to see and one thing that we make sure we can go into eito and then run this one and this content will not be a for the user it will tell them to lock in and once they lock in they if the subscription fall there's no content the user need to do subscription okay all right that's great so right now we have this one and okay so the next thing that we need to do we need to make the user manage their billing information so then they can unsubscribe and things like that all right so let's do it all right so right now we're going to let the user to unsubscribe so for that let's go inside the profile right here we're going to create a new menu that manage the building okay so let's do that so for that let's go into this component and then let's go into the stripe component I'm going to create a new component called manage building okay. TSX and then we have this one let's run Li at orc and right here this is going to be a bhong as well and this one is just going to be billing okay we're going to have billing and inside here we're going to have the icon and for the icon of this one I'm going to use the backpack icon from this one and and all right so right now let's hit save and for this let's give it the class name to flex item Center and then justify this one is going to be between as well and for the variant of this one I'm going to give it as a ghost okay great so right now we can import this one inside our profile so let's go back inside our profile let's search for profile and this is where we going to put this one and then we can just import manage building okay okay great so right now if we save this one so if we going back let's refresh this one and right now as you can see we have this one great so right now let's go back here I think I forgot to make the width of this one to full and then so it will separate between these two great so right now we have the building so one thing that we wanted to do right now we want to show this billing right here only if the user is subscribed right so we don't want to anyone just to call this one if the user subscribe so then they will have this one so to tole between these two we need to F the user information that the user is subscribed or not so for that let's go into the session provider right here so right now I'm going to change this information so right now we fetch the user and then but I think to set the data we can fetch the user profile instead okay so for this one I'm going to do await super base prom is going to be user I think for this one to give the intelligent we can use the database and this one is going to be from user do select star so we can select star and then we're going to do equal to the data do session. user do ID all right so this is what we want and then we can do the nut operator like this I think this one we need to add the ID all right so right now we have the one so we can have the user and then we going to have another data is going to be user info okay all right great so right now instead of using this session data to store we're going to pass as a data instead inside user info and set inside here so right now let's go here and then we going to set the user info we look at the result this is what this look like and I think I this one I forgot to do do single as well okay so right now we should be able to see this one so for that let's copy this information and create a new type for it so right now let's go to the type and Index right here this is going to be export I user okay and it's going to be equal this one and this one is going to be User it's going to be type all right so right now let's hit save so right now we have the I user let's go back to the session right here I think um let's go into set user and let's change the state of this one so this one instead of user we're going to do I user okay L is going to be null instead and same thing for this one as well and then this is going to be null and this is going to be null as well all right so right now when we change this one there's a lot of thing that we need to fix because let's say for example in now bar right here you can see this is an error that this us information we do not have and things like that so for that this one instead of undefine we going to change this one to null and for this one we can just the user. roll so you can see when you do this you will have the roll and you can just do roll and this Avatar URL it we do not exist it's going to be the image URL and this one is going to be dot I think this one is going to be do display name all right so and then for this one let's do or Mt and then this one is going to be do the same thing or Mt as well and then for this one yep it's going to be the same thing which is going to be display name and this is going to be email all right so look like we have this one and right now let's see the now bar we still see this one I think we going have to fix one more thing is going to be in the now bar and right here we can check if the user is lock in we can see the profile H I see so the reason is that right now the user information may not be exist because inside our super base so we need to update the store this one so right now if you go back here and the user information there's no row security level for this one just yet so right now let's pick this one so for this one I'm going to do update B on the ID so they can select and then they need to be authenticated and this one is going to be read by user is equal to user ID which is going to be the ID okay and then we can do another one which is this one or is admin so if you example if you an admin you can be able to read and or you can read your own information only okay so right now let click review let hit save on this one so we close this one and if we refresh this one we should be able to see the user right here right now let's go back inside the profile right here and then we going to create one condition it's going to be is sub it's going to be user do subscription status right here user description status okay so right now we have this one we're going to go back inside here and then we're going to do is sub and then and we going to manage billing okay so right now if we hit save if do your subscription is true and yes you can see we show the billing and if not you will not see the billing all right so right now let's work on a functionality that let use this user to unsubscribe all right so for that let's go inside the web hook we going to create the listen even when the user unsubscribed first let's go into route right here right now we listen on the case customer updated and then we going to have another case so maybe maybe I can just copy this one and then we can come back here and I think we can remove this one right here okay so for this case right here it is going to be case customer subscription and deleted this one okay so right now we can get the object of this one can't deleted subscription is going to be equal to even the data. object all right so right here we are going to call to the function to cancel the subscription so let's work on that so for that let's go count on cancel description is going to be equal to right here and for this one we're going to do it's called to super base admin as well same thing that we do here this is what I'm going to do and then this is we need to do an Asing right here we're going to do a wait super base admin. from and this one is going to be a user and let's go update this information which just going to be update and then we can pass the field that we should just update from here you can see we have a three field of this one and then I can paste this one so the status right here is going to be the parameter that we going to pass so it's going to be Boolean this from this one and for this one is going to be null and also this customer ID is going to be null as well okay so right now we just transform through this to null and then we can check this one that equal by subscription ID with the sub ID okay this is with the sub ID and then the sub ID is going to be a string as well all right so this is should be a comma instead of the dot then all right so I think that pretty much it so one we have this one and then we can just returning back okay so right now we have this one so let's call this one inside our this and let's do this and then we can do the weit and then from this one we're going to pass the parameter the first one is subscription status which is going to be delete sub. status is equal to active so if it equal to active it will true but I think when we delete the status it's not going to be active maybe for this case um we going to just do turn to fault and another one is going to be delete subscription do ID right here okay so right now we have this one so we should be able to have the data and I think we can just do the same thing for like here we can just copy and then we can get an error St from this one error equal this and then we're going to return back to error user and I think maybe we can add more information here so it's going to be fail to cancel subscription okay and this one right here and this one is or maybe we going to do enable to subscription okay to to subscription okay and then this one is just just going to add the plus operator and we hit save all right great so right now we have this one so right now let's create a function to check out and this web hook will be called so for that let's go into the stripe action I'm going to create a new function which I'm going to copy from this one and then I'm going to do something like this and for the function name is going to be manage building and what do we need from this building is going to be a customer ID okay which is going to be a string great so right now we have this one so right here we're going to call a weight stripe. building portal. sessions. create all right and then right here we're going to need the customer ID as a parameter I'm going to get R from here you can see this customer ID and another one is going to be the return URL and I think for this case I'm going to do the process do env. URL okay let's do this and voila so right now we have this one so then we can use this one and call from our manage building component all right so before we do now let's go into stripe dashboard so what I want you to go is to go to customer portol and so when we click on the manage building so we're going to redirect user to this page as you can see right here so here is where you can control how the user can see the information and what kind of information that the user can see so something like that so for example invo right here maybe you don't want the user to see you can just untuck all this one and I think what I'm going to change in this one is going to be cancellation and I'm going to choose the cancel immediately okay so if you use a cancel immediately they will cancel all the plan immediately and this is what I want but you can choose a different option right here okay all right great so right now we have this one let's hit save chain and then give a password and right now we are good to go so once we complete this one we call to our manager building it will show to this page okay so for maybe I can show you for example if I unckle the invoy and then this is what the expectation that we when we call the manage building what it's going to look like all right all right so going back here let's go into our manage building component so it's going to be manage building component so I'm going to use this one as a form instead so I'm going to do form and let's do this right here and so when we have this form let's create a function to submit this one and so for that I'm going to to use a client instead for this it's going to be use client and for this one we going to do unsubmit is going to be equal to this and then when we call right here we can do a weight manage billing which is from the stripe action right here so we need the customer ID so where do we get this Comm customer ID so one thing that you can do you can pass as a prop or you can call the use user again which I'm going to do here and the use uh user is going to be use user and we can have the state and then it's going to be states. user and right here it's going to be user do customer ID okay stripe customer ID which is this one and right here we're going to do Json do string uh pass. pass the respond and I think for the respond right here I do not return anything just return this one which do stringy and this result okay great right now let's going back here when we doing this one I think for this one we can use transition to get the state from this one so we're going to do is pending we're going to do start transition is going to be equal to use transition okay and then for this one we're going to do start transition right here right now we going to use this and then we can do aing inside here okay great so right now from here we're going to have have the data I'm going to do the data and then we can open the window of this one so we're going to do window. location. ref dot uh equal to data. URL okay because the return from here is going to have the data. URL and all right so right now we have this one and let's use this on submit right here inside this one on submit we're going to call this one I'm going to do the E PR as well e do even default and this one is going to type as any okay all right so and then and for is pending right here we can use it inside here so here I'm going to create un loading icon so I'm going to import this one from react icon SL aai and the icon name is going to be AI outline loading three4 right here so it's going to be loading and this one right here copy this one and then we can paste this one and so for this one I'm going to wrap this one around us in a span so then this is will stay beside each other and let's keep a style of this one Flex item Center gap of this one is going to be two so right now I think we should be able to see this let's do toggle between this two so I'm going to do the class name is going to use the CN and then inside here we going to do the animation spin but and we going to go hidden go with this one always do comma right here is going to be hidden if it is not pending okay and is this not pending great so right now we should be able to see this all right so right now I think our functionally is complete let actually test this one and make sure this user is unsubscribed great so right now let's go back let's click on this building so right now and as you can see it redirect you back here so you can see there's no invo we do not show to the user and we have only the cancel plan on or if you want you can upgrade your um Visa information and thing like here right now let's try to do cancel plan right here click on cancel and right now everything's done and probably here you don't have to do anything probably no than right now you can just go back into Del block it will return us to our homepage and since this user is not subscribed anymore so you can see there's no billing anymore and this test is premium right so the user need to do premium right here so you can see right now this user is unsubscribed they cannot be able to read this one anymore and same thing here this is all premium content this user need to be upgrade so the next step to finish this we're going to work on the SEO and also building this block post so you can see each block post right here we want it to be a static so when so then the user when the moment the user click on this one they can see it immediately so for that let's build a static page for the block content and then for the homage right here we can keep at a server component all right so let's do it all right so one thing that I want to do now is to check if the session provider update the right user data and use it correctly so we just update the new user so for that you can try to find the use user right here and then you can see this is where we've been using it so let's go into h& view file and to see if there any red line that we need to fix and for this one and all right so right here you can see we have one red line you can click and this is where we need to fix so let's fix this one and this one is not going to read the email from user met data anymore it's going to be rich just user. email and all right so I think that pretty much it right so all of this one there's no red line okay everything is great so right now let's test again and subscribe this user again so let's click on this block post right here and then upgrade to Pro and from here let's fill out the information right so you can see everything is still working so all right so that's great so right now let's work on this block post right here become Static at build time and then so and then it also improve the SEO to this file as well so for that let's go into this page and as you can see this one so the way that we going to add this one is we're going to export a things and we're going to have the function and the function name is going to be generate static for and inside this one we do not have passive parameter so this is where you're going to fetch from the API so I'm going to call this API right here and then for this one we going to pass the star okay so we're going to pass the star and then you can you don't have to pass any type of this one and then you can just return as a block right here okay let hit save so if you go back to this API just to make sure and if you go into the routes I think this is not the one let's go to block and Route as you can see if we pass the star right here if the ID is equal to Star we going to return the limit only 10 and then we're going to have the ID so which mean that if you have 20 block post but a build time we generate only 20 uh 10 page only if you want all you can remove the the LD right here but if you want to build time a little bit faster so you don't have to put a lot of page right here so then we can pregenerate it later when on demand request okay so right now we have this one so the next thing that we wanted to do we want to generate the metadata that this one is for an SEO so it can be the same thing so I'm going to copy this one but instead of generate generate static pram this is going to be generate metadata and right here we going to pass a parameter just like this one and then we can just come back and paste this one right here okay and right now the API request will be the same as this one so I can just copy and paste this one right here all right so right here you're going to return so this is going to be return for example this is going to be a title and the title is going to be a block title all right so if you have a description you can add more into this one and what El do we want to add so right here let's say for example I'm going to add the author information so let's say for example this is my name so it's going to be delete web coding or something like that and then this one is going to be an open graph and this one is going to have the title as well and it's going to be block. tile this one and we're going to have the URL so the URL right here I'm going to use the process BNB do SI URL which is going to be this one right here right now coming back and then we're going to do this one plus SL block slash this is going to page pam. ID okay and then we're going to have the sign name so the sign name is going to be Deli block and we're going to have the image for this one and then this one is going to be block. image URL okay and then the type of of this one is going to be website I think I just import this one right here now we can remove this one we add the semic column right here okay right now this is great and then also you can add another keyword into here as well let's say this is going to be as a TCH so for example you can add like you know your name and daily block and another one is going to be daily web puding or something like that okay all right so right now we complete our SEO and our pregenerate Statics par so one thing that we want to test this out so we cannot run this one on our local when you run bill this one is is going to fail because as you can see this is happening at Bill time right so when you run bill it will call to this end point and request so Local Host res on API this is not going to work because at build time this API is not up and running and then if we try to generate this one this is going to fail okay this is going to fail and so one thing that we can do is to test this one actually in production and all right so let's do it so to test this one what we can do first we can try to uncommon this one make sure you not uh common you uncommon this one and right now we're going to push this code right here the we what we have done so far into our GitHub and deploy this to verel First all right okay so right here I'm at verel so I'm going to cck try to create a new project right here and this one is the next block that I just imported with my GitHub so I'm going to import this one and then we going to do the deployment on this one so but first we need to create the environment variable which is all of the key that we have here so for that let's copy and paste this one and create a new key for this one and for the side URL right here you can give your s URL this is will be your domain name that from here so for example with withell we can do a custom URL so for that let's say for example this is going to be https and the name of this one I'm going to do delete block let's say demo one doell do app okay so make sure you have to do this and later on you need to update your domain name to match your sign name okay so right now let's add this one and another one is going to be endpoint secret right here this is we need to add later but but now I'm going to add this value but this is going to be chain but when we create an endpoint with stripe this is going to be chain I think for now I'm going to keep as it is we can come back and update later now let's continue adding this one all right so right now our key is complete let's try to deploy this one I'm going to click on deploy okay so as you can see our deployment is complete let's go into here right now let's try to go into setting and change the domain name to match that we our sign name so for this one it's going to be delete block Das demo one all rightel app okay so this is what we want and right now let's hit save this one okay so this is and then if you look at the environment variable make sure sure that it's the same so if you go into the side URL and then you can copy and then you can see this is the demo one as well great so right now let's go in here and go back and try to visit this one and right now as you can see this is up and running very nice all right so right now let's try to test this one so right now I'm going to try to lock in with GitHub right here and as you can see this one fail it's R right to local 3,000 so let's fix this one so for that let's try to grab the domain name of this one and head back to super base dashboard and let's go into ication URL configuration right here right here you need to add more redirect URL so I'm going to add the URL right here with this value and hit add URL and another one is I'm going to add is going to be off/ call back call back and right now we can add the this URL as well okay right so right now let's come back here and try to lock in again okay so as you can see this user is lock in so right now it's nice so we go to manage billing and things like that I think since this user is already subscription when we test test on our loc hold right so right now let's try to test on the web hook so let's go on billing on this one I think for the web hook right here this is going to fail we need to add the web hook into our stripe dashboard and right here we going to search for the web hook and this one right here so right now you need to create a new endpoint for this one so let's add the web hook endpoint so the web hook endpoint will be this one right here and slash is going to be stripe SL web hook right and I think we need to Stripe Right here and then it is going to be API as well all right so right now you don't have to add any description so right here we're going to add the even so the even that we want is going to be the customer updated and another one is customer subscription deleted this two right here okay so right now let's add this event and then let's add this endpoint right here and so right here it will give you the signing secret so we're going to reveal this one so then we can copy this one and then we going to to head back into our cell the deployment go to setting and go to the environment variable and then we're going to update the endpoint secret right here okay so right now let's try to edit this one and the value with the new endpoint that we just add which is this and let hit save okay so right now we successfully add this end point to secret to our production and right now let's try to test this one again so make sure that everything is work out so right now let's try to go to billing and then this one it will go open this one let's try to cancel and cancel plan and right now just uh no SS right here and right now if we had redirect back if the blackp successfully this user is do not have any billing but look like we fail on this one let's refresh this one and the user is still here and if we check on this one it seems that we have some error on this one okay so right now as you can see our web hook signing is not wallet so you can leave that error no signature found expect this one okay so we call this one we actually call the web hook but actually the signature subscription like that it's fail H not sure what's went wrong maybe I copy the wrong value let's go back here we for the endpoint secret this is a one if we did this one so this is the right value right and that hit save ah I see so for this one so whenever you try to update the EnV one thing that you need to do is you need to redeploy your production again okay okay as you can see right now it's ready so for that let's come back in here and then try to refresh this one and make sure this app is running again but right now the from this user is unsubscribed already so I think to fix this one first we need to go into the database go to the user and try to update this user manually and for the information so for example the Stripe Right Here should go back to fault and what El do we have this one is going back to null and then also this one let's go back to null and I think there's one more field right okay we have this one customer ID okay so right now this go back to null and then if we come back here if we refresh this one so this user right now should be do not have the any billing so if this navigate right here they need to be subscribed and let's go ahead and uh subscribe this one okay okay so as you can see our web Hook is complete and we fix this one great so if we refresh this one we should be able to see the lock and the event that we call it's going to be customer updated as you can see and also this update the premium in our production as well great right now this user is premium and right now let's try to cancel the billing so let's go to billing and right now let's do cancels and cancel plan and no SS right here and then if we return back so this user is as you can see right now he cannot access to this page anymore great so right now our functionality is complete but the next thing that I wanted to fix is this one right here so right now if we try to refresh this one and if you try to navigate so you can see it will has take some time to fetch this data so this is not an instance uh it's not static so for example if I'm going to show you another page this one right here another demo which is this one right here and if we try to navigate to homepage so when we render this one there's some loading here and after when we click as you can see it's immediately there's no blocking there's no cold start when we click we see this content all right so but this one if we go back if we try to refresh this one and when you click this there's a slightly delay because this is not static as you can see when you click here it will wait a bit and then it will render this one so this is not static so let's try to fix this one so to fix this one is going to be really simple so you can see right now in our page we finish it already right so but we do not just push this one because the problem that I told you earlier but right now see now where app is deploy and then we can just run this one again so right now we can do this we can just get at and then we can push this one to a new commit since this connect to your GitHub it will auto deploy with inell as well all right so right now we head back to this one and that head back to a cell and let's go into this one right here and then go to deployment as you can see there's a new running deployment and then we can check the Bild detail right here okay so as you can see right here we generate a bill detail so you can see we generate this one is going to be as a static and Al I think we have this Arrow we're going to come back and fix this one soon but as you can see this two block pitch right now is become Statics so right now when this finished so right now everything is finished so let's go back inside this one and test this one again so we come back here and we come back to this page and right now if I click on this one so you can see there's no call start when the moment we click it we see it immediately because this is Statics okay this is Statics and right now let's try to maybe update this one information let's go into the same page for this one and go here and then click on visit right not this one right here think let's go this this and then we it so we should be so this user is an admin so right now let's try to log in okay this is an admin user let's try to let's say for example create a new page and things like that and to see if it's uh static as well or not right now let's try to create this one I'm going to do test this one going to be three image is going to use the same thing and I'm going to give a random this one the population is going to be true and let hit save this one so right now the we it's complete so right now if we going back if we try to refresh this one we should be able to see and if we click on here you can see it's instantly show to the user great so right now let's try to see the update and things like that make sure everything work out let's go into back here and then it's going to be update three update then hit save and right now if we revalidate this page if we refresh this one and as you can see right now it's updated and right now if we come back if we refresh this page and we click as you can see it's instantly see this one great so right now everything is complete so you can see we also have the meta data for this one for this page as well and if you were to use this one to share for example you're going to share this one to so for example you're going to post this one to Facebook or Twitter we can do this one and we have the generate metadata for this one so you can see we have our image and our title and this is the description that we need to update all right so let's try to work on and update this metadata right here all right so let's do it okay so right now let's work on more on metadata so you can see right here for the homepage right here this is the title but we don't want to do this so for the title of this one what I'm going to do is we're going to use as a template so it's going to be template and this one is going to be if you navigate to any page it will replace with this one or we're going to do with the daily block okay okay this is going to be a daily block and for the description right here and I think for this one we need to default is going to be daily block all right so right now for the description right here you can pass anything so I'm going to copy the text right here right here I'm going to do I'm going to paste this content right here okay so right now we can have this one so as you can see right here you can see with this one it will replace the daily block right here and also we add the title that from the from the current page that we add before all right great so right now we have the description and then we can have the open graph for this one so for that let's go into block detail right here so I'm going to copy what we have right here and then so we can come back here I'm going to paste this one and for the title of this homepage so this is going to be daily block and the URL we can do something like this and this one we can just have the the side URL only and this one is going to be Del block the image UR so use this one you can get from the public folder which is going to be I'm going to do og. PNG right here so this is I have added before this image right here inside the public folder all right great so right now we have this one so what s do we wanted to do so another thing is going to be keyword the same thing that we have here all right so we go come back here so this is will be the metad data for the whole page so if you go back right here right now you can see we have this daily block and we have the metad data when we share this one and this metadata right here will be the metadata for H individual page so for this page right here so if you navigate to this page and then we look through this metadata what and then compare with this one so for example it will render this one first if something here is missing such as for example the description here so this description will apply to this page as well okay but if you have your own description you can add it to this one as well great so right now we have this one so the next thing that we wanted to do is we wanted to build the footer for this one so let's do it okay so for the footer is going to be really simple and I'm going to go into this one and go to the component and right here I'm going to create another one called footer do footer. TSX and we can run our snipet right here so right here I'm going to replace this one with the footer and for this one I'm going to give a border p and then I'm going to do py to 10 okay and then inside here I'm going to have another div which is going to be right here and for this one let's give a WID of this one it's going to be Max width to 7 XL and P5 to 10 and then PX to five and then going to do the F from the MD up let's do this one P0 and then I'm going to do space y to five MX of this one to Auto and I'm going to do Flex Justus toy between and then from the MD up I'm going to item Center and then it's going to do Flex to and then from the M the up I'm going to do flick Pro okay right now we have this one so let's have this content right here so right herey I'm going to give the class name of this one and this one I think I misspelled this one so for this one let's give the space y to two I think for to 10 and then inside here we're going to have another div and inside this div let's give a class name to space y to two and then width to full and then SM WID only 96 okay withd only 96 r and inside here we're going to have our logo which is going to be to as a daily lock and then we're going to have a paragraph which is going to be the description so we go to layout I'm going to copy this text right here and then we can come back here I'm going to paste this one right here then we paste this one okay so I forgot the semic column let's hit save this one okay right now let's try to use this footer and then we can update come back and update this one later and then let's go into the layout and then first I don't want to put the layout inside here because this layout will share with the dashboard as well right so if we go here if I put for example if I fo put the footer inside here it's going to be footer and let's hit save and right now we should be about to see this footer right here nice but if I navigate to the dashboard I see this footer as well I don't want the dashboard to see the footer and so for that we give this layout and then we do something else for the footer so for that let's go and inside here and for the footer I want it for to around with the block this one so for that I'm going to create the group this one is going to be the home page right here and for this one I'm going to move it into the block into inside here as well okay so right now and the next thing that we wanted to move if you want to move the homepage which is this page right here inside our home as well so for that let's go inside the home folder let's move this one so right now you can see we have this page so the the next thing that we wanted to do let's go and for this one and let's go inside the home right here we're going to create another file which is going to be layout. TSX okay and I think for layout right here will be the same as layout dashboard so I'm going to copy from this one and go into this layout I we just create and right here what we can do we can just remove everything that we have here and and also here as well and for this one we can just put our footer right here let's do our footer and let's hit save okay make sure we import from the footer and right now as you can see inside the dashboard we do not see the footer but if we navigate back to our homepage and as you can see if you scroll down right now you can see we have the footer right here so right now let's try to finish our footer right here so we can come back here and then for this one but I'm going to give the style of this one is going to be class to Tech to Street XEL the fun of this one is going to be bowl and right now you can see we have this one nice and then we can add more info right here will be the icons to this one and then it's going to be outside here I'm going to add another diff inside this diff let's add the icon it's going to be the GitHub icon and another one is going to be a Linkin icon from this one I think probably not link it's just going to be Link in icon and another one is going to be let's say the Discord icon okay all right so let's create so right now if we scroll we should be able to see this and for this one let's give a class name to flex item Center Gap this one to two and there you go so right now you have this one great so we can give a class name of this one to width to five and height to five as well and probably let's give to the of the icon right here okay great so right now we have this so another one that we wanted to do I'm going to do the H1 right here and then we going to do like you know copyright and things like that we're going to do this and then we're going to do copy and this one is going to be 23 and let's let's say I don't know my name CH King dot all right reserve and let's hit save so right now we should be able to see this and I think this one should be as this one so right now we we have this one great all right so right now I'm not sure okay this one should be at the same size as this one so let's pick this one and if we scroll up right here I think for this one instead of the item center it's going to be item end okay so when we on the smaller screen we can see this this is look good but when we on the larger screen we should be about to see something like this okay so right now if we navigate back here so we should be about to see the footer inside this page as well and we scroll down so you can see we have this footer very nice so right now we have this one everything is great okay so I think that pretty much it so right now we complete almost everything so one thing before I want to end this video is to tell you how to build this one on in the local as well so right now if we go into the page ID right here so if you go into this page ID okay so right now when we build this one so this will call so I think we can change the SI URL to the production URL so then we can run this one so for that let's go Local Host EnV right here and then let's try to change this one so for this one let's go into the let's say Brad URL and then for this one let's go and go into the our Brad URL which is this one right here let's just copy this one and then so when we come back here and then I'm going to shake this one and to the demo one okay to the demo one so right now let hit save this one let's actually try to build this one okay so I think maybe we have some error on this one right here okay so maybe we can before we build let's pick this one so for that let's go into our layout which is going to be this this is going to be metadata base we need the URL for this one and this one is going to be new URL and this one is going to be the I can use the process. our site URL okay and can do the comma here and can do not operator right here all right so right now the arrow should be gone all right so right now we also add a new EnV and for this EnV right here we're going to use it at our Bild right here so this is going to be this one and instead of side URL we can use with this and with this as well and with this as well all right so this is going to be at Bill time all right so right now if we hit save on this one and then we can run on PM run Bill and hopefully this is going to work in our local as well all right so as you can see right now our bill is complete it's bu you can be tested on your local as well and if you are on development mode you can just change this one back into the side URL okay all right so I think that pretty much it that's crat so right now we have deoy and everything's already so I think that pretty much it guy on this video and we just finish and everything on this one and hopefully you enjoy this one and all right so don't forget to like And subscribe if you have any error you can go into Discord and ask me there and also you can grab all the full code inside the description and thank you for watching and see you in the next video

Channel: Daily Web Coding

Views: 26,120

Keywords: nextjs, next.js tutorial, how to build a blog using next.js, how to create blog with nextjs and tailwind css, build a next.js blog, nextjs react, next.js, next.js blog tutorial, react tailwind tutorial, next.js contentlayer blog tutorial, next.js with stripe, next.js markdown, react markdown, supabase with stripe, markdown editor, dailywebcoding, next.js server component

Id: 293ZtCvxh90

Length: 297min 53sec (17873 seconds)

Published: Wed Nov 29 2023