Build A Medium Clone With Next.js, Supabase V2, NextUI, and PostgreSQL (TypeScript Tutorial)

what's going on it's Cooper codes and in this video we're building this full stack next.js Super Bass and typescript website that allows users to build and share articles this tutorial is intended for people who are just getting into kind of intermediate program or want to learn how to use Superbass in a full stack environment we build a full authentication system with Super Bass where we can log in for example I already created an account with Cooper codes to a Gmail so I can sign in like this will then get sent to the main feed where we can see all the different articles for example if I want to go to Cooper codes 3 I can read this article here and you'll see we are looking at an article with a particular ID and we're getting all the information just like you'd expect from a full stack project we can go back to the main feed and we can also take a look at the article that we own for example I'm logged in as kubercodes to a Gmail so I can go over to this article about why you should subscribe to Cooper codes and as you guys will see there are actually extra buttons that allow us to manage this article because we own it for example I can edit the article and I'll add something to the article like thanks or clicking on this video and then I can update the article here or go back and we'll see we have the fully updated article and that is updating in our post grade SQL backend where we create a table to hold these articles we can also delete articles so we can see that if I want this article to go away I can press delete here and boom we have no more article and let's say we want to make an article again we can go up create an article here it shows who we're posting as or pretty much who we're currently signed in as gonna make the title let's get started with the tutorial and the article text is hopefully you guys learn a bunch from this video so we can create this article and you'll see it's going to show in the main feed here so this is the main idea of what this project is going to do it's relatively simple as you guys see the article is just one block of text and you know the UI isn't the craziest you've ever seen but this tutorial should get you super familiar with managing data in a full stack environment using next.js typescript and Super Bass let's get into it we can get started by going to an empty folder and opening up visual studio code code or just a terminal in that empty folder then we can create our next application by saying npx create Dash next Dash app at latest and because we are going to be using typescript for this project we want to say dash dash TS that's going to build everything in a typescript fashion this will then ask you for the project name I'm just going to call this medium Dash clone so you guys will see we have our full next application that got generated let's go back to the terminal and CD into the medium clone folder from here we can install all the different packages we're going to need for this project for the user interface we are going to be using next UI so I'm going to say npm install at next UI Dash org slash react we can then npm install all the different Super Bass helpers we are going to need for both authorization and using the Super Bass client for database operations like creating articles so we can npm install at Superbass slash auth helpers Dash next JS we're also going to install at Super Bass slash Dash helpers Dash react I know it's kind of weird to see some react helpers inside of an xjs project but some stuff is only in the helpers react repo so we're going to need to get that functionality from there which I'll explain as we use that functionality and then finally we need to add Super Bass slash auth Dash UI Dash react so these are the three libraries we are going to need so you can press enter and so if you want to double check you can go over to your package.json and it should look something just like this all right so this is great news that's all the npm installs we have to do so let's get started by going into the pages folder and then we're going to want to create an underscore document.tsx this allows us to customize the document that gets rendered and it's necessary for next UI to work so I'm going to copy paste some code in here that I'm going to put in the description rarely in these tutorials will you ever see me copy pasting code but this is just some boilerplate stuff we need so the CSS baseline from next UI right here gets imported correctly and so we can use next UI throughout our next.js project so there's going to be a paste bin in the description I'll mark it with something like underscore document copy paste that code and bring it over to your underscore document.tsx here and make sure to save it we are then also going to want to go to underscoreapp.tsx within our underscore app we want to render everything that needs to be around our application you can think about things such as providers for example providing Super Bass to our application and also providing UI to our applications so next UI providers as well this is because everything within our application is going to need access to superbase or next UI is an assumption we make here we also want a consistent navbar to show throughout our application so we can put the nav bar here as well which is something that we are going to create in a second but for now we can get started by initializing Superbass we can start by importing a Constructor called create browser super base client and that's going to come from at Superbass auth Dash helpers Dash nextjs this allows us to create a super based client that we can use throughout our next application we can copy this import and then bring it to another line because we're going to get some similar syntax here we're going to import session context provider and that's going to come from the react Library so auth Dash helpers Dash react we are also going to use a simple use state from react which is going to allow us to hold our Super Bass client within a react state which I'll show you guys in a second so initializing a Super Bass client in your next application is actually really simple you can start by using a use state which is just something that allows us to hold a variable within reactor and xjs we can set it equal to an arrow function what this Arrow function is doing is it allows us to call a Constructor if we want to you know construct something and then put it in the state so we can say create browser super based client this is going to create a full superbased client and then store it within this state if we want to get that stored variable we can save it into a variable such as const Super Bass client is equal to this use state so this is great this means our client is fully initialized but our actual application doesn't have access to it yet what we can do is we can make this return statement multiple Lines by adding some curly braces here or some parentheses and then we can initialize our session context provider this allows our entire next application to constantly see the super based session we initialized right at line 11. the session context provider takes in a super important property which is the super based client property this allows our provider to show a certain client for example the one we just generated at line 11 to our entire application I'll show you guys in more detail later but as we use the Super Bass client throughout our application it's going to be referencing this client we created a line 11. so you might be asking an important question how does this super base at line 11 know who you are for example how does it know your Super Bass URL or your Super Bass a non-key for example well first we have to go over to Superbass and create our account so now I'm going to create a super base account so let's get into that so let's go over to superbass.com and sign in you guys should be brought to your dashboard for example I have some stuff from previous videos let's go and create a new project and choose your own organization I'm going to name this Super Bass medium clone and then this database password is incredibly important so make sure to generate a password here or use whatever you like and then copy it and save it I'm pretty sure Super Bass doesn't allow you to look at this password again so make sure to copy it and save it somewhere safe this for emphasis I'm going to use a notepad here and I'm going to say database password is equal to this thing right here besides that choose the region closest to you and then create your project so super bass might take some time to actually get set up but two very important things you need to copy are the Anon public key so it's going to be this key at the very top here so make sure to copy this a non-public over here it's gonna be very long and then the URL this URL is actually how you manage your database and just manage Super Bass in general is with this URL right here so copy this just a URL is equal to this one quick note once your super based project gets fully initialized by Super Bass you're going to be seeing a different page than what I copied those variables from before to get your a non-public key and also your url you're going to go to this page which is your main project page scroll down and you'll see that your url is going to be right here and your API key is going to be right here let's go back to our next project and get all of our variables initialized to use Superbass so you want to go to the outermost folder of your project so for example the medium Dash clone project and I want to make a new file this is going to be called dot EnV for environment variables and then dot local so specifically our local environment variables when superbase gets initialized it will look into.env.local for all the variables that it needs for example we can start variables say next underscore public underscore and then you have to spell it just this way because this is what Super Bass expects is Super Bass underscore URL is equal to we can take that URL that we got from before and we can just copy this line for Simplicity we are going to have two more variables the next one is going to be super bass underscore a non underscore key so your Anonymous key we can copy it from our notepad here and then we want the database underscore password like this which is going to be this password right here so bring it over to the string and so if we go back to this underscore app.tsx which we are just working in when we call this create browser Super Bass client what's going to happen is it's using the dot env.local parameters in the background and so just to clear up any confusion even though we're not specifically calling these env.local variables they're incredibly necessary because this function right here needs the variables to exist but now what it's doing is it's creating our Super Bass client with these variables so it's going to be specific to whatever information you provided to it so pretty much see the base is going to work with your actual account that you made on Super Bass and so that's all we need to do to initialize Super Bass I know it's kind of tedious in a lot of different steps but getting super bass initialized in your application is incredibly important now we can do something that's a little bit more lightweight easier is we are going to import the next UI Provider from at next UI Dash org slash react and so the order of these providers doesn't really matter in our case but I'm going to put this next UI provider within the Super Bass one just like this and so this gives our app access to anything it's going to need from next UI for example all right so now we are going to create two different components for our next application the first one is the navbar which I kind of already said up there but we'll just say this again we're going to make the nav bar and then we're also going to create a box component for the content of our website to live in you can imagine this is like a container for the content that we want to be standardized from each page this just makes our lives simpler so we don't have to do like different container styling for each page of our application for example so we're going to go outside of pages go to medium clone here and we are going to make a components folder we can get started with the Box because it's going to be relatively simple compared to the nav bar because in the nav bar we're actually going to get into authentication so we can open up the components here and add a component and call it box dot TSX and so we are going to use something called styled so we can import styled from at next UI Dash org slash react this allows us to make a div for example with a certain styling you could imagine the content of each web page is going to be held within this style div from next UI so we can export const this box element is equal to style which is a Constructor it's going to style something so it's like what do we want to style we want to style the div what styling do we want that div to have by default we are going to use something called box sizing is equal to border Dash box this isn't really a CSS tutorial or anything but this is just a very simple way to get nice looking boxes on every single web page and it allows us to make a div we can further customize so let's go back to underscore app.tsx and do that so we can now go and import this box component that we just made from dot dot slash so go back one folder go into components and then go into box is how that styling works there and it's not a default export so we have to have these curly braces around it and now we have access to a box that we can wrap around our component or the page we're currently on is another way to think about component and so box is a div and so the interesting thing about styled which guys don't worry about too much is that we can treat box like a div and give it properties like a div from next UI and so I'm going to add a bunch of CSS to this box because this is a very important part of our application and we want it to look nice and so I'll do my best to explain every single CSS property that we're adding here even though this isn't like a super CSS tutorial this is just to make everything look good we can start by saying PX so that is padding in the X direction if you could think like an X Y axis have Patty in the X direction we can say dollar sign 12 and I'm going to have a bunch of different variables that have a dollar sign this dollar sign means it's a variable 12 designated by next uis where this dot where this dollar sign 12s come from is dollar sign 12 represents a certain length specifically from next UI so we can hit say padding in the y direction is equal to dollar sign 15 is something I found looks pretty nice and we can do a little margin top and so this margin top is going to make it so our pages are directly aligned to the nav bar we want a little bit of space between our page or the actual content of the like site from the navbar so we can add a little bit of space by saying dollar sign 12 then we could do something called at XS Max this is pretty much saying the max properties for certain properties on the extra small setting of our screen for example we can set I want the max padding in the X direction to ever be dollar sign 10 on the extra small screen and to make this box a little bit more like a column I'm going to say Max width is equal to 800 pixels so this means if we're on like a super large screen for example it doesn't like make our articles super long because since we're reading text we want the text to be relatively readable so we're going to keep it to a smaller column and then to align our content to the center of the page we are going to say margin is equal to zero Auto which is a classic way to get the box aligned to the center of the screen I know that's a bunch of CSS properties so thanks for staying with me guys but now we have a box that's going to hold the actual content of whatever pager on which is great news and so we now want a navbar to show on the top of every single page and so I'm going to keep a little comment here saying that we want this navbar to be above the contents you can imagine we have the nav bar here and then this component represents a certain article that we're looking at for example and so we always want the nav bar on top of the article or the nav bar on top of the main feed for example and so let's get started with creating the snapbar we are again going to go into components and we are going to go and create a navbar component.tsx alright guys so now we can make the navbar component so I'm just going to make this a simple const functional component with saying navbar component at the bottom here going to make it equal to an arrow function that takes no properties is pretty much what this empty parenthesis means and we can just return nothing we'll just stop yelling at us and I'll be actually going to make something then at the bottom we can export default navbar component so this line allows our navbar component to be used throughout our next application so I'm just going to return a little fragment here so we get rid of the errors because before we do any styling I'm going to show you guys how we can use the Super Bass client and the user inside of our navbar so I'm going to import two important things here firstly I'm going to say import use user and then also use superbase client these are called react Hooks and these hooks give us access to the user and also the Super Bass client and so whatever component you're using you can use these hooks to gain access to that information and so they're going to come from the at Super Bass slash auth helpers Dash react and so if I want access to the Super Bass client I can say const Super Bass client is equal to use super based client and yes it seems crazy but it really is that easy and if I want access to the user I can go on top of any component is a const users equal to use user I also need another hook for our now bar which is going to be the next router so I can say import use router from next slash router use router and so we can Define the router by saying const router is equal to use router at the top of our component here and so that is how we can use super bass throughout our components let's get started by importing some things to actually create these structure of our navbar for example we can import the nav bar the button and the text our three ones we're going to use from at next UI Dash org slash react these are all a bunch of pre-made components that we can use to make our lives easier when designing the components and then this is the last import so thanks for staying with me guys we can import the link from next slash link so we can start by wrapping our entire component in a large just generic NAB bar like this and I want the navbar to be is bordered which is a property that gets defined by next UI so we can add it border to our navbar also is compact which gives us access to some compact styling within here we can do a bunch of different things related to the navbar for example the navbar.brand is the kind of main title that you see to the left of the navbar for example it's going to be share articles in our case and this brand is going to be as a link component and using this link component we can attach an href which is going to send it to a certain link for example just regular slash so this is going to take us to the home page of our application we can now establish some content that's going to sit in the middle of our nav bar for example by using navbar.content I'm going to hide this content when we go to an extra small screen and we can also make this content have a variant for example we can highlight Dash rounded it's a variant I found that looks nice and you can test a bunch of different variants out and stylings for whatever you like the most within this content we can store navbar.links like this for example you have a link to the main feed which you can pass in href to which is going to send us to the slash main feed like this we can also do a link to the create 8 article which we can pass to the link of Slash create article we can then have another navbar.content and this is going to store all the content that is going to hold our user logic and so in next.js we can use something called conditional rendering to show certain pieces of data if the user exists pay attention because this is super important for using superbase authentication in your apps is a very common thing you can do is you can say exclamation point user and so what this is saying is if the user doesn't exist it's going to be exclamation point false right so or like some type of like empty value which is going to get registered as false and so this is going to eventually become true so if the user doesn't exist what do you want to show to your application is what this exclamation point user is saying and so we can even do something like this user doesn't exist what do we want to show and then we can do a colon and this is a ternary statement is what I'm using with this question mark and the colon and down here with this colon we can say that the user does exist and so you can pretty much render two different things in your application which which is pretty neat for example if a user doesn't exist we are going to show a navbar.link it's going to have an href pointing to the slash login route within the link we're going to have a button which is going to be styled with the auto and also flat which are two properties from next UI allow us to make a cool like a button and it's going to say login so this is a button that allows the user to press on it and then they'll get sent to the login path but if a user does exist we can do something like this we can say okay let's take a nap bar dot item for example and I want to make some text that says hello to the current User it's going to say hey and then I can even use variables that come from the user object we'll get more into what the actual user object contains later but just know that it contains an email so you can say user question mark dot email this is just in case the user doesn't use an email or there's no email attached to the account for Simplicity this video is only going to have email logins but this question mark makes it so let's say user is null for example it's not going to try and say like null dot email or undefined Dot email because I could toss an error and so this question mark is common Syntax for saving us from that error where if we try and get dot email out of undefined it's going to give us an error right and then we can also use another navbar dot item and now we can instead show a button which is going to sign out the user instead of just sending them to like an href route of like slash sign out like think about it logically have you ever been sent to a sign out page on a website before probably not it would just sign you out and so what we're going to do instead is first of all we're going to have the auto and the flat to keep that same styling and then we can use the on press which handles the event when the user presses on the button we can use an arrow function within here to call more Logic for example sign out user which is a function that we can just go make so when we press on the sign out button it's going to call the sign out user function so we can go to the top of this component and Define the function like this function sign out user and superbase makes this painfully easy to do if we have a user currently signed in and we want to sign them out we can go to the Super Bass client then we can specifically ask for the auth related things in our client and then we can call the DOT sign out function that superbase gives us after the user has been signed out we can also push them to let's say the main page for example so just to the Slash and if you're curious about what this slash means because it kind of is uh in this href as well you see it a lot slash just means that they're going to be sent to localhost 3000 slash or just localhost 3000 and that's all the logic we are going to need for pushing them to that route and so this is our full navbar component which is super impressive one thing is our localhost 3000 is still showing the default generic next JS website so we can go over to where that logic is defined in Pages then index.tsx as you'll see index.tsx at the very top of pages is pretty much the localhost 3000 page that's how you guys should think about it it's the base route of your application so what we can do is we can get rid of all all this boilerplate code we don't need any of this and I'm just going to make a very very simple page for our home to look at so I'm going to use this react fragment here just to hold the little components we're going to create and these are going to get imported from the next UI Library so I'm going to make some curly braces from at next ui.org react and we only need access to the text and the spacer this is going to be a painfully simple landing page so this is like the landing page of your website I'm making this intentionally very simple just to make the tutorial simple but I'm going to make a text element the top is going to say the future of article sharing are we actually making the future of article sharing here you know what I say we are I say we are so let's keep it going we can make a spacer in between this pretty much allows you to add space between different components and allows you to say how much space you want in different axes for example in the y-axis I want one unit of space and these units of space are just defined by next UI I also want some text which you can set equal to to the dollar sign large property by setting the size here and we can say something like share articles it's the name of our fake website here allows you to create and share articles if that wasn't already obvious enough all right so if we go to localhost 3000 we are going to see this very basic piece of text but we want the navbar to show on top of every single page how we can do that is let's go over to our underscore app.tsx and as you guys will see look this comment align 24 is going to do us good because this is exactly where we want our navbar and because we did a default export we can go up here and say import navbar component from this navbar component we can also just call it navbar just to show you guys something else you can do with default exports is you can name it whatever you want it's just going to put the export of this component into this variable name so we can just use navbar like this and then we can put the nav bar right here where we want it to be by putting the component in like this and just closing it right away all right so now we are going to have a website that has this nav bar that we just made and it's also going to have the component of the website at the bottom here so let's start our application and see everything alright so as you guys can see there is some strange stuff dialing going on here I already know what this is but just to explain some problem solving we have this nav bar which looks suspiciously good it doesn't look like there are any external Styles being applied to the nav bar here but the pages seem to be impacted by this external styling this is because the next JS default styling is still being applied to every single page so we can change that by going to underscore app.tsx and seeing if we scroll up here that at the very top we have this globals.css that's being imported we do not want these Global CSS properties from the default next app so we can delete it here like this boom there we go so now we have access to this page which obviously if you want to make a more advanced landing page go for it but for this website we're just gonna have this very simple landing page for the users to see now we can get started by creating the authorization processes for this full stack website you'll see if we go to login right now we are going to go to a page that could not be found so we are going to create the page for this slash login route next.js makes it surprisingly simple to make pages to certain routes we can just open up pages and if we want to go to localhost 3000 login we can go and say new folder inside of pages and name it login when we load the slash login route it's going to look at the index.tsx of the certain route we're looking at So within this index.tsx is where we Define what do we see when we go to slash login and so we can create the login page by saying const login is of type next page and so this is where the typing of the actual page comes into play for example we want to import next page to our application which we can just do by saying import type next page from next and this is going to be common among all the different pages we're creating for this tutorial and because we're not using properties which I'll show in a different component we are just going to have a simple arrow function like this to Define our login route we can then export default we can then export default login on the bottom and to make our lives easier I recommend you guys go over to your now bar component real quick grab these imports from the top of the use user use super based client and also use router grab these Ctrl C and then bring them over to your login page then again you can go over to navbar component and then grab all these cons that we Define above the component like this and then also paste those into your login page this allows us to use all the different functionality here within our login whether that's super bass user router we can use it all now which is great and then to make a auth component in a relatively short period of time is we can use the pre-built component given to us by Super Bass so we can import that auth pre-build component and we can also import a theme if we want to use it such as theme super this is going to be from at Superbass auth UI Dash react one cool piece of logic we can add to this page is that let's say a user loads this page but they're already logged in we don't want them to be confused and try and like log in twice or think they weren't logged in like why are you allowed to go to the login page so one cool thing we can do is we can say if the user does exist we can then router.push to the slash main feed so this pretty much says get out of the login page page we are going to shove you over to the main feed instead we can then return the actual component we plan to show in our application here for example I'm going to make the auth component which is just defined like this it's going to have an appearance of theme is equal to theme super and then incredibly importantly this auth needs to say which Super Bass client are we using to log in and authenticate our users we can say super based client is equal to the super based client that we have at line seven I know this is pretty wild for a whole login page but that's it that's all we need to do what's going to happen is this auth component fully manages the sign ups the logins and everything like that and as soon as a user gets logged in from this auth component we are going to shove them over to slash main feed so let's go and log in our first user we can go to the login page by pressing the login here and you're going to see it's going to give us that pre-made component so we can go to the bottom of this component and say don't have an account sign up we can then create an account by entering the email address and then creating a password you should see check your email for the confirmation link I'm using a test email here and you guys will see Super Bass even sends users emails to sign up so I can then confirm right here and boom it's going to send me to my you know localhost 3000 here which is pretty neat you can change this redirect link that comes directly from the email because I talked about being redirected to Main feed earlier but if you go directly from the email it's going to send to the landing page you can change how this redirects but I'm not going to get into that in this video just look up Super Bass auth redirect and you should see some good materials if you want to do that but look at this amazing thing is it actually recognizes that the user remember this Cooper codes to a Gmail right here is the coming from the user object from Super Bass so that means we have a user authenticated with Super Bass and we can even log them out if we want it for example and so just to test their functionality I suppose we can sign out this person all right we're signed out we can then log in and I will say before I press a sign in we are going to get redirected to Main feed and when we get redirected it's going to be a 404 because we haven't created the main feed page yet right so let's sign in and boom we got redirected to Main feed which is great but it's a 404 we haven't made this page yet which is absolutely fine but pat yourself on the back guys we now have a next JS and typescript application with full stack Super Bass authentication which is awesome so now that we have users we know we can log these users in we need to go and create the postgrades SQL table for our articles if you guys are unfamiliar with SQL do not worry it's actually really simple table and it's actually a great introduction to understanding SQL so you want to go to the main dashboard of your project and then you want to go to the left and press on this SQL editor from here we want to go and press the top left and say new query gonna zoom in for you guys here I don't know why it's so small on super bass's side but here we go we can get started with our query by creating a table and so this is a table that allows us to store data and we can name this specific table articles don't be super concerned about the syntax but I'm going to explain what each line is doing just so you guys know what's up we can make an ID which is going to be a big int which is like an integer but it stores more surprise and is generated by default as which means we want to show it as the identity primary key and so the primary key is how we can identify a certain article is with this ID right here we also want to attach the user ID for who actually created a certain article so we can store this by user underscore ID is a uuid which is going to send a reference so you're going to say references to auth.users and you want it to be not null so there always has to be a user ID attached to an article and again I'm explaining this kind of Simply this isn't exactly an SQL tutorial but it's should get you guys started with me just talking about it like this those are going to be the more complicated ones now you get to super simple SQL types for example the title of the article which is going to be a text the content of the article is going to be text I'm also going to attach the user underscore email to the article which is going to be text again and then I'm also going to keep an inserted underscore at this was shown in documentation so I think it was great to show and we're also going to use this as like the date for when it was created and so we can say time stamp with the time zone default as the time zone of UTC converted to text of the current date which is now and then make sure to have a semicolon after the end of this create table articles and then we honestly not null so we there should always be an inserted ad is what the not null means and so now we are going to get into something called row level security with row level security we can say at a certain row what is the user who is authorized allowed to access so this is a combination of both postcard SQL and also what Superbass allows us to access and so we can say take this current Table we can say alter table articles so make sure it's the same name enable row level security this allows us to have certain operations be protected for example if I want to create an article I have to be a user so I can say create policy and we can name the policy called users can create articles on the Articles table or insert with check so we're checking for a certain thing that the auth this is where Super Bass comes into plays with this auth here the dot uid so the uuid pretty much of the user is equal to the user underscore ID that is stored in the table which is going to be that user underscore ID at line three so users can create articles pretty much if you want to insert into articles you have to be a user is what this line is saying here then we can copy this policy like this because we're going to make a similar one called users can update their own articles and so this check is actually happening after the fact that you know once the user is done they are the user that created the article if that makes sense they have to have a uid to create the article in the end but if you want a kind of real-time thing to happen you have to say insert or for example update using this same pattern here that the uid is equal to the user underscore ID so in order to make an update they have to be the user that owns it as a way to think about this and the same thing happens here in order to create a deletion instead so users can delete their own articles in order to trade trigger a delete event they have to be the user who owns it so the exact same logic applies and then you can think about okay we want to you know we want people to look at any article and so it doesn't even matter if you're a user if you're logged in we want the things in the Articles table to be accessible by anyone so you could even not be logged in and still look at an article for example we can create that policy by saying that articles are public and then we're gonna and again it's going to be on the Articles table it's going to be for when we select data we wanted to be using the policy of just true so there's pretty much no policy it's saying that we want it to be true no matter what if we try to grab data from articles yes you can have it a hundred percent of the time you can always get articles data and then so sorry guys you have to go at the end of all these different checks and make sure to put a semicolon incredibly important so semicolon at the end of this one at line 13. semicolon here semicolon here and semicolon there if you guys got lost or it's not quite working at any part of this process creating this table because we're just going to run this and then we're done I'm going to have this in the description so feel free to take a look at it when you need to and then to run this operation on our poster SQL we can go to the bottom right here and press run so you'll see we had a successful run this is great news and so if we go to our left and we go to the tables and we're kind of saying goodbye to this code we're never going to see it again we're going to go to the tables now go to table editor we will have one table that we just created so take a look here go to all tables go to articles and boom I'm going to zoom back out and we can see all the different things that we would expect from this table we have the inserted app we have the email the content the title and the user ID and also the ID which is being that primary key to this certain row hopefully you guys learned a little bit about SQL that's just like a beginner's guide but now we have a table to store articles which is great news so I think it makes the most logical sense to now get started on making the create article page because when we create an article in our next JS app we can just refresh this table and see the inputted data so it doesn't really make sense to make the main feed or anything like that quite yet because we have no articles to show so we can go into pages in our next application I'm going to create the create article folder and within here I'm going to make that index.tsx which represents the create article route and so just to make sure I don't lose any of you guys this create article folder in the index.tsx is what gets served up if the user goes to localhost 3000 slash create article so I think it makes most sense I'm just going to go over to the login I'm going to control a control C so copy this whole page and then bring it over to our create article I'm going to put this comment the bottom and so we can change this const login to just be the create article instead and make sure to also change that login at the bottom to create article it's just because we are going to need access to safabase user and router again so I just want to get all the Imports and everything out of the way we're not going to need auth so I'm just going to make the return statement an empty react fragment for now and then get rid of auth so I'm going to style this page first and show you guys what's going to look like then we can add all the functionality for actually creating an article within our postgresql so I'm going to start at the top by saying import I want the text I want the text area which is like a big rectangle block of input text I want the grid and I also want buttons all from that front-end Library using next UI Dash org slash react oh and text area that the second a is the lowercase and make sure to get rid of this if statement on line 13 that's just going to like shove you to the main feed if the person's ever a user and we can also use a really cool helper from next.js is when someone goes to create an article we're kind of making the assumption that they are a user and AKA they can create an article if they're not a user they shouldn't be able to go to this page and so we can make some logic to make this page kind of safe from people that are not logged in so if you're not logged in you'll be sent to a different page for example we can use the with page auth which is a helper that comes from import with page us from at Super Bass helpers next JS this is helpful because it allows us to use the get server side props in order to enable a kind of redirect of the user so we can export const get server side props equals with page auth and so this with page auth recognizes if a user is logged in or not all the logic is being happened within there you can even do stuff like see if a user has a certain name in their email or is you know using a Gmail account for example but when you use it in its most basic format like we have here we are just going to see if a user doesn't exist we want to redirect to the slash login route and this is amazing so if I'm not logged in and I go to the create article route this with page auth is going to then redirect me to login which is probably some functionality you're used to seeing when you use you know websites that require you to be logged in for certain parts of it okay so we are going to make our lives Easier by using something called grid from next UI Dash org when using grid you have to go and make a grid dot container which pretty much means grids can live within this thing and we can set some styling to The Container just to have a gap of one so everything isn't super close together I'm going to start by creating a text of H3 which is going to show the title of the article that the user is expected to input we can then put a grid here and I'm going to make it so on the smallest screen it still takes up the full 12 Columns of the grid so this is taking up the full width of your web page is this grid and so this is taking up the full width of the container that this grades inside in here we can then use the text area for text areas we have to do a lot of kind of boilerplates so let's get started we want this text area's name to be equal to title we want the Aria Dash label to be equal to title so that's if someone's like using a screen reader for example and honestly I'm going to make these properties go like this so we don't have a bunch just forever I'm also going to make the placeholder equal to article title so this will be that like text it's within the text area and we can close this up early on here I also want the full width property to be equal to true so this text area is going to take up the full width of the container that it's in I only want one row of the text area because you can imagine if you want to be like a big rectangle we could have like you know 10 rows give me 10 rows of text but because it's just the title for this one I'm just going to make it one row and I'm going to set the size of the text area equal to XL and so we can go and check out the slash create article route right now and see what it looks like so far and because our navbar has working routes we can even just go to slash create article right here and remember guys this is kind of a test you have to be logged in if you're not logged in on your website what's going to happen is you're going to press create article and it's going to redirect you to log in so make sure to log in which is kind of cool the functionality is already working and so boom we have it here I can type my title like you know thanks for making it this far boom so there's a title obviously nothing else but just to show you guys what's up so far I'm then going to copy both the grid and the text I'm going to make another kind of combo here but instead I want to show article text and so I'm going to name everything here content instead of title so you can imagine the content of the article I still want full width to be true and I want the rows to be equal to 6 this time so we can give them some room to write the you know content of their article let's go see what this looks like amazing so we're kind of getting there guys don't get too excited but now we need a button at the bottom that we can can trigger to then and so I'm actually going to have this say article text because that's what the text says there but now we want to use a button at the bottom which we can use to create the article so I'm going to go to the bottom and say button create article amazing so now we have a spot where users can go in here and fully create their articles we can even use that user object to let's make another grid at the very bottom here and we can make a text element that says okay I'm a certain user and I'm posting as user dot email and we should know a hundred percent that the user exists but I'm just using this question mark syntax just in case and we're getting access to the user because we did the use user at line 11. so if you missed out on that part make sure to do that amazing so we have the full code for the create article and I would you know I would argue this looks pretty good it looks like you know some full functionality for our website now we need to make the actual article title and the article text save to Something in next.js and we also need to make it so when you press on the article it's going to actually create an article so let's get started by doing a state that is going to save our title and the text of our article so let's go to the top of the create article right here and I'm going to say import use state from react we know that our state we want to have two different properties in our state we want to have two different properties so we can save this kind of initial State equal to the title which is going to be an empty string and then the content which is going to be an empty string we can then make a state using this initial State object here by saying const I'm going to name it article data and then set article data which is equal to use state which is going to get defined initially by this initial state from line 15. this is kind of like some like stack Overflow like weird code so if I lose you guys don't worry this is kind of like some weird code but it's really an interesting trick to know about react if you have an input that is like let's say a bunch of different things long like let's say like you have 10 different things Beyond just this title in the content and you want to save strings to each part of your state for example something cool you can do is you can make a generic handle change so whenever a input gets changed for example the user enters new text or the user you know adjusts the title or adjust the content you can make this handle change and you can give it access to the event coming from the handle change when it like a button gets pressed or a text area gets moved for example and because we're in typescript I have to make this event equal to in any type I'm then going to set article data so as you guys will see to stay right here set article data and I'm going to say okay take dot dot dot all the properties in article data already so take all the different properties take the current value of the title the current value of the content and then we want to say whatever got changed we want to get the name we want to take the name of where this handle change was called let's say it was called on our title for example the name is going to be title and so this is kind of cool and Slick is the name is going to be title and so if we get an event boom right here it's going to say okay someone typed in this title text area it's going to trigger this event and then we can make the event.target.com name which is going to be the name right here we want to set that property for example title equal to the value of what's currently in this text area which we can get by saying e.target.value and so as long as your names are correct in your text areas and your inputs this is always going to work because what's happening is this title is being used as a key right here and then when this event gets triggered from here it's resetting the value of the title equal to whatever the value of the text area currently has which is pretty sick in my opinion and so whenever a text area changes we can listen to that on change event by saying on change is equal to handle that change by using our generic Handler at line 22. we can also call the on change and this is why I say generic is because it can be used for any text area for example in this text area when we get the change it's going to change the content because it's going to say take content here and set the content property of our state equal to the value that the on change was coming from pretty cool stuff in JavaScript so we can console.log the article data to see our you know State changing in real time let's go back over to our application I'm going to inspect and so next UI is still in beta and there is a strange issue with the navbar right now I would recommend just right click and hide messages from nextdev.js obviously if you get more errors they're going to show up so this should just be a one if this is ever like a two or a three go and check your Errors By just clearing it by pressing this x here but yeah sorry guys this is a weird thing with next Dev JS everything works 100 though which is kind of strange and so now we can see that our state is getting initialized to just regular title and content and as we change the title for example hello world the state gets changed on every single on change event so you guys could imagine on change on change on change on change on chain every single time it's changing and then updating with new content same thing goes for article text article text and saying on change on change on change it keeps on calling that event over and over into our state keeps on getting reset this is great news though because now that we have this this object we can go create an actual Row in our postgresql table that uses this content to make the title and the content specific to what the user entered and then also make that article as a specific user so let's get into doing some poster SQL with Super Bass when this button gets called we can set it to an on-press property is equal to create article create article is a function that we're about to make so don't worry about this error and go to the top here and I'm going to put this under all of our state stuff so we can say const create articles equal to an asynchronous function because we're going to be using some Super Bass calls to find the logic like this and we can do a try and a catch statement with Super Bass this is just so we catch any errors just in case anything happens this catch has an error that gets logged to the console because we're in typescript we have to set it to in any property I'm going to alert error.message now the grand finale our first time using the Super Bass client with the postgresql table we can Define the things we are going to receive from the Super Bass client by saying const data comma error is equal to a weight superbase client and here's what's going to happen is CP based client we can chain a bunch of different functions and so I'm going to press enter and tab in to say that we are chaining all these to the Super Bass client right here the first thing we're going to want to call from Super Bass client is Dot from the Articles table so from the Articles what do we get and just in case I'm losing you guys with the chain here I'll show you an example we're actually just doing this so that's what JavaScript is processing it as but we're about to have a bunch of different lines and so I'm going to indent this inwards so we can have the steps show one at a time from the Articles we want to then dot insert certain information and so we can pass in this array and it's going to have one object inside of it this is where we can pass in all the data that the Articles table is expecting for its rows for example the title is going to be equal to the article data dot title the content is going to be equal to the article data dot content the user underscore email is going to be equal to the user question mark because we're not going to assume it exists just to be safe dot email question mark again because we want to make sure we're not going to assume the email exists and I'm going to do dot to lower case this is just so all the user emails inside of our application are lowercase just to make sure and also showing you guys how you can manipulate strings before you store them in your database we also want the user underscore ID to be equal to the user question mark dot ID and we only want to store a single thing so we can say dot single at the bottom here we can then say if error row error which is some nice shorthand syntax from JavaScript just to kind of clean up our code on the way out I'm going to set this article data back to its initial state I'm not sure this is necessary for this project with it just kind of like Forward Thinking as to you now we want to make sure that we set States back their initial values because if the person wants to create another article that old article might still be filled in if this date gets cached if like if the browser remembers that state so this is just setting everything back to empty strings and because our code is waiting for the Super Bass client to get done once we are done we can then router dot push the user to the main feed to see where their article is and you know see their article at the top at this point at line 41 the article is actually fully created in our database so you could even send them to the specific article page if you want it alright guys I know that was a bunch of content right there but we actually just made a full insert into our postgresql database using next.js and typescript so now we can go and pretty much use this because now if we look at the bottom when we press the create article what's going to happen is Boom create article gets hit we can run to the top we are then going to have the Super Bass client to get called it's going to insert with the title and the content that our user inserted it's going to insert a single one of those it's going to reset our state and it's going to shove us over to the main feed so let's go and test this out I know I said this before but make sure you're signed in or else your website obviously like won't work right because you won't be a user that's validated let's make our title I'll say subscribe if you made it this far I know I'm I'm Shameless um but then we can make the article text say thank you so much for watching and so this is going to send us to the main feed route still the main feed has not been created yet but when we create this article it is going to add to that table we made in Super Bass so let's create the article we get sent to Main feed it's a 404. we got issues but not really this is what we were expecting so let's go and check Super Bass out and see what's happening and so Superbass isn't real time in its dashboard so you're gonna have to press the refresh button at the top left so if you're like why isn't anything here please refresh the page it'll help you out and you guys will see we have a fully inserted and it's ID of one so you're the first person to ever post which is pretty cool and it's going to show you the user's ID the title the content the user's email and also when this got inserted to our table really really cool stuff so now that we have articles that users can create we can actually kind of make a very basic Main feed component showing these different articles that are all from this articles table so let's get started by create creating the main feed so we can go back to our next application go into pages and then we're going to create the pages for the main feed again we're going to create that regular index.tsx as we've created many times before now and so just to make our lives easier again I'm going to go and copy paste the login component and bring it over to Main feed this is just because we use so many of the different imports from the login component and all of our other components because we're getting the client and also the user so it just makes sense to kind of you know make our lives easier and copy it over we're also going to want to import use state from our react application above and we're going to want to create a stay to store all the articles that we're going to get from our actual request to Super Bass so for example we can say const articles and then set articles is equal to use state where we're going to make it equal to an array but because we're using typescript it's going to want us to make it equal to an array of strings like this so you can say string array this is necessary for when we set articles after getting data from our actual call to to the API or call to the database and so again get rid of this if user at line 13. oh and my bad guys we want to also set this to Main feed instead of login that's my bad there we go and so now I just want to import the text property from next UI or not property component you guys know what I mean I'm going to wrap our return statement in a fragment and I'm going to make a very simple this thing to show on top of our main feed to explain what's happening so text H2 is going to be of Main feed and then going to make a text here which size is going to be equal to dollar sign large and the CSS is going to be equal to the margin y with the dollar sign eight this means that there's going to be some axis in the y direction of this text that goes under Main feed and so it's going to say check out articles from users here then we can show all the different articles right now we don't have any you know kind of way to show articles in a nice way and So eventually we are going to create an article card which is a little card that's going to be used to show the data of a certain article so before we work on showing the data through these article cards here let's go and work on the request to Super Bass to fill up our articles array when before we get started we also want to get the use effect from react because what's going to happen is use effect gets ran initially when the page gets ran and so we can use use effects to get articles as soon as the page gets ran for example use effect use an arrow function here to define the logic of the effect for example get articles like this is a function that we are going to Define and we want the dependency array to be nothing this means the use effect is only ever going to run once is what this empty array means if we add variables in here like ASDF if the value of ASDF ever changed that means we're going to run the effect again so if there's nothing in here we're never running the effect again so get articles isn't defined so it's getting mad at us so let's do that I'm going to Define get articles by saying const get articles and again this is going to be equal to an asynchronous error function and this is because this asynchronous function and we're using asynchronous because whenever we make super bass calls especially the super based client we are using a weight and so when we want to use a weight we have to make an asynchronous function I'm going to do some try and catch logic here so I'm going to say try const data comma error is equal to a weight super based client just like we did before and then I'm going to say okay dot from articles so we're looking at the Articles table we want to select all and so this all is very interesting the star means I want to select everything and for this full stack project I'm going to limit it to the 10 most recent articles and we aren't doing anything like making Pages or anything along those lines I plan on doing pagination and a bunch of different concepts in other videos this video already has so much content and so I just want to make it simple we're just going to show the most 10 articles at the top of our articles table as simple as that we can also console.log data here as well if you look at the typing of data it can be in any array or it can be null and because we're in typescript we have to make sure that if data is not null that means it's going to be in any array then then we are going to set the articles with the data that we received if you guys want to see an example of why typescript will yell at you do this any or null is not assignable to this parameter pretty much it's saying you cannot assign the string array equal to some null value so we have to check that does not null before we actually edit our state and we can do a similar catch statement at the end here where we're going to take the error set it to an any type and then alert error.message and so this is amazing this is all we need to get the top 10 rows from our Super Bass client and we're even console.logging the data at line 24 here so let's go over to the main feed and just run it because what's going to happen is as soon as you load the web page get articles is going to get called and then it's going to load the 10 most recent articles so I'm going to npm run Dev again so now we can actually go so now we can actually go to Main feed here which is pretty cool going to show us this Main feed in here we can also inspect the console within our console we're going to have an array this array has one object and check this out this object is an actual article that we just entered into our database which is super legit so you can show to the user okay what's the content of it you might not want to show the ID you can show the title you can show the email of who made it and so everything you need for the article is in here which is great we can take this state which we now know is kind of structured like this I'm going to comment this out it is an array and each array is an article object so article object one article object two Etc like in Forever pretty much or up until 10 technically and so what we can do is we can make an article card component and then we can do it like this get the article card which is like a nice way to show all the different data from this object and make an article property where you can pass in the current object we're on this allows us to make a cool component that gets information from our requests it's kind of getting passed down so let's get started by building this article card component I'm now going to go back and do the components folder we made the box and also the navbar component I'm going to create an article card.tsx I'm going to import the next page from next and this is important because we're actually going to use some typing with the next page because we're going to have some props for example at the article I'm also going to import use user from at superbase auth helpers Dash react I'm going to import the use router this allows us to you know have a user click on an article and then get sent to that article page for example that's going to be from next slash router and then also to create our front-end components I'm going to import the card and also the text from at next UI org slash react so we can Define the const article card as a next page and this next page is going to be defined with certain properties which I'm going to Define as props like this we can access the process by adding them to the parameters to our functional component like this and in order to pass in props this is actually a variable name and so we need to make a typescript interface called props I say interface props and I'm going to make an article property this is kind of a cop-out but I'm more just showing you guys a simple way of how this would work for this article property I'm going to set this equal to any so article is going to be an object that's going to come in and we can use this object throughout the article card because what's going to happen is if we go back to main feed our component is going to have this and this article equals is the property I'm talking about article equals all the different data we're getting from the database and so to actually get the article out of the properties some syntax it's very common in xjs is to say const curly braces article is equal to props this allows us to get the article object out of the props object might as well do this now we need to export default article card now we can get started with actually creating the component of what this thing is going to look like so we can say return we're going to use card from next UI like this can be a very simple component but a couple of things here you want to make the card is pressable so that means that the person can hover over it and their Mouse is going to be able to click on it for example because we want them to click on it and then go to an article I'm also going to set some CSS properties mainly just the margin bottom is going to be equal to dollar sign 10. so there's a little bit of margin on the bottom of the card so there's space in between different cards I also want it so when we press on a certain article on the on press we are then going to be sent to the article page that holds the content of that article so before we do this in order to use the router we have to initialize the router above so we can say const router is equal to use router now we have the router from next that allows us to kind of push the user to different routes for example router.push slash article and we can use a question mark which is a parameter at the end ID is equal to plus article dot ID and we are going to be working with the article routes soon so don't be too worried if you guys don't understand this I'm going to explain this in great detail later now in the body of the card we can show card.body we can show the title of the article by saying text H2 with then the article dot title we can then say text which is bold posted and we can even make a date here for example because in the article we have access to the inserted at inserted underscore at is actually a date string and it's kind of a generic type date string you can even do like console.log inserted underscore ad if you guys are curious about that we can make a function to transfer what inserted underscore at is into something that the user can understand and it's relatively simple we can say function get date and so we can format the date like date date month month year year something like that and so how do we do that we can let the current time be equal to the date dot parse so this is using the date object in JavaScript and we can take the article.inserted underscore we're at we can then create a date object with this current time and so this data parse is going to give us a number of milliseconds and this is some like date thing that was created a long time ago that everyone references was midnight January 1st 1970. but now we can actually process this strange number into something we can use by saying let date is equal to new date then we can pass in that number of milliseconds into the Constructor this new date is smart enough to now know what the actual date is from that milliseconds number and so we can return a string to our user by saying return date dot get day for example and we can add a dash here date dot get month and we can add a dash here again and then date dot get full year and so you can imagine it's going to be formatted just like I had it here and So within our text we can call things for example functions by using curly braces and then going like get date and then this get date here is going to eventually be returned and this get date here is eventually going to be replaced by the string that gets returned on line 20. I know that's a lot of work just for the date but hopefully that's valuable for you guys especially if you want to make something more complicated is this date object up here has a bunch of different things for example the hours milliseconds minutes seconds whatever you guys want and so it allows you to make those kind of social media like dates that you've seen like when someone's posted like three minutes ago if you want to do something like that but for now we're just keeping it nice and simple going to create another final text here which is going to be equal to by so we can show who is the owner of the article I'm going to say article dot user underscore email I think we did two lowercase before but just to triple check I'm going to do another dot 2 lowercase here and boom now we have a full article card we can use so if we go back over to our main feed we can create a bunch of different article cards with the information we get from this articles array in our state and so our articles just to show you guys articles is going to be equal to something that looks like this and because it's an array we can map over the Articles and so we can say articles.map take the current article we're on and then say article card like this and then say that the article is equal to article the one that we're currently mapping over and article cards not defined yet and so we can go to the top of our application here and say import article card we can import article card from dot dot slash dot dot slash it means we're going two folders out go into components and then grab the article card oh and my bad guys because we're mapping over this article these curly braces generally mean that we're going to have JavaScript inside to show a bunch of different logic and eventually do something like return a certain component if we're just directly returning the component we want these to just be parentheses like that that means in the parentheses is our return statement and then we're going to show the article card right here so now let's take another look at our front end my bad guys that's a dumb mistake but hopefully you guys saw that inside of our article card this date.getful year does not have parentheses at the end so we can actually just add that here it's funny though I believe it was showing the actual logic inside of get full year and added it to our string so it is in case you wanted to know that but save your article card after fixing that because these are methods that you're calling to get certain information out of the date and now let's go back to our front end and so as you guys can see we have the full article card showing for the only article on our website if we click on on it we're going to be sent to an article with an ID of one and this page doesn't exist let's go and create the page that allows you to see data for a certain article for example slash article question mark ID equals one we can get started by going into pages and creating a folder for the article route itself so just article like this you can make an index.tsx inside of article and then again as I've always done we're going to go over to login control a copy all of login and bring it over into article change the name of it to article like such and so because we are using parameters in our request for example localhost 3000 slash article question mark which means start of our parameters ID is equal to one we need to do something called router.query that allows us to get these variables from here and again we can delete this if statement because we already have access to the router we can get the ID out of the router by saying const ID is equal to router.query like this this allows us to access that variable right here I'm also going to import the use state from react because we are going to use a state to hold the actual article data that we are going to get so we can define a state by going down here and saying const article comma set article is equal to use state I'm just going to make it an empty object and I'm going to Define this state with the type of any it's just because Super Bass gets strange when you try to set data equal to States and so this any allows us to kind of avoid that especially when we know the article we're receiving and so we can make a use effect here you can say use effect which again go to your top here and make sure you import use effect vs code did it for me automatically but you can do that here it's going to be equal to an arrow function which is the logic of our effect and interestingly enough I'm going to make the dependencies show the ID and so I want this effect to run whenever ID change changes because with nexjs ID is going to be undefined for a little period of time in order to avoid running our get article code or trying to talk to our database with no valid ID I can say if type of ID doesn't equal undefined is a cool way to kind of get around this error and reduce redundant calls to your API then we can get the article which is a function you're going to Define just to explain this logic what might happen is our use effect is going to get ran initially and ID is going to be undefined when the value of ID changes because it's in our dependency array then use effect is going to get ran again and so that's why we have this if condition right here now let's get started on creating this asynchronous function to get the article data so async function get article I can say const data comma error equal to a weight superbase client Dot from we are going to the Articles table again and so you could imagine if you're using different tables you can change this Dot from here and you can communicate with any table inside your Super Bass client we are only messing with the articles for this video so just to explain that real quick I'm then going to start select all the different articles but importantly after I select all the Articles I'm then going to say okay I actually just want the article where it passes the filter of the ID is equal to this ID that we passed in to the link like right here if it passes that filter I want to get the dot single out of that so the single piece of data from that we can then do some different type of error handling by saying if error console.log error just to show you guys there are different ways to handle the stuff then just try and catch else if there's no error I'm then going to set the article with the dado we get passed from Super Bass and that's all we need to do so now we can get started by creating some of the front-end components for example on the top I'm going to import text the spacer the user and also button from at next UI slash react and so we make a pretty simple front end I'm gonna wrap everything within a react fragment I'm going to make some text at the top which is going to show the article dot title I'm going to make a little spacer this allows us to get space in the y-axis we use it a while ago in the video but I'm just going to make a little bit of different space here using the 0.5 I'm then going to use the user component which is something we get access to from next UI you can even do like profile pictures and stuff for the user as well but for this video I'm not going to be really using any of that but this will allow us to show the name of the person who created the article so for example not the current user logged in instead the person who made the article so we can go into article dot user underscore email and I'll do a question mark here just in case it doesn't exist dot to lowercase I'm then going to set the size equal to medium so this is the size of our little user component and I'm going to copy this spacer over and make some space under that make it like a one in this case now we can actually show the text of the article content now we can actually make a little text element its size is going to be equals to the dollar sign large and this is going to show the article dot content amazing so when we go to this route we should be getting a certain ID as soon as the ID is undefined we're going to get the article set this article data to our state here once this state gets set we can roll all the way down and then we're going to show all the different variables within our state here so let's go and see if this works so we can start by going to the main feed and we can also just click on this and you guys will see we are re-requesting the data at this article link and we are showing all the different data here which is pretty neat and so this is a lot of functionality we've built so far we have the main feed it's going to show all of our articles we have authentication and we have the ability to show information for certain different articles now we want to get into editing and deleting articles we want users to be able to edit and delete articles when they are the owner of a specific article and so we can do is let's go over to this article page in our code we can go down here and first of all we're going to say if the user exists at all and the article dot user underscore ID is equal to the user dot ID within our application if that's true this means that the current user logged in is the owner of this article if that's not true we just want to show null we don't want to show any like buttons for example but if they do own the article we want to show some buttons that will allow the user to edit the article and delete the article I'm going to bring in a spacer just so we have some space between the buttons and the text and then going to create a button of size small it's going to be called edit so if you want to edit the article then I can copy this like here make some other ones and now I want to make another button called delete and we can set this color equal to error is something that next you give this access to so let's go to our front end and see what this looks like amazing so because we are the owner of this certain article it's showing the edit and delete buttons which is amazing and so edit article is actually going to go and like let's make this comment you guys don't have to write this down as well it's just for teaching's sake this edit is actually going to send us to something like localhost 3000 slash edit article so as you guys may have guessed we have to then create an edit article page but delete is a little bit easier here we do have to send the user to a delete article page so instead I can just say on press is equal to an arrow function here and then I'm going to make a delete article function above so we can copy this name delete article go above I'm going to say const delete article is equal to an asynchronous function because we're about to do a deletion using Super Bass it's going to be a very simple try and catch where I'm going to try get and getting the data and also the error out of Super Bass by saying equals await Super Bass client Dot from what table are we looking at we're going to use the Articles table dot delete which is very simple delete just like okay I want to delete something and then so what is the filter based on what we want to delete well we can do in dot equals where the ID is equal to the ID that we currently have in the route and this ID is currently equal to the ID that is passed in in the URL for example the ID equals one and Super Bass is so cool because it does all that authentication of if the user actually owns this article in the back end if you guys remember when we actually created the you know row level security it helps us out so much there so we don't have to even do any validation with his deletes because Super Bass does that for us if there's an error that somehow doesn't get caught I'm going to throw error here and once we get here I'm going to router.push the user to the main feed we don't want them to stay on the page of an article that doesn't exist that's kind of confusing right so I'm just going to push them back to the main feed where they'll see that you know that article is gone I'm also going to just finish up his catch statement gonna get an error set to the any type and I'm going to alert that error.message and so this will allow us to fully delete an article which is pretty legit let's go and delete this amazing article we've made so far all right so what we're expecting to happen is you press the delete button and it's going to send us to the main feed where we are going to see no articles all right it's a sad day but the one article on our website is now gone so kind of sad but let's create another article just to see that everything's still working and also just to see that we have something to edit as we create the edit article content so I'm going to say Title Here title is going to be you better subscribe if you made it this far I'm just messing with you guys you don't actually have to subscribe but I just like to be fun with the titles and the texts just kidding thanks for watching and I'm going to create the article here amazing so we're back and we still own this article because we are Cooper codes to a Gmail so now we can go in amazing so we can see that we still get access to this edit and the delete just for teaching's sake I'm actually going to go to the main feed and I'm going to sign out signing out send us back to the main page so if I go to Main feed again and if I click on this oh I'm not able to see those edit or delete buttons so that's really great news just to show you guys that's working I'm going to log in as Cooper Cuts 2 again all right we are back and logged in now let's get work now let's get started on creating the edit functionality for our website so I'm going to create a page and I'm going to call it edit article inside of edit article I'm going to make an index.tsx and I'm going to tell you guys a trade secret if you made it this far in the video You're about to get a trade secret directly from Cooper codes the industry expert just kidding we are going to copy all of create article because create article is going to be very similar to edit article we want to have the same inputs we want to have the same state we want to do a lot of things the same pretty much and so we can go in copy all this different stuff from create article and paste it into edit article go and change the name equal to edit article and can get rid of this comment we don't need it then we can also bring edit article make sure you export edit article as well or else you're going to get an error and so for this site we're actually going to have a localhost 3000 slash edit article and it's going to have that same question mark ID logic so it's going to have the same question mark ID equals one for example and we can actually reuse some of our code if it wasn't a tutorial I and I didn't want to like make things kind of go faster you might want to make some reusable functions that you can use in like some type of like utility folder or components folder but for this project I'm just going to go and pretty much copy the same logic we use to load in the article because when we edit the article we don't want to start with an empty title and content we instead want to start with the Articles title and content so this initial State align 17 is kind of not right it's kind of incorrect if we want to load the actual value of an article and it has ID of 1. where have we already written that logic well we've already written it in the article page so go over to the article page bang bang right here and we are going to copy this use effect from article so go to article and get the entire use effect like this and again guys don't worry about these errors we're going to get them done one at a time initially we want to import use effect so we can go to the top and import use effect from react we also want to Define ID which we can do by saying const ID is equal to router.query exactly like we did before and we also need to set the article data the funny thing here is the data object we're expecting from this article is the exact same we want to set article data of an article and so even though in our other use effect it was set article we can say set article data here and so what's happening is this like I know it's kind of a lot of stuff so let me explain to you guys we are creating an initial state with a title of this and a content of this and it's going to have article data is equal to initial state we are actually going to overwrite this state with the entire value of the article data the important thing is this article data is going to have everything it's going to have the user ID it's going to have the email it's going to have when it was inserted the important thing is that it still has the title and it still has the content property and so when we handle these changes you can imagine it's going to look just like our initial State except with way more variables but when the title changes in our actual text boxes it's going to edit that those things there it's going to edit the state like that and then when the content changes it's similarly going to get edited when we do this handle change here and so that's just to give you guys an idea of what's happening and kind of why it's happening if you wanted to you could take the title and the content out of this and manually you know make it look like the exact same structure but I kind of found it unnecessary for this project and it's also nice because this article data has a lot more variables than just title and content it has everything you need for the actual article data hopefully that's clear enough so on the very bottom of this component we are going to instead of saying create article I want to say update article like this instead of create article I want to say edit article so we can go and cut and copy this edit article here instead of posting as we can say editing as a certain user and so we can take this edit article here and bring it up to the top and I'm going to copy in this edit article to this create article you guys already should have here and so we are going to have the try statement look incredibly similar but instead we are going to update instead of insert so it's the same thing const data error await Super Bass client look at the Articles and now we want to do a DOT update and we want to tell it which certain properties do we want to update we don't need to update the user underscore ID that's not changing and even if it were we wouldn't change it here user email that's also not changing but the title and the content are the two things that the user is going to change and just so you guys understand this this isn't fully done yet this update is a very generic thing and so we need to tell it specifically what to update saying dot single here makes no sense it has no filters it has no way of knowing which row to look at we want to say we want to to specifically update the row that has an ID equal to the ID passed in our query I'm also just not going to do the set article data here and instead I'm going to push the user back to the article question mark ID to the current ID they're on so they can directly see their changes that they just made for example I know this is a bunch of code so I'm going to explain everything one at a time we are getting the ID out of the edit article link because it's going to look just like this edit article question mark ID is equal to 1. we then have an initial state that gets set so our article data is initially this object this function is to handle the changes to this object like I've discussed earlier in the video and then initially this use effect is going to get ran eventually the ID is not going to be undefined it's going to get fully loaded and it's going to be equal to like one for example we're then going to get the article that is the data equal to the ID of one so we're getting that id1 article data once we get that article data we are setting our state equal to the data of that article and then as soon as we edit the article we are going to show the title and the content of the new stuff that the user inputted the final cherry on top to this edit article is that when this article data gets here we want to show the text content with that title and the content loaded in if you were to edit an article would you expect the text inputs to be completely blank and you have to remake your article from scratch probably not so what we can do is we can go down to our text areas and we can set the initial value equal to article data dot title for example same with this text area we can set the initial value equal to article data dot content so now when we load in this page it's going to show us the content of the article and also the title of the article that we already had so our edit article is pretty much fleshed out great stuff guys one final thing we need to do is we can take a look at this link right here at line eight we need to go into the article right here and forward the user when they press on edit for example on press is equal to a function then we are going to router dot push the user over to something that looks like this so you can just say slash edit article and ID is equal to the ID that's currently in this article page amazing so let's go and check out the edit article on our front end so we are at an article that we currently wrote we wrote a while ago and we are Cooper codes to a Gmail we can press edit here and you guys will see it loads in the content that we already have which is amazing and we can add to it for example this is the end of the tutorial thanks so much for spending the time to finish the project any issues we have this stuff on GitHub so go check that GitHub link out hopefully this has been educative and informative when it comes to using all the different Technologies in this video so we can update the article here and boom we can see that we now have this fully updated article with the new data and we can even refresh the page let's just show you guys I'm not tricking you or anything refresh the page over and over and it's going to get us that new data over and over like I said before guys this is the end of the video and I just want to say thanks so much for watching hopefully this has been super informative for you know building up this full stack fundamental skills I know for some of you guys this is a relatively simple project and you're like where's the pagination where's like the search by Community where's these different things I have videos coming in the future that are going to be super more complex and hopefully some really valuable and interesting full stack projects that will assist you guys whether it's work your own personal projects getting an internship or anything like that I do have a link in the bio that's like a newsletter I'm planning on doing and it's going to have links to like my courses as I plan to release those and also just like coupons and even just like I'm planning on like releasing free stuff as well and so if you found the content valuable feel free to sign up for the newsletter I'll never spam you I know everyone says that but you know I'm a chill guy I literally will only hit you up if it seems like you know I'm releasing something that's pretty awesome all right guys seriously thanks so much for watching and have a good rest of your day

Channel: Cooper Codes

Views: 10,475

Keywords: Typescript, typescriptedium, typescript tutorial, typescript tutorial for beginners, typescript react, react with typescript tutorial, fullstack typescript, supabase fullstack, supabase authentication, supabase, medium clone, supabase full stack, next js full stack project, full stack project next js, full stack project with next js, next js with supabase, typescript supabase, typescript tutorial for javascript developers, full stack typescript, full stack typescript tutorial

Id: Doy2OfNvnoI

Length: 85min 29sec (5129 seconds)

Published: Sun Oct 30 2022