🔴 Let's build Reddit 2.0 with NEXT.JS! (React, SQL, Supabase, StepZen, GraphQL, TypeScript,Tailwind)

let me feel your love again cause i've been running that was a strange thing that just happened it didn't confirm that i was live so we're gonna go with this assuming we're good what is going on guys welcome back to the channel reddit 2.0 dropping all kinds of tech on you today going to be next js gonna be react graphql postgres we've got typescript we've got dynamic routing we've got graphql schemas we've got steps in we've got all this new tech that you have never ever ever ever seen on this channel before so if that's exciting smash that thumbs up button get excited because i'm about to introduce you to one of my biggest builds on this channel yet reddit 2.0 that pre-workout's about to slap right now let's get it guys bam look at this reddit 2.0 it is actually i'm not joking when i say i'm so proud i am so so proud of this build it's ridiculous honestly die check this out right we're gonna go through a little tutorial right now of what you can do firstly we have amazing sign in sign out functionality which disables a lot of the features so let's go ahead sign in we can sign in with our reddit account so i'm going to go ahead and log in with my reddit which we've never done on this channel before powered by next door that's going to go ahead spin up our login bam i'm now logged in we've got this nice generated avatar i can go ahead and create a post okay now i just want to quickly explain this is all happening through a sequel database whereby we're communicating with that database through graphql and we're not just using graphql by itself today we're using amazing tech stack by the guys over at step 10 i'm going to introduce you to it it's now one of my favorites because of how powerful it is you're going to see today let's go ahead and create a post let's say what's up papa fam let's go ahead and say how's everyone doing how's how's everyone doing and let's do a subreddit let's go ahead and add it to the papa fam let's go ahead i've already got a papa fam subreddit let's go ahead and add that in papa fam oops hopper farm and let's go ahead and maybe say i want an image as well let's go ahead and use this image again i'm going to use this image right here create the post bam just like that what's up papa fam i can go ahead and upload we can see how we've got our amazing list of communities over here guys if you've never used reddit before the way it works is simple right we can go ahead and already at 200 likes let's go guys you can go ahead click into our post so you can go ahead and comment leave comments that kind of awesome stuff you can even click into the subreddit itself and you can scroll down the subreddit so let's go ahead and have a look at some of the subreddits that i've already built let's go ahead and check out steps then bam guys we've got the steps in subreddit i can click into it let's see if there's any comments oh nice we've even got some comments going on i want to type a comment step zen is incredible and you're going to see why today let's go ahead and comment bam nice beautiful notifications awesome jump straight down here we can go overhead head over to our subreddit you can even see the number of comments gets reflected and we can go ahead and upload and used downl get ready because today's the day where you learn how to write your own queries your own mutations all of that incredible stuff okay now guys i'm gonna go ahead and give you a run through of today's build break down the tech break down everything that's going on and i want to clear something up today we are using next js react.js is obviously the library underneath this and we're going to be layering it up with typescript so you're going to learn all of this today so if that's anything that sounds near exciting then i want you to do me one favor just destroy that like button hit the subscribe because it will help this channel get to as many aspiring developers as possible and the papa fam is growing at such an awesome rate let me know what you guys are watching from this is so cool i can see you guys the energy today it's absolutely beautiful ramesh says champion champion yan funny gigi says sonny's the boss the web thank you so much i appreciate you guys check this out we can run queries from our back end and what's in really incredible about all of this is we've got these amazing ways that we can go ahead and pull in information only the stuff that we require now let's talk about today's sponsor which has made this entire video possible the guys over at stepson now stepsen is essentially graphql as as a service in some essence right now the problem that i found in the past when i'm using graphql it's a pain to set up but with step zen it is so fast so simple and you can honestly go ahead and connect it to any data source i mean anything whether it's rest apis whether it's a postgres database whether it's a nosql database whether it's mongodb whether it's super base whether it's planet scale i know you guys pop off about this in the comments but this is how powerful it really is you can start for free there's actually a link the first link in the description is the one i want you to use when we're signing up today but it's honestly no joke it's one line of code to build out your your endpoint and i'm going to show you how we can do all of that now i'm going to explain some of the points in today's video we are going to be layering this with super bass super bass is a sql postgres sql database so we've never done that so you guys are going to learn about relational databases how to create a relational database and then we're going to go ahead and connect it to step zen or import it rather to step then and pull in and create our own graphql endpoint with ease now the crazy thing that i love about all of this right is typically when we're building apps you've got rest apis now what we end up having is this n plus one problem where i might need data from several apis right and then what that results in my front end has to call out several different apis i have to wait for each one it's a bit annoying right so what we can do is we can use something like step zen to go ahead and actually make this entire process easy and we can do this in a way that is extremely declarative right i'm gonna go ahead and break all of this down they've got an amazing little subset of features such as materialize all these kind of cool things i'm going to show ahead go ahead and show you and the best part is guys when we use step dem it immediately goes ahead and actually deploys to the cloud now i can see somebody said sadly samsung is not a free tech well it actually is free guys so i'm here to tell you that it actually has a very generous free monthly plan so you get up to 300 000 monthly requests if that's not enough for you testing i don't know what is you get 10 available back in out of the box so you have more than enough in the free tech stack as well as super bass they have awesome free tech stack as well so there's nothing stopping you from going ahead and crushing with today's build the endpoint that gets deployed super secure caching out of the box supported is available and added to all your data sources so honestly we've got so much to play with here but rather than sort of you know showing you guys any more of this i'm going to go ahead and actually break it down get you guys into it and we're going to basically see how to do this incredible stuff over here right i'm going to go ahead and teach you how to connect a super bass relational database to a graphql api and what i really do love about this right is graphical it's an amazing amazing thing that goes ahead and gets set up when we use step zen and they've extended it so you can actually go ahead and if you click export you get code snippets that are ready to go ahead and plug and play and we are going to be using the apollo client to go ahead and connect our front end to our graphql interface so much so much to look forward to guys honestly really really awesome and it helps to know that the team is incredible i've been working with them guys over there for a while we've got roy dirk's incredible team we've got the co-founders anant shreeder and helen incredible incredible team so honestly when i say these guys are in to grow something big i'm not talking crap this is actually a really awesome project which is why i'm bringing it to you guys so i'm going to go ahead and continue the demo of our project right so i've gone ahead and shown you how we can go ahead and create a post we can create a comment so i've shown you so we can say hey there and uh we can hit a comment we've got a nice beautiful hot toast notifications comments pop in we can navigate to subreddits navigate to posts all of this is done with a dynamic routing and the best part about all of this is it's perfectly responsive so as you can see we go ahead and we can scale down beautiful everything works the way that we expect it this is using tailwind css and it's going to be something which i think you guys are going to really benefit from the long term if you want to go ahead and learn and push forward as a front-end developer the best part is this logic right here is really something that you're gonna appreciate and enjoy once we get down to it really really fun tech stack today something we've never done on this channel it challenged me it's gonna challenge you guys and i hope to god that you guys can benefit from today's session so without further ado we nailed it with this one i'm just saying it out there right now before we start this is a sick clone i'm i'm putting it out there this is one of my best clones i am proud of it and uh it's literally like up there with one of the best faizan says wow this tech stack is so cool alex says sunny we are ready for you we've got bangladeshi house we've got uk us in the house that's what i'm talking about guys amazing amazing stuff right with that said i think it's time to go ahead and jump into today's video but as i mentioned before next guest is powering all of this we've got graphql behind it postgres as a as a back-end database tell ncss to make it perfectly responsive dynamic routing graphql schema i'm going to teach you how to go ahead and write your first one it's a full stack build so don't get it twisted this is not some front-end just only build this is a full stack build you can go ahead and actually use this the concepts that we learned here today to go ahead and actually build your own apps build your own custom kind of forums that kind of stuff and this is an educational tutorial i'm not intending to rip off reddit this is purely to teach you how to build something cool like reddit love love read it right we actually on reddit right now which is pretty cool okay so without further ado let's jump in and if you are enjoying any of this content and you want to go ahead and push your career as a full stack developer make sure you go ahead and check us out at proper react.com forward slash course we have zero to full stack hero our flagship costs over 700 members are now in there we've actually got a new awesome video that we've gone ahead and put up on the front page so go ahead join us you're going to learn all of this amazing tech from the ground up whether you're a beginner whether you're experienced whether you just want to go ahead and improve whether you want to be a part of an awesome community this is the place to do it so make sure you go ahead and do it and if you do join use podcast 10 there you go 10 off little shameless plug there guys so i'm going to go ahead and get things started off today what i want you to do is open up your terminal right so we're going to go ahead and kick start off the project today saying please give us a strong live we trust you guys i've got you i got you this is going to be so much fun all right let's dive into this flow state right so and i'm telling you guys i coded for about 14 hours yesterday straight to get you guys this is how hyped up i am about the tech stack in this one i literally got emotional today i was telling him i was like dude when i cracked this one and i got the tech working i was so proud i was like this is so damn cool what we're doing and i cannot wait to show the papa fam so this is this is going to be a fun one today all right so we're going to start off by using this command here mpx create next app dash e with tailwind tss this is going to start up our pro like our startup project with next.js and it's going to do it that way we have tailwind setup out of the box okay so i'm going to go ahead open up my terminal now i always recommend go ahead give me feedback if the stream's good give me all that kind of stuff jason we are all gucci perfect stuff right so i'm gonna go ahead and say documents builds i like to keep things organized which is why i do this but you guys can feel free to put it wherever the hell you want right now as for my project i'm gonna go ahead and change this to become let's go ahead and say youtube i'm going to say reddit 2.0 let's just say two right that's fine hit enter and this will go ahead and spin up the beginning of our startup project right the template that's going to go ahead and get everything running from the ground up so let's go ahead give that a second be a little bit patient now in the meantime i do want to run you through what tailwind css is some of you might be new to the sort of front end world so in this case taiwan tss is a bunch of utility class names as you use it you can see it interacts with the front end it changes our design the best part about this is it is incredible for making responsive websites no joke there isn't absolutely nothing i'd rather use when designing my websites besides telling css facts i've done production gigs i've done loads of stuff with this right now and you can build anything with tailwind css really really awesome stuff and i do think it's worth saying that today's video where we are teaching you sql sql is one of the biggest used databases or types of databases in the bloody world so you guys are learning something big today and i do i'm planning on doing nothing but bringing more sql content to the channel okay there we go we've got our project set up we're gonna do cd youtube dash reddit 2 and i'm going to go ahead and do code dot and this is going to spin up my vs code okay so we're going to go ahead full screen this we can close out the old one now what i would like you to do here is set yourself up in a way that you have your coding setup in a very neat organized fashion it's not worth it when you're doing this everything's messy all over the place you can't even think straight right i really want you guys to be focused i want you guys to enjoy what you're doing so we're going to go ahead and click on pages index now this is your starting point in next.js we have a page rooting system whereby each page resembles a page on your website so for example in pages four slash index this is the home page if i had search.tsx that would be the search page and so forth whoa yes in thank you so much yo sunny love your work i've been following you for some time i love the way you teach quick questions struggling with youtube syndrome any advice bro love from zurich switzerland firstly thank you for the amazing donation and yes keep building out tutorials keep like you're saying you're stuck in tutorial master the fundamentals join a community when you join a community you're not stuck in a place alone that's where it becomes way better and that's where you have so much more fun you don't get stuck behind that thing but now the fundamentals is my advice to you and you do that to repetition you do that through several builds that kind of thing trust me it's a it's proven i've got so many students through this and join us guys honestly if you want to go ahead and keep keep doing it and you know what to do wow pascalia we've got loads of og's in the house this is cool what j hum what is that nt 150 dollars by calum dude how is that 150 what thank you so much dude i appreciate you that's huge man that's huge damn all right let's go let's get the ng up right so what we're going to do is run our app in nextgs we start out by saying yarn run dev the donations are flying in guys i'm going to go ahead and actually send the routing or the the audio into my computer i don't know why it's coming out there that's strange all right let's go ahead and do this um that's all right doesn't matter all right with that said yarn run dev we're gonna go ahead and spin up our app on localhost 3000. now i've actually got it running already on 3000 so it's going to do 3001. but in fact what i'm going to do is i'm going to cancel this one i've actually deployed this one so i'm going to show you guys properly so you don't get confused like last time i'm going to go ahead and run it again and what i want to do is i've actually got this running elsewhere so i want to see if i can actually pull this up for you guys and then that way you can see yourself what i'm doing so let's see versa dash reddit i'm gonna go to my vessel in the meantime i'll find it all right okay let's go so we've got this up and running we're gonna go ahead open up localhost 3000 and what i want you to do now is go ahead and you can see this is what i've got running here so this is 3001 oh sorry i didn't i didn't close my previous one i closed the wrong thing there we go all right close it out there we go you're on one dev now it will work okay and i've got my clone this is the working one there we go all right sick so if you want to actually look at it you can go to reddit clone.navy.versal.app there is actually a deployed one this morning right so we've got this over there so you guys can go ahead and feel free i'm going to keep it over here for reference now this is the app that we've actually got running okay there we go so this is where you're going to be where you get your starting point up and ready so we're going to go ahead firstly get rid of main everything here that you see on your right okay so get rid of that get rid of the footer and i'm going to type in h1 saying hello world okay now you should be able to see hello world this is a good starting point this is where you want to be to go ahead and get things off the ground okay now look at this guys we've got honestly the amount of viewers tuning in right now is incredible over 400 across platforms amazing energy thank you so much for tuning in firstly smash your thumbs up button and subscribe if you haven't already i appreciate every single one of you guys coming right this is incredible all right let's go ahead and jump into it so first i want to do is get rid of these defaults or centering rules from tailwind i want it to be a bare-bones project the next thing i want to do is you can go ahead and customize the head in this case if i was to go ahead and say something like reddit 2.0 clone it would go ahead and change this and get rid of the fabio icon now you can see we've got reddit 2.0 clone at the top of the screen okay now check this out now we're going to go ahead and start things off so the first thing i want to do is actually build out this component right here so i'm going to go ahead and bring out my trusty pen and as you can see we're going to build out the header component now as i said everything in this build is responsive so this header component is going to be our first sort of taste of the responsive life right so i'm gonna go ahead and actually introduce you to how to create your first component so first thing i want you to do before we get started in today's build is make sure you've got the relevant extensions installed make sure you've got this right here es7 react redux snippets i also want you guys to get the graphql snippets so this one right here and i want you to go ahead and get i use prettier it's pretty cool uh there's one more tailwind css intellisense make sure you get these installed it's always going to help you out when you're coding out it makes your whole developer experience a lot nicer a lot better okay so let's go ahead and jump into our first component so first thing i want you to do head over to package.json create a new folder at that level we're going to call this one components right you're probably wondering how i've got these icons i actually use this nice little icon pack over here going way off topic right now but it's over here because i want you guys to customize your setup to make it look cool it's icon pack it's there somewhere right inside the components i'm going to do header.tsx as you can see we have typescript out of the box typescript like a jsx component as well as tsx rfce is those snippets i just told you about so this goes ahead and sets up a functional component we can say i am the header okay this will go ahead and get everything plucked out for us so at this point what i want to do is i'm going to go ahead and look at the likes flying in guys we are literally at almost 400 likes destroy that like button if you're enjoying the content right now all right this is amazing dude right so we're going to go ahead and add in the index right so add in the header so i'm going to say header with forward slash there we go and as you can see we need to import it so i like to go ahead to the end control spacebar components header so pick up these little tricks trust me over time it'll save you a lot now you can see i am the header is rendering out from this component awesome stuff so what we can now do start building out the header component right so first thing i want to do is let's observe we've got this left section which is the image so i don't know if you've seen already but there is a way to successfully render and or efficiently render let's say next gs images inside nextgs now this is using the nexus image component if you want to go ahead and get a refresher i just dropped a video on that yesterday because i'm dropping content daily or nearly daily so make sure you go ahead and check out the link afterwards i'm going to put it up on the screen somewhere around here but otherwise someone can feel free to go ahead and do it gempag says go let's let's go this dude made me love coding i love that dude thank you so much all right so at this point we're going to go into our header and we're going to firstly get started off with the image component right so i'm going to have a div firstly which is going to encapsulate it and then i'm going to have the image component okay so as you can see i've had an option here to import from next image so i'm going to use it typescript is pretty good it tells me that i'm missing the source property so in this case i'm going to add the source property the source in this case i've gone ahead and short on the url for you guys and it's actually a links dot proper react forward slash f q y hitting save you can see we get this error now this is firstly because there's two ways to render our image components in terms of sizing and layout in this case we're going to use a layout fill if you want to know more about this you can go ahead check out that tutorial that i just dropped all right but when you use layout fill it's going to go ahead and actually fill the entire screen that's the problem so we have to make the encapsulating container something called relative okay and we're going to fix that in a second now the next natural error that you're going to get is whenever you use the image component you have to white list the domain name where the image is coming from so it's very easy to do you go over to next.config.js you go ahead and you type in images you type in i think it's domains yep and you've got an array and you plug in links.properreact.com now anytime you change environment files or configuration files you need to restart the server so we're going to cut it with control c beyond run dev to restart okay i think we're going an amazing energy right now this is awesome stuff guys i think you guys are enjoying this because the viewers are going up and up and up and we've got more likes coming in about to smash 400 likes let's go right so at this point if i refresh we should start seeing some form of image on the screen right so going back to my header the reason why we're not seeing it right now is we need to set the sizing of this header so we need to go ahead and say h10 and a width of 20 we're gonna do and now you can see i get my image so as you can see it's stretched out okay that's because a height of 10 and width of 20 is not ideal for the sizing constraints so always make sure that you don't have this issue though we can go ahead and say object fit contain right so somebody says what you need to white list these domains you have to whitelist it so that way you're saying to next yes that you're allowed to go ahead and optimize images which come from that site if you don't do it next yes one they use the image component right the benefits of this is that you actually get a way more compressed really more faster to deliver a picture right so it's way more better for your page loading and that kind of stuff so let's kind of run through this now so we've got the image looking pretty solid hey look at the chat man honestly this is so cool so i shared the story about something even my non-program friends crazy stuff but thank you so much dude okay let's enjoy today's session guys almost at 400 likes bam literally smash that thumbs up see if we can get there first right at this point we've got that looking pretty decent next to it i'm gonna have this icon right here now look how i've done this right when it gets to a smaller screen it snaps away then we get rid of the text eventually so i'm going to show you how we can go ahead and break that down and get it looking pretty nice the first thing is i want this to basically when i set the layout constraint of the top bar here i want to make sure that this never shrinks well i don't want the logo to ever shrink so i'm saying flex string zero when i hover my cursor over it i want it to be a pointer as well so there we go therefore we get this nice beautiful behavior like this right so everything looking pretty nice so far okay now we're going to go ahead and add in another div underneath here and this is where we're going to go ahead and have the icons so in this case in today's build we're going to be using hero icons now if you haven't used hero icons they're an incredible library too and i really do recommend bam we just smashed 400 likes as well let's keep going 500 if you're enjoying this you know what to do destroy the like button all right we're going to go ahead hit documentation now the thing i love about hero icons is it works out of the box with tailwind it's actually built by the guys over at tailwind so we can use tailwind utility class rules to style them so hovering this open what i like to do is split my terminal and i like to say yarn add hero icons react okay this is going to go ahead and add in the hero icons now the first thing i recommend to do to kick start your intellisense is to go ahead and put in two variants one is solid one is outline and i'll explain why i do this little trick in a second right so if i was going to say something like i don't know it could be star icon or whatever something like that the reason why i do this is it kind of forces vs code intellisense to now pick up on this right so now if i'm going to use this if i go down to my div it's going to start knowing if i want the home icon for example now i can see i get my solid and outlined variant if you don't do that little trick before it doesn't actually pick you up right so that's just something i've come to learn now if you do want to search through the icons for example that home icon you type in home and you can see we've got the outline variant here the solid variant here so this is how i find my uh my icons in the first place so we're going to go ahead pop in a home icon like so and i'm actually going to be using the solid variant for the home icon i then have the p tag which says home and i have a chevron down down okay so let's go ahead and do this chevron down icon and the chevron down is actually gonna be a solid as well right so solid so i do tend to vary sometimes i'll tend to kind of do some what sometimes some of the other guys oh my god over 400 viewers across platforms you guys are so awesome thank you so much this is incredible right i think we're all smooth jay let me know i think we're great so far but what i'm now going to do guys is i'm going to go ahead head over to my div i'm going to go ahead and see whoa hellboy just got a job nice attacking new one right there hey let's go screenshot that dude that's awesome stuff right so for the styling here what i'm now going to do is you can see it comes out massive right so it comes out more one second more so we've got massive sort of uh icons over here so i'm going to go ahead and fix that up so class name here i'm going to go ahead and say height of five width of five and now you can see that that becomes a much smaller more easier to deal with icon i'm gonna do the same thing for the chevron okay so i'm gonna say class name is height of five width of five okay they're probably wondering that does not look nice well that's because we haven't applied any styling to it so i'm going to go ahead and do this which flex naturally puts things into a row i'm now going to go ahead and say items should be on the central axis that goes ahead in the center that centers things on the y-axis and then i'm going to go ahead and say margin on the x-axis of seven to push it away from things right so the first thing is is right now these aren't on the same line that's because if i don't define what is what's happening with siblings so in the case of these two divs what's happening is they become block elements okay so i need to go ahead and make sure this has flex now they go in a row okay the next thing i want to do is force this to be a background of white and you're going gonna see why in a bit right padding on the x axis of four padding on the y axis of two and a shadow small okay so this gives us this nice little kind of look and fill that we're gonna eventually come to really really like right so one thing i want you to notice any tailwind css rules that i use are mobile first this means that any rules that i write for example if i go ahead and have any rule like here they're all going to apply to mobiles and then if i go ahead and add a breakpoint such as large and say at the large screen it should be a background rate of 500 only on the large screen will it go ahead and take effect right so i want you to bear that in mind as we start coding things a bit and making them a bit more responsive okay so the first thing i want to do is i want to stick this header to the top so you see how it sticks to the top every time the way we do that is i go ahead and i simply add in sticky top zero sticky top zero looks great and then i'm gonna go ahead and say z50 that means that even when it's scrolling over elements on the page it's always going to be at the top layer of visibility wise oh my god the concurrent viewers is mind blowing right now this is crazy guys almost a 500 likes you guys are awesome this is mad i'm going to keep delivering the content if you guys keep turning up like this but do not worry wow all right at this point we've got everything looking pretty nice now what i do want to do is i want to make it so that when we actually get onto a larger screen or an extra large screen i want the min width of my home component over here to actually be something like 300 pixels so in this case i can use the just in time compiler in tailwind css the latest version and what this will do is it will actually go ahead and actually allow me to use that space at exactly 300 pixels and then the home what i can do here is go ahead and style this out so class name and what i can do is i can say flex one this means it will use up the majority of the space that it has left over right so trust me it will click into play when things start moving around right so it will work out very nice in a sec right we're gonna give this a margin left of two we're going to say that on a phone i want the text to be hidden right so i want this to be hidden on a phone but only on a large screen do i want to inline it okay so now if i see this you see only on the large screen does it basic so on this on a phone it's hidden so just like this on a phone it's hidden as we get bigger bam the text comes back as we get bigger the max width comes in right so small screen as we get bigger the text comes in as it gets bigger the max width comes in and flex one means that this is using up the most space they can okay looking swift and good sahandi says love your videos dude learned a lot they that's what i'm talking about nice stuff man this is amazing thank you guys we're almost at 500 likes let's go nice all right so we've done that section now what i'm gonna have is the search field right so the search box so at this point this search ready i want to show you how you can create a custom search field like this fairly easy as well so we're going to firstly make it a form we don't tend to use form actions anymore so now what i'm going to do is actually go ahead and use a search icon and build things out underneath it so search icon and do i want the i'm gonna go ahead and go for the solid search icon okay so this solid search icon and then i'm gonna go ahead and say that this should be a height and width of six so height of six width of six and then i'm going to go ahead and pop in text gray 400. there we go as you can see we've got a nice little icon in here sick waterhouse is not gonna lie sick teacher i appreciate you did thank you so much we've got this and we're gonna have an input next to it right so the input is gonna have a placeholder which just has some like a nice bit of text in there it's gonna say search reddit right sick there you go search reddit pops in and then the final thing is we're gonna have a hidden button now this is a little trick if you didn't know it get to know it it's a very handy little hack right so basically i've got a hidden button here this button is going to be type submit and basically if you want to go ahead and in the future implement the functionality of this you can go ahead and do that and i can make it like and basically when i hit if i hit like type in hit enter see how i submit the form but even though there's no button so that's kind of how you get that functionality vm says bros is sick tutorial learning so much thank you so much dude about to hit 500 likes let's go papa fam hey form we're gonna go ahead and do class name at this point kodap codex is oh thank you try 20 i don't try what is that try uh currency but thank you i appreciate everything that's huge man we're gonna go and say flex flex one i want this to use up the majority of space as you can see when things aren't aligned like this it looks ugly right so i love to use items center to go ahead pop things back into space and then we can go ahead and say space between the x components of two pushes things off run the corners out but firstly i'm going to say border okay on the border i want the border to be gray at 200 and i'm going to say rounded small okay rounded small and as you can see here very subtle right if i actually gave it like rounded large you can see you get a much more rounded corner but i like to have it sometimes subtle okay then we're going to say background let's go as a background gray of a 100 okay looking good pounding on the x axis of three padding on the y axis of one sub look at this nike says hey bro what's up that's why i just read it and i was like just slipped out my mouth all right so at this point we've got search reddit now we've got two problems here firstly that input field is not using up its full space so let's fix that flex won it bam it's now using up the full space second thing the background is not transparent it's white make that fixed the final issue outline that's ugly we don't want that right so go here type in outline and none and just like that boom is gone oops no you don't have a bookmark uh just like that you have a custom search field and as you can see flex one makes it use up the majority of the space and it's beautifully responsive okay so making swift progress guys very very good we've got this down the next thing i want you to do is we're actually going to go ahead and add in these beautiful icons that you see over here so what i'm going to do to save a bit of time is i'm going to go ahead and do all the imports at once right so i'm going to go ahead and actually pop in all my outline and solid imports so you guys can feel free to copy this if you want we've got bell icon icon globe icon and a bunch of others from the outline and then a few others from our solid we don't need this star icon as well okay looking pretty nice all right what's the difference between flex 1 and grill um to be fair it's relatively the same if you're using it in this fashion right flex grow is going to use up the majority of space flex one is just going to say use up the rest of it as well so pretty much the same thing hey 500 likes and our second water break this is sick right let's keep going nice i love the energy today wow honestly you guys are like it's consistent i can feel the focus the amount of people just like i can see like there's like 400 people here just like zoning in okay div now let's go ahead and pop in these icons now we've got a situation here where i'm basically going to need a bunch of icons now the way i would like it is if i could do something like this right so sparkles icon i've got the globe icon i've got the you know video camera icon a bunch of others right now obviously what i could do is hold option do this special click thing where you click through and you get multi cursors and now i can basically type in one spot now i could style all of this up but ideally what i want to do is basically just say icon and then i want to have this translate to my own custom style okay so the end goal would be something like this i'd have all my icons i'd have a horizontal row which is going to resemble this little line right so i want a kind of little line in the middle that little line is going to have something like you know a height of 10 to make it look the way you saw it it's going to have a border and the border is going to be gray of 100. okay now as you can see it's barely over there all right see how everything's crunched up so we're going to fix that in a second firstly i'm gonna make this class name flex and i'm gonna go ahead and say um yeah flex right now and as you can see nothing appears okay well this is because we haven't actually this is not a real utility class so i'm gonna show you how to create a custom utility class if we head over to our styles globals.css in here you can actually go ahead and create your own custom css utility classes that for use in tailwind the way you do it is you go to the layer components right in this case and you can go ahead and create an own custom class that we can then pretty much assign to anything that we want so in this case i'm going to say icon basically and all you need to do is say apply that's like the magic keyword that allows you to write your tailwind here so here i'm going to apply a bunch of styles in and these styles are going to correlate to what we see over on the side right so i'm going to say each icon should have a height of 9 a width of 6. it should be on a large screen i want to change the width to 9 instead on the cursor to be point i want to hover over it i want the corners to be rounded small a large on screens and above i want padding of one and when i hover over it only on a large screen do i want to have a background of a gray 100 okay now as you can see just like that the stars have been applied okay already looks really really clean okay so at this point now i can use my custom class names wherever i want and you can do this trick all the time hey look at that mailing delgado what's up she goes hello papa fam much love she's actually a puppet fan member for three months if you want to be a pop fan member and you get literally glowing when you write anything in the chat hit the little join button and join the papa fam special tier i love to see you inside that's awesome all right check this out all right let's see so we've got this looking pretty decent at the moment what i want to do now is go ahead and make all these icons gray so technically an icon is text so in this case i can say text growth 500 nice we changed it space between these components of two items should be on the central axes and i want to go ahead and say margin x of five right so space and as you can see this is a problem right on a big screen it's fine on a small screen we don't have enough space right so what i want to do is basically i want to make this hidden but only appear on a large screen so inline flex it only after we hit the large screen okay now this means it's hidden on small devices but it's there on the bigger screens so if i go into a big screen i can see it otherwise it's not there and now what do you think we're gonna replace it with right we're gonna basically replace it with a burger menu okay now i'm not going to implement a burger menu but you guys can feel free to but i'm going to leave you at that point so you can do it yourself right so we've got the div for the burger menu we call this the menu icon oops with our capital i self-closing component we'll go ahead and say class name and this classroom is gonna have a margin left of oh no it's gonna be an icon as well sorry okay awesome stuff see how it looks nice this div we're gonna go ahead and give a class and a margin left of five so it gets a bit of spacing it can breathe and then if you do want to add anything i'm going to prepare you for it so if you want to have your anything next to it you can go ahead and add in flex item center blah blah blah and on a large screen i'm going to hide it okay looks pretty damn good at this point right so if we hit the large screen what how it hides and the others show so that's how you can have these really nice kind of responsive components which just pop in pop out as we need to right i can't read the name but somebody says this guy is awesome thank you thank you so much make sure you're subscribed if you enjoy the content and i appreciate you being here we're going to keep doing nothing but dropping value on this channel right oh this is a banger all right let's go so we've got the last thing that i want to go ahead and include is this sign in right now if you're signed in it's going to be one value if you're not signed in it's going to be another so we're going to first design this one so we're going to have basically a sign in state and then i'm going to go ahead and do and implement the authentication afterwards then when we log in we can go ahead and do it the other way okay so at this point what i want you to do is add a div and right here we're going to have this just say sign in sign out button right so this is basically going to be where this is going to be inside of here i'm going to have a little image of a kind of uh and again feel free to make this an image icon all right with nextgs components right if you don't see me doing it for everything just know it's because of time that's it right really isn't anything else you could feel free to use the image icon here but you can go ahead and just apply in the style if you want to do it let's do it right now let's do a height of five let's do a width of five there you go done right easy as that and we've got it over there it's tiny right at the moment um but what we can do yeah so i'm actually going to be sticking with the image for today but you can feel free to implement it however the hell you want i'm going to do high five with the five with the five to be fair all right you know i'm gonna stay true to what i said all right i'm not gonna cheat you guys like that let's put it in there let's do layout phil layout phil my parent component around it will be a div to look after it make this relative and then i'll apply my styles so you see you can always work with this thing right it's better that's way more efficient optimized okay with that said i want to make sure that this thing never shrinks right so i'm going to do flex shrink zero flexuring zero and that means that we always have that little beautiful icon okay the next thing i want to do guys is actually go ahead and say um inside of that opening a div i want to go ahead and actually put in hey what have i got here i want to say that it should be a flexbox only on the large screen so i want to hide it on a small screen but as we get to a bigger screen so imagine we hit this screen then i want to start styling it out right so what i'm going to do is when it gets to this bigger screen i'm gonna do the following i'm gonna say it should be a large and it should be flexbox when it comes onto a large screen so then you should see it we should say items that should be in the center at that point we're gonna go ahead and say space between the x components when i add another one of two water border gray of 100 padding of two to give it a little bit of breathing room and i want a cursor pointer when you hover over it okay that looks kind of cool already we're kind of getting there the next thing i need to do is next to this image tag i'm going to have outside my surrounding div i'm going to have a p tag which says sign in okay and as you can see we are getting to the point that you guys can see elsewhere class name here i'm going to say text should be gray with a value of 400 okay okay right nice somebody says you forgot object fit contain yeah in this case i kept it as a square but if you really want to apply it you can feel free to do it thank you for that you can feel free to keep object fit contained uh the original images were square so five by five didn't really distort it but yeah it's a good point right thank you color right so in this point look at that looks kind of cool right so what i then want to do guys is we've got this looking the same over here as well right when i click this it actually takes me to my login page over here which is powered by next auth now we're actually gonna go ahead and implement that in a second but right now you can see we actually have got our first component fully functional looking amazing right that's really clean i love the look of it it looks really really slick okay so with that said now i'm gonna go ahead and actually implement i say we should do the authentication that way we can authenticate a user we can build out the rest of the app so what we're going to do now is actually go ahead and use something called oops where does that go let's bring that back all right let's go ahead and actually introduce something called a next auth okay so next auth amazing library for going ahead and doing your authentication inside of the next js so at this point almost at 600 likes let's go guys amazing energy we're going to go ahead and import this in right so how the hell do we get this working well firstly i want you to install this dependency now i'm using yarn if you're unsure about what you're using come on j pull up your terminal command b to open this up have a look if you've got a yarn lock file you're using yarn if you've got package lock you're using npm it really doesn't matter there's no great if you're using this it's better or any of that kind of crap all right go ahead install next auth dash react into your project next thing i want you to do to get your authentication setup the way it works is inside of nextgs uh we've got this annoying issue what is this uh reserving da da da okay let's have a look that's strange let's do yarn add next earth react interesting okay let's try that again let me go ahead and open up a new terminal right here yarn oh sorry okay what i'm actually doing here is you should be adding next auth you're an ad next door you don't need to add forward slash react right okay introduction we've already done this that's fine okay sweet yeah it actually automatically i'm trying to access their reaper which is why it's freaking out okay um ignac says this dude's on the right thank you i mean appreciate man i'm gonna bring your content no matter what so we're here to stay okay at this point we have the an endpoint to handle our authentication so the way you get this working is in next.js in pages for api this is actually a real functioning api if you do not believe me go to your local host and literally type in forward slash api forward slash hello and you will see there is a functioning endpoint at the end of it okay so the beauty is with nextgs you have a server that is running so naturally you can have your server code or your endpoint on that server hence why we have this forward slash api folder so at this point now i want you to do is we have to carefully create an endpoint where it's forward slash api forward slash auth and notice it's inside of this so make sure you're clicked onto api create a folder called auth and inside of here we create a file now for this file you have to name it in a special way it's going to be square brackets dot dot next auth dot js inside of there right so we're going to go ahead and create that file it needs this because this is where next gs is going to look to go ahead and try and find the thing that we're after okay so let's see what's going on now so what i want you to do at this point is you can go ahead and use this as your reference but instead what we're doing is we're swapping out the github provider for a different provider and i've actually gone ahead and found it over here and this is where i basically found what to do okay i'm going to show you how to do this in a simple quick like coding way right so i'm going to go ahead and pull up mine right now so instead what you want to do is go ahead and use the following so notice i've swapped out the provider for reddit and then we've got this right so it's basically this is where you put in or connect your providers you can add in several you can literally support google login as well as apple login as well as all the others you just have to it's an array so you can actually add in one after another here okay the only thing we need to do is pass in a client id and a client secret so notice here we've got process dot environment so in order to have environment variables in our file i want you to go ahead and create a dot dot local file what this is is it's a private environment file notice how it's grayed out this means it does not get pushed to your github repo which is what we want we want it to be super secret so in this case i want to add a reddit client id and a reddit client secret over here okay now how do you go ahead and set up a reddit client id and a reddit client secret well you have to use something called uh go ahead and create up something called a reddit app okay so the way you do this is you go ahead and head over to reddit.com let's just type in so reddit you can just type in dev api right that's fine go ahead and say this and you should be able to go ahead and if you navigate through i'm kind of showing you in case you get stuck right if you go to preferences in the top corner you'll see you've got reddit preferences and then you can go ahead and where is it somewhere around here it's actually i mean i know the i'll give you the url for it it's actually going to be https www dot reddit oops this one here reddit.com forward slash press four slash apps and here you can actually go ahead and create your own app now i'm gonna go ahead and hide mine firstly but what you will find is that you'll get to this point so you'll see you can actually go ahead and create an app okay so i've gone ahead and already created an app for us so at first this is my client id now if i click edit i'm going to go ahead and show what's on the screen now first i'm going to hide my secret so i'm going to go ahead and just carefully hide my secret heads that way i can actually show you guys and we don't get spammed and the whole build just goes to crap okay so what you should see at this point is the following okay so um all right you'll see this if you go ahead and create another app you're going you just need to go ahead and put in a redirect url so in the beginning what i want you to do is put in http forward slash localhost 3000 api auth callback reddit this is like the reserved url for when we're logging in with our reddit okay the next thing i want you to do okay box that's going to be your username you've got your secret over here you need to copy that secret and we're going to put that inside of our environment file the next thing i want you to do is at the top here you've got your id right so this id is important for connecting your clients your front-end app to your back end right so what i'm going to do now is i'm going to copy my id copy my client and i'm going to go ahead and hide the screen okay so i'm going to go ahead and hide this away and when you need to when you come to deploy you also need to change your url endpoint okay so now i'm going to show you where to put your client id so in this case i've got my client id here like so okay looking pretty nice at this point and then i've got my client secret now i'm going to go ahead paste my client secret close the file and hit save okay and then i'm going to close it that way my client secret doesn't get leaked because these are private credentials so i've copied it in i've hit save and closed my file now because i've changed my environment file remember what i said earlier you need to go ahead and restart your server so ctrl c yarn run dev to restart the server as you can see now it says loading environment from the environment files so in this case it's loaded up on new environment files and our next chest should be pulling like so okay so in this case now it should work so the next step we need to do is wrap our entire app so if you go to underscoreapp.tsx located here what we need to do is wrap our entire app in a special provider this allows us to use the session or hooks from our next auth library inside of our app so the way you do that is you simply go ahead do a very quick import session provider and we're going to wrap our app with it so what i like to do is put parentheses around this go ahead to my component drop this down like so and i pass in a this is called a higher order component pattern okay now all you need to do here is pass in a session now the session we get from destructuring the props so in this case we can do this to make sure we don't break anything that is already there and it's already working so now i pass in my session and this basically has powered up our app and allows us to use all of the core next auth hooks and stuff throughout the app right so all of our components are now powered up with our sessions okay hitting save let's go ahead and see all right um as daniel says even if we don't know the secret key we don't know programming that's not the spirit you want to make sure you learn okay that's it guys we're literally six lakhs away from 600 likes you guys are incredible thank you so much keep up this energy all right let's go bam oh man this is crazy all right so now we've got this make sure your app is still running so to me looks fine everything's good so far we've got candy demiro what's up all right so at this point we can start actually implementing that login functionality so if i go to my sign in over on the top left so remember in my header i'm going to go ahead and actually make it so if i click on my div i can actually go ahead and actually implement a sign in and we're literally gonna do the sign in part right now like no joke it's gonna happen that fast okay so at this point i go to my div which is surrounding the image and i say on click okay i'm gonna do an inline arrow function oops oh actually you could just do a direct call so if i start typing in sign in control spacebar you can see i can import from next auth react this will literally go ahead and based on our configuration if you get this error right here you simply need to do an arrow function like so to match the signature okay hitting save allows us to kind of go through that bit so now if i go ahead and hit sign in based on the configuration that we passed in it goes ahead and actually initializes a sign in process as you can see bam it goes ahead and i'm already logged into my reddit so it's actually gonna say hey we'd like to connect your edit account i click allow at this point it will redirect me back to my application and as you can see we are now signed in i accept our ui is not updating that but that is literally how easy it is to get your authentication up and running okay so at this point i managed to say you don't trust us i know dude i learned in the past not to trust everyone with the keys okay so at this point we need to pull in the session now what is the session when you log in you get something called a session cookie this basically keeps track of if you're logged in basically proves that you are who you say you are and that you are logged in it's a way that you don't have to keep re-authenticating so the way that we go ahead and get access to this is we go ahead and say const data and we can go ahead and rename this two sessions so this is known as destructuring and we use something called the use session hook okay so now i basically this is the object of accessing but i'm renaming it to become session so that's a nice little syntax trick if you didn't know now you know okay so at this point vania says good morning from canada i miss a bit but i love your tutorials thank you so much smash the thumbs up doesn't matter if you're tuning in late we just hit 600 likes that's what i'm talking about papa fam all right so at this point now what i can do is i can go ahead and put something called itinerary operating i can say okay if there is a session then i want to render some logout logic otherwise i'll render the login logic right so in this case i'm going to have my log sign-in stuff over here but if i don't have it i'm gonna go ahead and just copy this put this over here instead right so that way we've got my div here um this is freaking out why it says cannot find name div um interesting let's hit save okay that's fine it's just a little slow thing and we're going to change this to sign out from next door to react we import this and here i'm just going to go ahead and say sign out okay now i'm going to change a few ui things we're not going to keep it exactly the same but i'm going to show you how we can go ahead and do that okay so at this point you can see kind of looks okay right looks pretty decent but let's just see if that worked so now i can see sign up if i click it it should sign me up awesome stuff if i click sign in i have my sign in with reddit i can sign in and then when i come back to the page it should say sign out there we go okay we have sessions successfully implemented boom it's that simple awesome stuff smash the thumbs up button if you're learning something at a very incredible pace right now we have so many viewers i'm so grateful for you guys honestly it means the world to me and we're literally starting and scratching the surface of this build right so literally very very good energy to here today all right so at this point we've got this looking nice now i'm going to go ahead and customize the ui for when we have this up on the screen to the sign up what i want to do is i'm going to have that image which we already have looking pretty decent and then instead of just a regular boring sign out i'm actually going to have the user's information here instead so what i want to do is have a div right so we can actually keep this here i'm going to put a div i'm going to pull my p tag into it we have another p tag and this one is going to access the user's name so remember i logged in with my name right so what i'm doing here is i'm making sure that if we're protecting ourselves it's got optional chaining so if there was ever a case where you know session was undefined or user was undefined it won't throw an error it will just handle it gracefully right i want to make sure if my username is too long it's going to truncate this just means it adds dot dot at the end of it rather than sort of spamming off to the the neverland right and then basically on uh reddit we have something called karma so i'm going to go ahead and just put in comma right it's kind of a cool little ui hacky thing it doesn't really do anything you can make it do something if you want to but it's pretty cool vinnie says i love your energy i tower in the hour it's just stamina dude you build it up it's all good here i'm going to go ahead and say flex one text should be extra small hit save bam look at that looks really clean already so i've got my username that i've logged into this is my uh username in reddit go ahead say say what's up i didn't know it was like that until recently but there you go um and that's looking pretty cool right now next to this i want to have a little chevron so let's have chevron down icon and i'm simply going to start this up with a height of five i don't want it to shrink so flex shrink becomes zero and i want this to be a gray icon as well right so flex gray of 400 will do the trick just nicely bam just like that i have everything looking golden now if i want to go ahead sign out boom and then i've got my sign in sign in with reddit allow just like that we have full user authentication connecting to the reddit api and that makes sense to have a nice war break so i think we're doing amazing stuff right now i love to game says this is pre-recorded or live there's your answer smashing it guys literally 400 viewers across these platforms right now 700 likes inbound very closely alex says best investment was a popular membership now i have over 50 000 years salary for the things i learned last week had the agreement jay screenshot alex right now that is incredible dude this is so so sick okay so at this point let's keep moving forward okay so we've got this looking great now what i want to do here is i want to essentially go ahead and move into the next step which is building out the ui okay so if i head over to my app now there's something that i want to go ahead and address now if you notice i'm going to have my uh header throughout my app where it doesn't matter what page i'm on i'm gonna have this throughout the app okay so what i want to do here is save myself a bit of hassle so what i can do is i go to underscore app.tsx i'm gonna put a little bit of presentational logic down here so when we have the component what i can actually do here guys is i can go ahead and put a div put my component inside the div put the header component of oops header component over at this level this will mean it will come up with every single page so make sure it's something you want to do firstly yeah i'm going to set the height to be a set height of screen the reason why i do this is because that way i'm going to have this kind of nice little parallax effect where you kind of scroll down everything sticks to the page so we're setting a height to the actual screen then we're gonna have overflow rules so i'm gonna say overflow on the y-axis of scroll so overflow y scroll and then i'm gonna have background we're gonna change the color to the sort of reddit color which is 200. now you can see i've got two headers why why because if i go to my index page now i don't actually need to put the header in there so what i've done here is i've said that every single page should have the header okay so every single page has the header instead now i can just focus on if i put h1 hello you will now see hello yeah there is now see it just pops into the next bit but every single page will have the header so it's basically baked into the document itself okay so really really nice sort of way of doing it and it means that throughout your app doesn't matter where i am you can basically always be sure that you've got access to that header all right beautiful stuff okay next thing we're gonna do is go ahead and build out the feed okay or actually really we could build out the post box right so i'm calling this element right here the post box and this is basically what we're going to be using to post into the databases so the first thing i want to do is i want to set up our database so that way we can go ahead and get everything configured we can set up step zen and we can go ahead and do everything that we need to do so i'm going to go ahead and create two sort of uh i'll open up two um screens right now so i can see everything that i need to see what i want to do is i firstly want to sign in okay so you can sign in with your github and super base we need to set up our postgres database before we can go ahead and create a schema with the steps in so that our front end can then use to go ahead and contact our backend with right so at this point i'm going to sign in with my github okay so signing up in my github i already have one project in here which is the reddit clone prep this is the one i'm doing right now to show you guys the build so this is literally the fully functional one that you guys are seeing over here this has the data in there what i want to do now is i want to create a new project okay i'm going to go ahead and add it into my own organization and you get two free projects with super bass so here i'm going to go ahead and actually add in the following i'm going to say something like the project name should be let's just say reddit dash clone youtube okay and then here you need to add in a strong password so at this point i highly recommend you put a password that you're going to remember in okay so in this case i'm going to go ahead and put in a password um and let's go ahead and do this right now okay so i've put in a password i'm just going to type that in again because i was talking okay i've got a password here you can go ahead and set up a region set up a free tier whatever you want to do i'm going to click on create new project okay this will go ahead and set up everything that we need all right papi says wow this project is intense that's how we do it right we always set ourselves these uncomfortable goals that's how we want to progress okay now what you'll see is that they're going ahead and setting up a project now super base is really awesome guys i really do like it it's a very like pretty good it's kind of like a firebase alternative right that's how they kind of market themselves and i i agree with that it's kind of like the fibers alternative now what i want to do here is i'm going to teach you how to go ahead and create your own tables inside of a sql database okay so we're going to have four tables in total we're going to have a post a subreddit a vote and a comment table and this is going to be known as a relational database the first thing i want you guys to very like take into caution when we're learning this right i'm going to give a quick little brief introduction into what a relational database is so imagine we have uh our first table here and our first table is basically a post okay so this first table is going to have several different um like columns inside of it right so let me just draw this down with a line i'm not going to spend too long on this but i want to give you guys a nice little breakdown into what the hell's going on okay so in this case imagine our first table the first column is going to be id okay now inside of a inside of a inside of a sql table you need to have one column known as a primary key now the reason why we need this primary key is basically we need to go ahead and have some way to identify each record from another record okay so this is just kind of a quick hacky example right so imagine we have the username we have the text blah blah so each one here is going to be one two three for example in the rows now this field is known as a primary key okay so a primary key and the rule with a primary key is that you can only have that one primary key it has to be unique it cannot be something which already exists okay so imagine i fill up this table i've got text username body whatever we have for each post now let's imagine i have a comment okay let's imagine i have the same kind of principle here so let me go ahead and see if i can do my little trick i think there's a nice little trick i can do here where i basically come copy this out there we go is it oh how did i do that yeah there we go bam nice right so i've got my little nice kind of comment table over here as well let's go ahead and grab this grab my line oh this is smooth right so again this will have its own uh primary key so every table has to have a primary key okay so this is the rule in sql databases so everything has to have a primary key now what we need to understand is that over on this table we again we have the same principle right we have a username of the person who made the comment you can even have that link to another person i'm going to keep it very simple today as well though right we're going to have the text of the comment itself and then we need a relationship between these two tables this is where sql databases are relational right so they're basically structured in a way that you have relationships between tables so here what we have is essentially we can call this one like for example post underscore id okay so at this point where we've got the post id let's imagine i made a comment i made a record here right so this one could still be one because it's a unique value in a different table we've got sunny we've got you know hey this is awesome post and then we've got the post imagine i was referencing this column over here okay now in order to create a relationship we basically just write a three here and what i've naturally done here is i've actually gone ahead and created a relationship between this row and this row in this table so basically we're saying that this is a comment for this post row so this is known as a foreign key when we're setting things up we just have to tell the database that this is a foreign key once you set up these relationships what you essentially can then do is have very clever logic such as joins that kind of stuff which means that i can basically pull all the posts and i can basically connect all the comments so if i say get me the post with number three and also pass me the comments alongside it you can do a nice little structured query that goes ahead and gets you all of that but i'm gonna take it a step further i'm gonna show you how you actually can go ahead and describe a schema in graphql using step zen and then you can literally just say i want the comment i want this field i want this file i want this field and it will just get you the information it's amazingly powerful and i'm going to show you just how to do it so primary key foreign keys relationships this is sql okay i hope that made sense at this point we're going to go ahead and structure up our databases so i'm going to go ahead and firstly create out the post table now inside of the post table i'm going to have the following table records right so let's go ahead and create a new table and this one i'm going to go ahead and say post okay now you can enable row level security this is basically ensuring that you have secure rules inside of your app i would recommend you do this for production we're not going to do it right now because we're pretty much focusing on the speed of this build we've got a lot to do right so we're going to have created that by default which is timestamp and it's going to have a default value of now the id is the primary value in this case which is why we have primary over here okay the next few things that we're going to have is we're going to have a sub reddit id right so this is going to be linked to a subreddit but we're going to create that one afterwards we're going to have a title of a post we're going to have a body of the post we're going to have an image in the post and we're also going to have a username okay so username we're going to give a value of vaca and yes you can have a separate table for users have a relationship we're going to keep it relatively simple today though right and then we've got text for this one text for this one and for title i'm going to go ahead and say text as well okay and then we've got this so this looks pretty nice so far okay now what i want to do here is make sure that this goes through okay so let's actually create this table or some stuff and then what i'm going to do is create a subreddit table then i'm going to come back and add in an id because remember each post should belong to a sub reddit the reason being is remember this post for example belongs to the papa fam subreddit all right so that way when we load up the subreddit you can see all the posts which are associated to it so i'm going to go ahead and structure our database in that way so this is the post table okay we are now creating the post table so wait until this is done nice stuff we've got this done i'm going to create another table here and call this one subreddit okay so for this table i'm going to go ahead and do something very similar right id is going to be primary awesome stuff but in this case we're going to have the topic of the subreddit this is going to have the value of text or some stuff and pretty much keeping it very straightforward that's pretty nice to have it okay so we're creating our subreddit now we're going to go back to our post and i'm going to do our first foreign key all right so i'm going to go ahead and create a foreign key and show you how we can have a relationship between two tables okay so imagine now inside of a post we're going to add another field here so if i go ahead and edit the table i'm going to go ahead and add one more column and this column is going to be called subreddit id okay so i'm going to go ahead and call this one the subreddit id sub reddit underscore id and i click this little chain icon this says it's a foreign key now you can go ahead and read it out but what they're saying is maintains referential integrity now what does this mean it means if i was to have for example let's say i had 15 comments associated to a post and they had the relationships between them i can't just go ahead and delete that post what i first have to do is delete the 15 comments then i can delete the post this is called referential integrity it prevents you from accidentally deleting data which is in use elsewhere okay so lots of cool stuff that we're going to learn about today okay now there's so many people saying why didn't you use hazura this that guys this is not a discussion about like technology and stuff today subreddit id we're going to go down here i'm going to go to subreddit but you'll see why because step zen is damn powerful and it works well with superbase right so i'm going to go ahead select a column from subreddit to reference and this is basically where we say the pro this is going to have the connection to the id so basically when you have a foreign key you have to connect to the primary key of another table this is why all the values have to be unique okay guys we're literally so close to 700 likes keep smashing it now you can see we've got this link if i click save bam just like that we have a connection done it will go ahead and do what it needs to do i'm going to go ahead and create two more tables after this the first one is going to be the comment table so you can see bam we've got that table okay so let's go ahead and create a new table and this one's going to be called the comment table but this is going to be for when we actually go ahead and add comments into our application so this one's going to have created that it's going to have a post id and you could bet you can guarantee you know what this one's going to be this is going to be a foreign key to the post table id field okay and notice how it picks out the type because it knows it's connected to it this is going to have the text of the comment which is going to be our value text and it's also going to have the username which is of value varka okay so we're sticking to varchar here okay nice um a lot of people say i don't understand why you use the third party for database you can just host your sql database yourself honestly all i'm going to say to you is wait until you get hacked right wait until you get hacked wait until you hit millions users it's not as simple and straightforward as that you need to make sure you go ahead and have scalable approaches to doing this stuff yes you can host it yourself but watch and see how your speed gets impacted right there's reason why they have edge servers there's reason why cdn networks exist all this kind of stuff right so we're creating out our comment table like this awesome stuff okay [Music] okay let's keep going okay now almost to 700 likes let's go oh my god the retention today is insane 400 views across platforms i love you guys all right we're going to go ahead and actually click on so the final one is going to be vote so once this is done there we go final table is called vote okay so what i'm going to do here is create a table and i'm going to find the fields here so we've got create that we've got post id i'm going to have a link to post id there we go um oh mauricio says thanks and i've got my current job because this channel to any beginner that is watching this just put in the effort i pray you get your first job this year from kenya boom that's another person from kenya that is awesome jay save that dude screenshot that that is incredible thank you for sharing that with me post i'm going to go ahead link this to the id there we go nice stuff and then i'm going to go in and we're going to have another thing here called upvote so if you vote right basically we're going to have a field called upvote and it's going to be true if i voted upward so imagine we vote it up it's going to be true oh i need to sign in to vote oh yeah there's that that's a feature as well right it's not a bug it's actually a feature all right so if i sign in it's going to be true if it's up vote post if it's downvote okay so i'm going to represent that in our database with a upvote okay this is going to be a boolean value okay so we've got this looking nice and then we've got username which is avarka and yes if you want to improve this you can have a link to your database or connect next door to your database retain the information for all your users and then have a primary key foreign key relationship with your users like that and pull your information in you could do that right so abdullah yes you're correct you can do that today we're just doing username okay i know it's just a balance between time and what we can do okay awesome stuff we've got this post id linked over there nice stuff creating the table nice our database is set up right we've got all our tables four tables comment post subreddit vote with all the relationships between them so naturally what you would typically have to do at this point is go ahead learn how to create a graphql endpoint or you'd be using sql you know some some javascript library to pull it in i'm going to make your life so easy by introducing step zen into it okay just trust me when i say this is game changer stuff all right so we're gonna jump into step zen i'm gonna go ahead and click my step zen over here and what i want you to do now is you're gonna actually get a key on the screen right so you're gonna get a key and what i'm gonna do is i'm just gonna go ahead and hide the key a little bit okay so at this point we've got our key over here right so you're gonna have an admin key you're gonna have a api key so what i want you to do is you can copy your api key copy admin key all this kind of stuff but these are your credentials right so you want to make sure you copy this and then you need to go ahead and authenticate yourself there is a documentation that you can do that it's very simple to do it okay so the next thing is we need to go ahead and create a endpoint right so what i'm actually going to do here is open up the dots docs for steps and i'll show you how easy it is to do this so let's go ahead and say docs steps in and i like to show you because it's very easy that this is pretty much how i was pretty much learning it all right so you can see connect the rest service overview all this good stuff so if we go to quick start right here in store and set up right firstly you create your your account the next thing you need to do is npm install dash g step then this is because we need to install the step then cli tools okay your cli tools are basically going to be uh how you can use a step zen inside of your terminal so inside of your vs code terminal and we're going to need to do that because we're going to need to run our step then inside of here okay the next thing i want you to do is step send a login and remember guys what it said is what i showed you previously you're gonna have an account name and an admin key you need to use your credentials the ones that you previously saw copy that and use it when you get prompted when you do the steps and login i've already done this step so i don't need to do it we just hit 700 likes amazing wow this is crazy today right so we've got all of this done so once you've done that you're at the point where i'm at okay so now what you can do command b what i want you to do to keep things simple go to your package json level i like to stay at the top level create a folder called step zen okay inside of step zen so what i need to do now is command b go to my terminal notice i'm on the top level here i'm going to say cd step zen so now i'm inside of that step zen folder what i'm gonna do here is say step zen init all right this will initialize my steps then project inside of my application okay so this will go ahead and get things started up for me right while it's doing that so in this case you can see it says what would you like your endpoint to be called in this case they give you a pretty quirky name api forward slash modest salamander if i hit enter it's going ahead and create a stack steps and workplace in this place right here so if i go ahead look inside the steps then we've got our config and this is our going to be our api endpoint okay so bear with me this is pretty cool okay so at this point now this is where the juicy stuff comes in now you're probably wondering oh man i'm gonna have to do all this kind of crazy stuff to get my you know my database schema in all that kind of stuff well no all you have to do guys all you have to do is step then import postgresql that's it that's it and provide a couple of credentials bam you are in okay so at this point you didn't even have to do the init it would have actually done that for you right but i'm just i showed you in two steps okay so let's go over here now now what i want you to do is before we do that i'm going to go ahead and show you a prerequisite step so let's go back to superbase let's go to our settings i'm going to go to my api and at this point what i want you to do is go over to authentication and we're going to scroll down and we're going to go over to where is it going um no it's not here sorry i need my database there we go right database here all right so this is where we have our special credentials so basically what i want to do is i'm going to pop this up on the screen and i'm going to go ahead and pop up my terminal as well okay so there we go um i'll tell you what we'll do we'll just do it as i need it i'll show it okay so i need to hide this quickly on i don't know why it does that okay so i'm going to go ahead and do the steps and import postgres sql okay so awesome stuff let's go ahead and this downloads the sort of start back from or start whatever it is doing it's downloading that from step zen um and basically script i guess and then what's your host this is where it gets super easy right you literally copy your host in bam that's the host where's your database name in our case postgres is the database name and the username so i can say postgres username is postgres and the password remember that special password that we did earlier so i'm going to go ahead and type mine in right now so this is that password that we just did hit enter what is your database schema i'm going to leave it as blank for now hit enter okay so we're going to use the default then it goes ahead and generates the schemas it says successfully imported one schema from zepsen steps in now i kid you not guys this is actually mind blowing how good this does the job right so just watch what it did right now right just look at just look at this this is actually crazy right what it does so i got so excited when i was building this right so look inside here postgres what he did is it created a special graphql file right you can have a look at all of these things well basically what it's done is it's generated graphql types now be careful graphql types are different to typescript types they are different to typescript types yes you can have some tool which goes ahead and converts them but we're not gonna do that today all right but just know that they are different right so in this case it's gone ahead and introspected our database so what does this mean like what is all these fancy words well basically it's red the database it's gone inside the database and it's literally gone ahead and took all of our fields and drawn out a perfect schema for it okay so here we have the schema the different kind of post credits all this kind of stuff and now when you create graphql right when you use graphql you actually have to go ahead and create something called queries or mutations so there are two types of things that you can do in graphql i'm going to keep it very simple and and layman's terms a query is when you want to pull information from your data source so in this case it could be from the postgres that we just imported so we made that step very easy but the beautiful thing about graphql is you can pull from your database as well as a rest api as well as some mongodb database and then return that in all one request it's incredible yes you can do that but what we're gonna do now is use their special handy things inside of step zen so they've got this handy little uh kind of let's call it syntax called db query and this actually goes ahead and makes a quick connection to our postgres database and it can access it so we've got a couple of queries that were built out for us so all the queries are down here so i'm going to show you an example of these in just a second and then we've got these example mutations mutations are when we want to for example insert information or delete information from our database so really really powerful stuff okay johnson whoa he goes i got a full-time job that pays over 4 800 pounds a month which is zara 95k as a front end developer thanks to all the next guest spells we have made israel guys boom that is damn incredible guys destroy the like button for our friend johnson jay screenshot that that is amazing man wow that's crazy dude congrats right so first thing i want you to do here is we have our step zen up and running so while you're inside that folder type in step then start here's the magic here is where it just everything is is honestly to me game changer when you're using graphql because i'm not joking i've found graphql to be a pain point in the past with step zen they've just done it right if i click steps and start watch what happens here okay it says deploying api mode salamander to steps in now you've got two things that are happening here one they literally just deployed it to a real a real cloud-based endpoint i can use that in my production and i can use my key to go ahead and connect to it that is literally a thing that now works okay and we also have a local host version which is running while i have this steps and start running it's just incredible if you ask me right so if i click this now you can see it opens up a this is called graphical whenever you do use graphql you're going to run into your graphical okay so let's see this um peter says sound effects on you i think we're good on the sound jay clear me up if we're good on the sound i think we're good though oh somebody i think you mean like that did it do okay yeah cool um let's have a look so at this point if i click explorer you can see we've got all these example queries right now you're probably wondering where are the mutations if you want to see your mutations simply type in mutation you can give it any name at that point and then hit control spacebar and you'll see your insert post and then it comes up with your mutations it's a little trick i learned if you do query you'll come up with your queries and so forth right so nice little trick kind of good stuff okay so at this point if i click on get post list and i click on like for example all i'm doing here is i just say basically when we use something like rest to go ahead and fetch information from a database the problem is sometimes we do something called over fetching over-fetching is a big problem it's basically where i request a bunch of information from a database it gives me back 50 fields i don't even need 50 fields i just need like for example the username and the text i could need just two thoughts but it gives me 50 back this is making a waste on your api it's a waste on your bandwidth it means that the load times slower all this kind of stuff gets affected by it so we can eradicate that with graphql because the way we set up is we just request which fields we want and it will only send those back in the request which means it's very lightweight in what we need to do it's also very declarative right it's very very nice when you actually get used to using it so at this point i'm going to go ahead and just let's just take everything um let's imagine i wanted all of it i click on execute and you can see we get this empty data back now that's correct because we have no posts okay so what i'm actually going to do here is i'm going to create a subreddit okay so i'm going to set the stage for us right so i'm going to create a subreddit first uh let me go ahead and just refresh my kind of screen's bugged out a little bit let's go ahead create a subreddit let's check this out okay boom let's do this all right wait for that to load up i'll be a little bit patient right and then we've got a subreddit so i'm gonna click insert row and what i'm gonna do here is i'm not sure why this is happening i think it's um to do with my computer um okay anyway i'm gonna click on topic let's just go ahead and say next js and i'm going to go ahead and create this topic okay so why is this bugging out for okay that's being weird i'm not even zoomed in okay okay that's fine that's interesting okay let me go ahead and just move this around for a second i'll actually create a new let's do that let's see if that worked okay if not what i'll do is i'll create a mutation i'll show you how to mutate one into it right that's fine we're not gonna let anything stop us here so go ahead create insert row there we go i don't know why that happened but strange okay so let's go ahead and insert row topic next js okay click save and this will go ahead and automatically generate an id the id for this subreddit is one so bear that in mind okay let's create a new post and then our dummy post is going to have a title um is next js worth learning you guys answer this in the comments right now is next year it's worth learning the body of the thing is say i'm thinking of learning it right so imagine we had this little example right i'm thinking of learning it image here we're not gonna have an image we're gonna just leave it blank for now a username let's go ahead and imagine elon musk wrote this and then subreddit id one if i click view data it will literally connect to my example subreddit and you can see i actually made a connection to that next.js topic done this is in there okay now if i go back to my step then and i go ahead and run the same query now you can see boom i get the actual post there's a real connection let's imagine i don't need any of these fields except for the title and username of the posts you can now see i have a fully functional next year um graphql schema from our friends over at step zen the best part about this guys is if i want to use this inside my react app i click export bam i literally have the code to do it it's that crazy good okay so at this point we're going to go ahead and do a combination of efforts right we're going to go ahead and firstly consume this endpoint from our um a client using something called apollo right so apollo client allows us to consume a graphql endpoint from our front end okay so i'm going to go ahead and use something called apollo client next yes and i'm going to show you how we can actually go ahead and install it's very simple to do all right so you go ahead and you can go ahead and actually go to your let's go ahead and let's clean this up a little bit as well i have so much crap everywhere right so i'm going to close this off um i'm going to pull this over here i'm going to make sure that we have a nice space to work in right i'm going to pull this over here i didn't actually move it okay and we don't need our next author anymore i'm going to pull this over here okay awesome right what i do tend to recommend is actually have your local host on the same page so you can kind of use it as you need to okay looking pretty good sharon priest singh thank you for the donation hello sunnybars you gotta react job thanks to you hey let's go man thank you so much for sharing dude i appreciate that all right all right let's check this out dark unscripted says stepson is useful but i kind of like writing queries as well it's fine you can write queries as well there's no problem we're actually going to write a few queries but trust me it's going to make your life so much easier that's my point right try just use it there's a reason why you'll see why it's honestly amazingly fast to move forward with this okay so at this point uh make sure when you sign up to step zen first link in the description guys we're almost 800 likes destroy that thumbs up button we're doing amazing right now jay i think we're doing damn well for time as well this is really good stuff really really good stuff okay so at this point what i want to do is i'm going to go ahead and um oh my sorry i'm completely blank for a second um oh yeah i'm going to go ahead and set up my app dot tsx right so what i need to do is create something called apollo client so i'm going to go to my package.json level create a folder called apollo dash client oops dot js okay now inside of apollo climb i'm gonna go ahead now first i need to install the apollo client right so what i'd recommend is going over to that tutorial right so you'll see it over here there's loads of tutorials out there but basically they're gonna tell you to do the same thing you need to install the apollo client as well as graphql okay so we need to install both in order to get this running so i'm going to copy this i'm going to go over to my project oops god damn it what am i done um nope vs code i've hidden it there we go all right so at this point i'm going to go ahead command b and here what i like to do is i have my step zen my app running here my step zen server running here and then i have a spare server over here all right let's try terminal sorry so yarn and make sure you don't add it in this folder cd dot dot all right thank you so much veteran he goes hello sonny big fan of us keep doing it thank you so much dude i appreciate the lovely donation amazing stuff all right we're going to say yarn add apollo client and graphql this will install the two required packages into our app now we can basically use an example such as this i'm going to go ahead and customize this one right so what this is this is basically how we set up okay firstly we need the uri now this is not the uri this is uri or something else now we can do two things here okay we can either use our local host version over here or we can actually go ahead and use our deployed version over here so what i'm going to do is i'm actually going to show you how to use this one because if we use the local host there's no api key that we need to go ahead and connect to it but if you want to use your actual production one i'll show you how we do it all right so i'm going to go ahead and press copy so i'm going to copy this one over here and i'm going to put it here now you can definitely make that print an environment variable as well okay so we can go ahead and do that then i'm going to go ahead and add something called headers okay now inside of headers we're going to have something called authorization okay so authorization authorization and this header is going to have backticks and it's going to basically say api key and if you're wondering how the hell does he know this because this is the sample request they give okay now if you did do those steps earlier and you can simply run the command step then who am i dash api key and it will give you your api key also remember in the beginning we actually got it so what i'm going to do is i'm going to run it here and i'm going to hide my screen okay so i'm gonna go ahead and run it and what this did is it gave me my api key okay so i'm gonna kind of show you this in a way that will help you guys out so you guys can actually see this little hack here so i want you guys to see how i did that so that way you don't get stuck i'm gonna blur it out there we go nice okay so check this out run that command step zen who am i dash dash api key and it will go ahead and print out your key copy that key and we're gonna be using that key inside of our environment file okay so i'm going to go ahead and hide my page now i hope you like my little tricks to go ahead and get around this crap all right so there we go come on again there we go now we're back all right so nice so what i'm going to do now is i'm going to go ahead and add a comma here oops add a comma here and basically say api key space and this is going to be process dot environment next underscore public underscore steps and key all right now there are two things here one you can basically obviously not make this public um and then that way what i would recommend is you do have api endpoints that you then interface through to keep the key secret uh but if you don't do that then make sure in production you actually enable rls and that will prevent people from making malicious changes to your your thing but my nice is a tutorial we're trying to move fast so that's why i'm doing this okay so let's go ahead and hit save now i need to add this key in so i'm going to go to my environment file and before i reveal my super secret keys i'm going to go ahead and do the following okay so i'm going to show you how i want you to do it right so i'm going to delete my key for a second and i want you to go ahead and basically do this so inside of your environment file i want you to add a next public steps and key paste that value that you just had in the terminal and basically you should have your secret here as well i'm going to add both values close this up all right so i've shown you how to do this luke mention what is up dude good to see you man that is awesome man it's so nice to see og pop fire members in the house okay so i've added in my keys i've closed out my uh my file okay now what i need to do is you guys guessed it once we change our environment file i'm gonna go ahead and cut my server and run yarn run dev okay and don't ignore this no secret we'll fix that as well very soon okay so we do need to add a secret when we're doing authentication that kind of good stuff okay so at this point we're looking pretty pretty good okay everything is looking pretty nice in fact i do want to address that right now before i forget so i'm going to go ahead and go into my environment local file and i'm going to go ahead and show you guys a quick little trick on something okay so before i go ahead and add those two values in i want to do something like this right i basically want to have this inside of my app right i want to have a next door secret and this can be anything secret it's basically like a way to encrypt your your cookies that kind of stuff when you're sort of you know you're handling authentication and your next auth url should be the url that you're locally developing on then when you develop you need to swap that url in the cell for the one that they give you so typical to our normal deployment steps that's how you would do it okay so somebody said can you increase the font size hope that's good i'm not going to increase it too much increase the resolution on your side because otherwise it gets kind of crazy for me coding okay so then i'm going to go ahead and put these values back hit save and close this file okay so hopefully this is good good for you guys progress wise let's go ahead and save bam close this out now we have all our environment variables set we run yarn run dev and just like that we shouldn't have any more errors in our console okay looking good man looking good all right we've got our local og's in the house this is amazing stuff jay i think we're looking solid we have 400 people across platforms 800 likes coming in clutch ah this is nice this is what we wanted this is very nice okay let's carry on so at this point i need to connect my apollo client to the front end the way i do that is i go ahead head over to my app.tsx and then what i want to do is basically go ahead and wrap the entire app in an apollo provider okay so apollo provider again a higher order combatant a higher order component pattern or some stuff and then for the provider i need to do i need to basically get my client right now if i go over to my apollo client you can see here i'm exporting default client that means i can actually go ahead and import the client like so i can go ahead and say client from this is a default import so you can name it whatever the hell we want go upper level in file tree head to apollo client and i need to pass in my client like so hit save looking good right this is looking very nice so far guys okay so we have our app pretty much where we want it to be right now let's go ahead and hit refresh nothing is broken so now we've got the chance to go ahead and connect to our back end from the front end okay um so at this point what i want to do is start building out the rest of the app all right so we're back to the ui stuff right so we've got steps in setup we've got all this kind of stuff working really well so now we're going to go ahead and start building out the front end and all this sort of endpoints that we need to go ahead and do to basically build out the ability to post comments that all of that kind of good stuff we're going to go hardcore into that right now nissan said hey there appreciate your work dude keep it up thank you so much dude almost 800 likes keep smashing that like button all right the retention is incredible okay let's go all right i'm going to go ahead and actually mix up the sounds i've got some new tracks so i'm going to go and see how they're doing okay oh let's get into a flow state now this is where we go to our front end vibes right so in index what i'm gonna do is i'm gonna go ahead and firstly create something called a postbox component then i'm gonna have a div underneath and inside this div i'm basically gonna have a feed okay i'm gonna have a feed and i'm gonna have some other cool stuff like the subreddit rose that you guys saw previously example is of this right here where is it going um where is my app here right so where we go to my homepage for example this subreddit feed and the feed but right now we're going to build this component over here this one over here subreddit bro now if i sign in i can't actually sign in on this dummy version but basically you're going to see that we have these nice drop downs and when i click this little button it will pop out with their image and so forth so i'm going to show you how to build an awesome looking uh poster thing over here right so let's go ahead and do this all right let's check this out so we're going to go ahead and build a component new component called hostbox.tsx rfc the e about to swear for a second is the rfc though um so in this case i'm gonna make it a little bit smaller so we can actually code um but yeah feel free to increase the resolution on your side and they'll help you guys out all right so first thing is inside the post box i'm going to need my logged in user state so i'm going to go ahead and pull that right now so we can prepare ourselves so we're going to get the session we're going to get equals use a session oops we're going to use the use session hook boom there we go okay awesome stuff now what we're going to do is oh 800 likes let's go guys amazing stuff this is so cool all right so we've got this post box over here i'm going to go ahead and actually import in my post box we can start seeing it post box like so bam there we go and as you can see the post box is being rendered in now okay so this post box right now has lots of moving parts to it okay i'm not gonna lie to you it's moving parts firstly the surrounding div is gonna be a form we're gonna have an element of being able to type in hit enter here okay the first thing i want to do is have a div okay inside of that div i'm basically building this up right so we've got an avatar this is going to be a custom component in the avatar and basically we're using a nice library called die spares which basically you can just pass in a string to it and it will go ahead and create a custom uh avatar based on whatever text you gave it so that's how i've got these random quirky avatar icons okay so for this div i'm gonna basically have my avatar here that i'm gonna create in a second then i'm gonna have my input and guys little surprise for you right not only are we using react hot toast in today's build we are gonna be using react hook orm as well i did forget to mention that we are using react hook form so if that's a nice surprise destroy the like button i'm gonna teach you how to do that as well okay so we're gonna be implementing that as well so right now i'm gonna have a placeholder for this one which just says right now just keep it very simple let's just say create a post create a post by uh entering a title there we go and what i'm actually going to do right here is i'm actually going to level this up straight away i'm going to make it so that if you're signed in let's go ahead and leave the other i'm going to say basically if you do not have a if you have a session then you can sign you can add a post otherwise i'm basically going to go ahead and say no you need to sign in to post sign in to post and then with that i'm going to disable it right so i'm going to say disabled if there is no session and what's cool about tailwind css is you can style based off of that right so you can now go ahead and say something along the lines of um let's go ahead and say um i do we don't need to even say anything i'm just going to disable that box i'm going to say bg gray 50 um so there you go we'll start applying this out padding of two padding of two padding left of five and then outline none so when i hit into it it doesn't have that nice little outline so as you can see sign in to post so i need to sign in at this point let's quickly sign into my app okay looking awesome stuff right now uh let's go ahead and log in and you should be able to see that it no longer says sign into post but allow instead it allows me to say create a post by entering there we go so it's no longer disabled okay so at this point um we're now going to go ahead and add in a rounded corners so i'm going to say rounded md and then i'm going to go ahead and say it flex one because basically this is going to be inside of a container that i want to go ahead and take up the majority of the room for okay so this div is going to be a flexbox it's going to go ahead and have items on the central axes and i'm going to have space between them once i added in f3 okay so as you can see now it goes ahead and uses the majority of the space okay it does have rounded corners it's just very hard to see that but it's right there okay so at this point i'm going to create this little cool avatar component right so we can start benefiting from it so creating the avatar component is pretty simple to be first tsx my bad rfce i like these kind of jazz tunes they're pretty cool right so the avatar component now this right here is basically going to go ahead and we're going to pull in our session so i'm going to use our session information like i did before but what we're going to do here is we're simply going to render out an image so we're literally returning an image here now yes you can once again make this into an image component okay so in fact we could do that right now as well we can go ahead and make it a div let's do that let's keep stay true to our word right now div let's go and say image and i'm going to show you how to white list it as well okay so i'm gonna go ahead and say the source in this case now i want you to go ahead and check out um avatars.diespares.com they're really cool right they are really cool if you go to avatars.diespares.com you will see that you can basically select from a random thing and if you pass in a different seed you see how it creates a random character right so we're using this api to basically pull our images because i couldn't be asked to do any like manual stuff so i basically have this cool seed but if you pass in the same seed it's going to basically go ahead and provide the same image so i'm using a variant called open peeps so what we do is we say source equals oops uh jsx and we're going to go ahead and basically pass in this right here okay so i'm going to go ahead and pass in this url and at the end of the url i need to pass in the following right so i'm going to say it should be the session dot user dot name right so this is going to be basically the seed for it so session.use.name or if that doesn't exist i want it to be the same seed every time so the same image comes up i'm just gonna say placeholder right something like that now it's freaking out because we don't have an image for a layout for it so i'm gonna say this should be relative you guessed it i'm gonna go ahead and say layout fill layout equals fill there we go and this is still freaking out it's because it does not have a support but uh image can be used jsx component okay um whatever i messed up here source uh alt image we are returning there we go we all say h1 hello what am i done here oh wait okay my bad i need to import it there we go see sometimes it happens to the best of us right even i write little random hellos okay awesome so at this point let's go ahead and say rich says this chat lol i know it's super distracting dude um but yeah we're gonna have this image pop out here then what i'm gonna say is it's gonna have the following it's going to say oops i'm going to say height of 10 width of 10 rounded full okay border gray 300 background should be white okay nice okay now at this point what i want to do is you can see that this is a smart kind of avatar component right it's going to basically know if i'm logged in and it will basically render out the ui as needed so at this point i can go ahead and try it out so i can pull in my avatar and let's see if it worked right oh okay it says you have not whitelisted avatardispares.com inside of your next chest we need to do that let's go to next.js config.nextconfig add it to the list of whitelisted urls hit save close our server rerun our server command j hide it go back to our code hit save and refresh all right there we go okay so at this point the image is not appearing so strange let's see why that is right so heading over back to avatar let's see what i'm doing wrong here so we've got oh yeah there we go so it's actually dot svg at the end of it okay there we go hey that's actually my seed right that's how you know it worked because that's the same one i had before okay so looking pretty cool okay that's basically going to be dependent on if i you know wherever i pass it now i do want to go ahead and extend this right so we are using typescript the props typically come through a component here so with typescript we have to define what props are in the form of a type so in this case i'm going to define what the props are like so now what i'm going to do is i'm going to condition leave so we might pass in a string i'm also going to say that we might pass in a large so it's optional and this is basically a boolean now i'm going to show you what we'll do if you pass in a string i'm going to prefer to use that seed instead of the session username okay something like that i do need to destruct the structure our object here like so awesome stuff and then what i'm going to do is i'm going to go ahead and say for the following i'm going to go ahead and do uh if it's large right so basically my class name here i'm going to change this to backticks change this to backticks i'm going to basically add a space here and do the following i want to say okay if oops dollar sign right i'm going to say if it's large only then should you apply these styles as well height of 20 width of 20. cool now i've got a fully reusable avatar component that i can go ahead and customize if i pass in large bam it gets bigger right really cool i think that looks kind of nice right so at this point i've also got a little thing here can you see how my image is kind of overhanging so to fix that what you can do guys is right now the image is going to be inside of here so what you could do is something like overflow hidden and there you go if it overflows it's going to basically crop it out that's how you fix it okay so now we've got this if i pass in the seed of like say sunny there you go a different random seed will come through so that's apparently sunny okay but there you go okay so very nice we've got this little kind of avatar component that i can continue to use throughout our app now this entire build is going to be really really uh focused on reusability of components like the actual good principles that you should be following a lot of the time unscripted says it's energy is amazing legit the only reason i can first in stream instead of wandering off thank you so much dude i appreciate you and i so thank you so much for your support that's what i'm gonna say right over here over here now let's go ahead and style out this form first thing i want to do is i'm gonna say this is sticky because we want this kind of cool looking effect where it sticks now remember i made the header sticky to zero so what i do here is i basically extend the height of it i say stick to uh to 16 instead of zero so it'll kind of come down a bit z50 i want to be on top of everything else i want the borders to be rounded but firstly i'm going to say the background should be white okay so you can see what's happening here right border rounded and i'm going to go ahead and say sorry i'm going to give it a border rounded md and i'm going to go and say the border should be a gray value of 300 pow just like that look at that looking pretty sweet right and then i'm gonna give it a padding of two so in this case padding of tube um looking sick okay looking sick that's pretty nice at this point okay so very very good now i do want to go ahead and actually add in so at this point i have my everything looking kind of nice um i'm gonna probably have some spacing off of that in a second but we'll address that in a bit so underneath my avatar underneath i'm gonna have a photograph icon and a link icon so i'm gonna import these at the top firstly so photograph icon and link icon from the outline variant let's go down under my input and we're going to go ahead and pop these in right now so this music is pretty sick for coding all right so photograph icon oh okay that was a fill photograph icon there we go and then i'm gonna have my link icon like so right so link icon as well the photograph icon i'm going to say is a class name and this one class name and let's go ahead and do this and we'll say height of six but i'm actually going to be doing some cool stuff here so i'm going to probably have some backticks here because later on i'm going to be doing something cool there height of six hair text gray of 300 and in this one i'm going to go ahead and say height of six text uh oops right out the box height of six text gray of 300 there we go looking pretty sweet pretty sweet um i'm going to say cursor should also be a pointer right because there should be a pointer bam and we have it like so i'm going to make this button clickable so you can actually add a picture when you're doing this kind of stuff edison smith what is up boy you guys much love from uganda hashtag popperfun that's what i'm talking about guys almost at 900 likes smash that like button i love the energy today is actually incredible you guys are awesome right all right so uh we've got this these two things here so now what i'm gonna do guys is i'm actually gonna go ahead and incorporate the um react hook form okay so i'm basically going to go ahead and implement react hook form into this build now so react hook form if we head over to it right now you'll see simple rat form validation it's amazing let's put it that way it's very good all right we need to install it into our project so i'm going to go ahead and pull it up in my app command j and command j bam all right now over here i'm going to go ahead and say yarn add react hook form all right that's up and running now so now i need to use it inside of my app so i'm going to import it from we've got this nice little used form this use form is basically a helper which allows us to get the things that we need to go ahead and connect to our form so basically i got this from the documentation on the website but basically you can pull in a bunch of things like register set value handle submit watch form state blah blah blah all this kind of stuff all we need to do as a prerequisite is basically say what type of data is going to be inside that form and eventually what i'm going to have is the post title which is of type string post body which is a type string post image which is a type string and a subreddit which is a string okay so this is the information which i'm going to have in the form now at this point i'm going to go over to my input and basically the way that i connect my input to this special form is i go ahead and put jsx dot dot dot register and i simply pass in a string so in this case i can go ahead and say like post title whatever i need to do and i can also pass in like if it's required or not whatever not so in this case this is the post title this is a required field so i can pass in a required true and basically this will provide a nice little bit of validation for me okay so we have this bit in play right now and what i'm gonna do is i'm gonna have this really nice feature whereby if the user starts typing in here i basically want it to then pop out with the extra fields only if they start typing so i'm gonna show you how to do that right so underneath this div right here i'm gonna go have some jsx and what i'm gonna say felipe is this dude you're amazing watching from brazil here what is up dude good to see you in the house here i'm gonna go ahead and use something called the watch right so this is a really cool little thing that you can do and basically what i'm gonna do is i'm going to double she bang it which means based on flipping the value into a boolean so that way i can use it as a ternary operator so i'm going to go ahead and say watch the post title and then basically i'm saying tell me if this is a a if it's true truthy or falsie and basically convert this value to a boolean that's called double shebang and then i go ahead and it's just funny word all right so um we've got a banner in it all right so let's go you got a post title so div chuck it in there now what you'll see if i type in boom watch this right as i type in oh oh nice only when i type in does it pop up basically you're saying if there's a value there only then should you be able to basically render the next bit okay so we've got the first div i'm gonna go ahead and have the like a few different sort of boxes here the first one i'm gonna have is the body right so the body box this one's gonna basically have a div this div is gonna go ahead and have the following right so guys there's papa hustling let's go all right we've got a p tag this is gonna say body this reminds me of silicon valley if you've seen the series i definitely recommend you watch if you haven't you're missing out you need to see it it's like a coding show placeholder should be text i'm going to say optional it's basically going to be like an optional thing right so you don't have to have that text but i'm going to basically say you know kind of cool all right so you can just basically put up title if you want and then for this input i'm going to register it so remember how we did it we said dot dot register and then i basically pass in the title here so in this case post body now type script comes in clutch when you're doing a lot of coding back to back it really does speed up the process here i say margin of 2 flex of 1 because this is going to be inside of flex background should be blue 50 padding of 2 outline of none bam now if i type in hello you can start to see that this is going to come about pop in right so at this point we need to sort of style up the class name around there flex items center i want that body to be next to it padding x of two okay then this one i'm gonna go ahead and say this should be a min width of at least 90 pixels because of just in time compiler we can do tricks like that and i love that right awesome stuff okay so this is pretty cool um now we've got the div outside so for this div i'm going to say flex flex column and padding on the y axis of two okay awesome stuff so we've got the body over here um and this one's basically going to say body colon okay and then underneath the body i'm gonna basically have the subreddit as well right so here i'm gonna basically go ahead and have a p tag which will say something like subreddit to be fair it's kind of the exact same as this so what i could really do is basically pop this out again and just change it to subreddit register it as subreddit and now it's registered under that and the placeholder we just need to change to say ie react js for example now you can see we've got the body we've got the subreddit and if i go ahead and hide it so as you type in then it pops up with this beautiful looking additional right bit okay looking nice okay then the final one is i basically want to have if i click this button i'm going to keep a piece of state which will basically go ahead and enable a fire an extra step to come in uh mockman says what the hell is this wizardry i love that i'm going to basically have it so if you click this it will go ahead and actually have another one pop in so in order to do that whenever you need to keep track of something you need to stay i'm gonna call that stay image box open image box open and the syntax that you should be doing is set whatever the name is image box open and then we use a user state hook okay now this is going to be a boolean value so i'm going to cast it to a boolean that is typescript you don't even have to do that because it will infer it but i'm just showing you that you can so this will infer that it's boolean based on the first value you gave it but if you want to infer it you can do that make it extra sure okay at this point what i'm going to do is i'm going to go ahead and say if i clicked on that photograph icon okay so on click what i'm going to do inline arrow function this is going to say set the image box open to whatever the opposite value is okay so image box open now what this does is it technically will basically go ahead and have a value here now i need to show the user if they clicked remember i said i was gonna do some cool stuff here this is why i do it right so at this point i go ahead and say a dollar sign and i'll go ahead and say image box open if it's open then i want to change the text of the color so that image should become blue and i want it to be a blue 300 bam now i'll check this out look how oh nice okay now let's actually make that functional if i type in test now when this is open i basically want to conditionally render an extra field over there luca says say hi to brazil what's up brazil hey this is really nice all right so check this out so all right so going underneath over here so i've got my div i'm gonna have another final one now this final one is gonna be the same thing but it's only gonna be basically baked in if the image box is open so i'm going to go ahead copy this one and this is going to be the final value now i'm going to register it to the image uh let's go ahead and just if i forgot i see post image there you go typescript coming in clutch and this is going to be image url okay and the placeholder in this case is going to be optional uh optional dot dot dot hit save now you can see look at this guys if i have an image aha hey look at that look at that nice okay so this is actually working pretty cool now now the only thing that we haven't handled here is what if there's validation errors and also how do you handle the submit okay so i will show you how to do that firstly we're gonna have underneath all of this goodness i'm gonna have the so underneath this i'm gonna have the errors being displayed now remember we get an errors object from the form state so i'll show you how to actually tap into that here so the errors are gonna go here okay so errors go here i don't know why it came out like that i'm going to basically go ahead and say the following i'm saying object dot keys basically what i'm doing is it's actually i'm basically checking the length right so this comes back with a like a an object with certain fields inside of it which say basically if you had this field had an error or not and so forth so what i'm going to check is if any of them came back so if any of them like any error came back then i'm going to start rendering the errors underneath right it's a very simple sort of principle underneath i'm going to have a div and basically what you do here is you go ahead and you access it the following way you basically say if errors dot post title so notice how if i do errors dot it comes up with the automatic type definition dot type is required all right so if there's basically an error where the type is required that's basically why it's there then we can say a post title is required we'll do the same thing for a subreddit because we remember we made those things required right here we actually made it here with the reddit post body i don't think i actually did that did i no i didn't do it right i think subreddit okay so subreddit should be required um required is true and yeah the others can be optional that's fine all right so we've got a post title is required and i also wanted to have a subreddit as required so underneath here bam okay looking good and at this point i also want to start this out so at the same class name we're going to say space y of two and i'm going to say padding of two and the text should be read to symbolize that it's kind of an error right you should be able to know that that's an error okay all right so um usa's channel recommends he goes i speak french but it's the english channel yeah you can dude we've got subtitles as well right so in this case i'm going to do the same trick with the post title that i did earlier so if the user is typed in at all only then will it show the post button right so post title we do the double shebang trick and then we go ahead pop out our parentheses i'm going to pop in a button and this is going to say create post okay bam there it comes in i'm going to go ahead and style this this is going to go and say width of four we're going to say rounded for um bg blue 400 padding of two and the text should be white just like that it becomes a beautiful button all right and the final icing on the cake here is because remember we're surrounded inside of a form we can actually make this type submit and that basically will force our form to submit as we do it okay so there we go papiche says i don't speak much english too sonny explains nice very simple words there you go awesome stuff joseph shout out from nigeria what is that man awesome okay this is looking really good guys we've got a very nice sort of staple here um i like this right it looks pretty pretty good so what i now want to do is actually handle the submit so in this case handle submit so i'm going to go ahead and create a function called um on submit okay so const on submit equals and it's gonna be a dead function for now um but what it will do is eventually this will have the asynchronous so it's gonna be an asynchronous function but it will basically have the form data that was submitted now how do we get that okay well what you do here is you basically go ahead and um i wrap in my handle submit here sorry so i made a mistake so this should be handle submit and then here i get my async form data there we go and then i basically have my code block and then i have my parentheses there we go and then here you can console log the form data if you want okay now the on submit we basically attach to the form on submit so if i go over to my form and i say on submit equals on submit hit save now full screen uh open up your inspector go over here and type in just anything it could be certainly so high subreddit and xjs boom image hit hit enter and i get this hi boom test next yes so you can see the subreddit next year's post title test boom is body boom is image sorry there we go and hi was post body awesome that's exactly what i did all right so at this point it's looking nice right we have our image now this is way too big firstly so we need to kind of correct this off right so i'm going to go back to my app.tsx i'm going to make a little quick change over here i believe it's over here now it's not here it's index so if i go over to my index right now i'm going to apply a quick little bit of styling to the surrounding div because i don't like how this looks i'm going to say max width on a big screen of 5 xl so it's going to be a max width constraint i do want to do a margin y of 7 to push it away from the top and a margin x of auto now what you will notice is it automatically constrains it to the following parameters right so that will automatically looks a lot nicer if i stop typing in we get this kind of awesome looking max width mx auto means it centers itself nicely okay so looking looking good right at this point we've got this looking i think we're doing really well all right we've got the post box up here yeah okay now this one will prepare ourselves later on i'll just take that for now we are going to have that eventually okay so we've got the post box cool so now if i start typing in i get this okay so going back over to postbox all right so where we've got create post awesome stuff guys 900 likes let's go man oh my god the energy is is so sick so so sick okay jay we're all smooth right this is all good all right it's gucci all right so at this point we got post title so what i want to do now is i want to go ahead and have it so that when i create this post i basically now i'm going to have the first bit of logic which is going to cause a mutation in my database so basically what i want is when i click create post i should be able to actually through graphql that we've created with step zen initiate a mutation which basically means that i'm going to go ahead pass some information to my graphql uh as in the form of a request graphical request and this will basically go ahead and modify the database to go ahead and insert the the post column okay so check this out papa smooth there we go smash the sound pit man i don't actually have the sound effect here but i will i will hook it up next time thank you okay so in this case this is looking good oh yeah by the way let me show you guys if i don't include the subreddit and i try and look at this oh if i don't do this like if i do enter and i type in or hello and i try and enter a subreddit is required oh nice and look what it also has it also focuses me on the filter that's not there so really really nice additional step okay this is test there we go look at that it's just so it's clean it is really clean all right so at this point what we are now going to do is i'm going to have a water brick because my mouth is getting super dry can i hear it somebody said can you a cosmos so can you add max smith character account of course you can yes there's a fired up session monique shay what is up og in the house right so at this point we've got the function post box all this good stuff so um now what i want to do is i basically need to use a mutation to add a subreddit so the way that we do this let's kind of get used to this flow of things right we go to our step zen graphql we check the mutation okay so firstly we have a mutation for inserting a post now i'm going to test this out on the graphql the step zen endpoint and then what we're going to do is we're going to see if we can replicate it on our front end okay so basically i'm gonna go to my localhost my stepson localhost okay and now what i'm gonna do is okay what happened here what is that okay let's just go ahead and do a cut steps and start let's load it up again all right there we go there we go okay i don't know why i've been there just do that just restart if it ever happens to you okay so at this point we need a mutation so i'm going to go ahead and show you how you can do mutation so mutation let's go ahead and make this a bit bigger mutation a equals and if i do ctrl spacebar insert post you can see that basically i don't actually need all of these things but it says i need them all right so sometimes you need to modify a schema so firstly all i need to do really is pass in the username title subreddit id the image created that i don't need to pass in and body okay so what we need to do alex says yeah we need we do need to know um we need to do that next uh sort of me up someone says give something low energy cool man got you back all right so at this point what i'm gonna do now is go ahead and actually modify the mutation so i don't need to create that so i'm going to go ahead and just confirm these as well as i do it so sub reddit let's go to my simpson postgres okay so my insert post right we've got a long way to go so keep it keep the energy good oh thank you so much we got a donation um for 7.77 he goes jackpot lucky sevens thank you so much for the free content zakakoda thank you dude i appreciate you so much all right so at this point that's awesome dude thank you so at this point we've got insert post so i don't need the created that okay so i don't actually need that and what we're doing is we're saying it's going to return a post now as you can see this is a db query so this is basically provided by the guys over step zen all we're saying is it's going to go into the post it's going to be an insert command so basically we pass these values in it will insert it into the table and it will return a post to us the awesome thing about graphql is you basically just have to say what you want to get returned back so you do need to get a value back but i'm going to show you how we can actually essentially do this right so firstly if i go ahead and save that file notice how it just immediately redeploys so this is something i really do love about step zen right so as we're going ahead and doing this it goes ahead and just it's very fast to go ahead and develop with so if i refresh now we've got our updated um let's go ahead and do our mutation uh hey it doesn't really matter there insert post and as you can see now it doesn't ask me for created up okay so let's go ahead and try this out guys let's go ahead and say if i want to add a body of example text so let's say my example body image we're going to leave blank uh subreddit id imagine we had a subreddit id of one because we actually added that one uh title is gonna be something like is react is an xjs awesome and then let's go to username and just say elon musk for now okay now notice how it's a red arrow here because it says you need to go ahead and return a subset of fields so here you need to specify what you want back so in this case i'm just going to take everything just to demonstrate i do the mutation now as you can see it returns back something called insert post which is the name of the mutation and inside of it what it actually does is it returns back the the item that we just inserted but remember i can specify even that to that degree what i want back so i don't even need everything that i actually need back right i can only i can actually pick and choose what i want back so this works okay so what i'm now going to do is i'm going to go ahead and create a front end basically a nice little folder structure that we can go ahead and keep a nice and neat mutations and queries folder so what i want you to do is package json create a folder called graph ql inside a graphql i want you to create two files one is going to be called queries.ts the other one is going to be called mutations.ts okay inside of queries what i want you to do is if you're doing a query by the way you can actually export but it doesn't show you for mutations at this point in time it does show you roughly but it's not actually doing it in the correct form so i'll show you how to do this and you guys can go ahead and sort of do it however you want all right so the first thing i want to do is actually go ahead and make a get all post right so i know sorry the mutation right so we're going to do our mutation firstly so first one is going to be add all okay so what we actually need to do here is we need to say export const uh we need to give it a name so we have to add post equals now i need to use something called gql and this comes from apollo client graphql do we do backticks at this point this is why i would recommend having that graphql extension so you get syntax highlighting here so what we do is we say mutation it really doesn't matter the name here so we can say my mutation right really doesn't matter and here we pass in some arguments okay so remember these are not typescript arguments these are basically going to be graphql arguments okay or essentially like in the form of graphql hence why we've got in this backtick structure so we're saying we're passing a body image subreddit title and username and the exclamation mark basically is saying that this is a required field it's not nullable right so the capital s capital id pay attention to those then what we do is we're basically going to go ahead and execute one of those queries that we basically had here so in this case insert post so what i can do is i can say insert post and basically what we do now is we make a mapping to the fields that we pass in to the values that we basically are calling the mutation with so imagine if i called it with these values then it will go ahead and execute the graphql query matching those values that we passed in with the image with the subreddit id and so forth okay so oh somebody said i'm in the queries file thank you so much dude this should be in mutations that's a that's a good catch all right thank you louise jean caleb that's awesome dude all right james tell tattoo what's up dude um so insert post now remember i said it will fire off an error if you don't return something back so in this case i am going to return all the fields back okay so i'm going to return back the body to create that image id and that kind of stuff and we are exploring it so we can use it elsewhere so with this said now we can call this mutation from our front end using a special hook called use mutation so heading back over to our post box right what i'm going to do now is i'm going to go ahead and show you how you can do your first mutation call okay so what we do is we actually go ahead and you can check out the documents online but i'm going to go and show you how we do it we can basically go ahead and call the syntax like so we say use mutation and we pass in that ad post and we imported it from our mutations file now what this does is it gives you back a bunch of things right the first one is it gives you a function to actually execute from so i'm going to call this function add post and the second one is it can give you a bunch of other useful things that you can go ahead and reference from but i don't need those right now okay so the first thing i just need is add post okay so at this point what i'm going to do is i'm going to basically go ahead and eventually call this ad post function now we have a bit of a hiccup here now the reason why we have a hiccup is when i submit a insert post i need to basically check to see if the subreddit that you typed in was already existing or not so what we're going to do now is we're going to implement the following logic i'm going to basically make a get request first which is going to go ahead and see is the subreddit that sunny typed in for example next yes already in the tables if it's not already created i'm going to go ahead and create it get back the id otherwise i'm just going to get the id and use that id inside the add post statement so that's exactly what we're going to be doing right now okay so inside the on submit what i'm gonna do now is i'm gonna have a massive try catch okay so basically a try catch is just basically a way to bubble up errors you could do whatever you want safely at this point okay so we're gonna go ahead and do this and inside my try okay what i'm going to now do is we're going to go ahead and do the following so i need to basically go ahead and firstly create a another get query and we're going to call this one get post list by topic okay so going back to my postgres i need to go ahead and check what i have so in this case i don't i have things like you know examples where i can get the subreddit list and all this kind of stuff i'm going to show you how to write a custom query where we can add our own sql okay so let's go ahead and do that right now so what i'm going to do now is i'm going to go ahead and create our own custom subreddit list by topic uh argument okay so what i'd like to do is i use the examples that they give me i'll just kind of copy this one paste it down here okay and this is an example of a query so i'm going to go ahead and say get subreddit list by topic and what this will do is it will take an argument right we're writing in graphql here so it's a little bit of a difference in that as we say topic colon we provide the graphql type it's a string it's not nullable all right so at this point now we're going to return an array of subreddits because it may find more than one for some reason okay so at this point what i now need to do is change from table to actually query okay and what you do here is you can pass in the following syntax it's basically three exclamation marks so three exclamation marks followed by three exclamation marks and inside of it you pretty much use a sequels query so if you haven't used sql before you could go ahead and actually practice it inside of your super bass uh portal here so inside the super bass you can go to sql editor and we're going to be using sql query language right so structure query language to write queries basically and the first thing i want to do here is i basically want to run a new query which is basically saying select all the fields from and if you haven't done sql basically subscribe to the channel i will teach that in the future or you can check out loads of tutorials on youtube but it's fairly straightforward once you get the hang of it so select it all from the subreddit table okay and then what if i can do it i can hit enter right and this will go ahead and fetch all the fields from the subreddit table so you can see select all from subreddit so this gives me all the fields back from that folder at that place then what i could do is i could say something like this from i'm sorry where the topic for example is equal to a value so in this case if i do next js watch how it gives me back next yes so next gs does not exist oh sorry i've made a mistake i need to do uh thank you rohan dey shaka uh made a world copy sound thank you so much i will do that gwen says what is up everyone what's up gwen og in the house right here i'm gonna do topic equals next js okay let's go ahead and do this and the column and the x just doesn't exist um let me just see what i've made a mistake i need to go ahead and change it too oh sorry i'm using the wrong there you go single quotes all right let's go there you go there you go and there you go nice and then so you can basically do it that way all that way all right so now single quotes where next yes so you can see that that's actually fine but what if i tried to find that react for example it will come back with as saying no rows returned okay so you see how we can query a database like this right so in this case i'm going to take this similar approach except what i'm going to do here is basically go ahead and change it slightly i'm going to say select all from subreddit where and i'm using this to protect because later on we're going to have like more complicated use cases where you basically need to specify which table each field is coming from so i want you to get used to a selector from the subreddit table where the topic equals the first argument that's basically what that means the first argument so topic that we pass in so at this point we have now created our subreddit list query okay so you can now go ahead and test this so as i mentioned before it's going to come up straight away in your steps then so it's going to redeploy it'll be here so i can go ahead and say query a and then you can go ahead and find it here so get subreddit list by topic go ahead feel free to check it out if i went ahead and typed in next js now and i went ahead and said i want to get back the id topic created that hit event hit go for it and it's found that that it literally did it it ran it right and say if i didn't want the created that id back i just wanted the topic boom it just gives me about the topic all right so amazing amazingly powerful stuff right so you see how we're literally getting the best of both worlds we're getting sql we're getting graphql all in one beautiful combination okay so at this point we're gonna go ahead and actually create our uh corresponding query okay so the corresponding query is basically the pattern i'm going to be following through with this kind of approach right so what i want you to do here is i want you to do the import statement at the top of the file and to save ourselves a bit of time i've written out the query like so so export cons get subreddit by topic similar to what we did before except now it's query not mutation the name doesn't matter here my query is fine we pass in an argument the string it's a value which is required hence non-nullable and then we basically call that that query that we basically called earlier passing in the topic that we give here as an argument and i'm basically getting back all the fields from what we requested okay so at this point let's go ahead and go back to our post box now what i want to do here is go ahead and essentially use an opposite thing called use um let's just see how i can do it here let me see what i did i think i used the use query let's go ahead and check what i did so what i did here was i actually went ahead and made a direct query okay so i yeah i did that okay okay so what i'm gonna do now is do a direct query so i'm gonna firstly import my client from the apollo client so i'm gonna go ahead do a direct import from client apollo client and what i'm going to do now is basically query query for the subreddit topic subreddit topic dot dot okay now here what i'm going to do is i'm basically going to go ahead and say the following we'll say const um actually first thing we make a column say await client.query and what you do is you pass in an object and the first thing is the query itself the query that i want to pass in is get subreddit by topic which i import from the external file that we just created okay second thing is variables i pass in this now there is a use query hook but i don't want to use it for one reason and i'll show you that afterwards we will use it another faster now what i do is i pass in the topic okay so the topic here would be form data so basically whatever the user typed in the form not subreddit okay so at this point it will query to see if the subreddit that they entered exists okay now what this does is guys is it will return an object okay so this will return an object now what i can do is i can destructure the object straight away it returns an object with data inside of it inside of that data is basically going to have the example of the name that we called so in this case whatever the query is it will come up with that and inside of this you will have the results okay so what we can now do safely is outside of this uh so outside here i can now go ahead and say const does the subreddit exist subreddit exists and i'm basically gonna make a boolean based off of this okay so check this out get subreddit this by topic thank you granny because i'm happy suddenly he's doing a bit of backing stuff i'm doing bit back and stuff they say length equals greater than zero okay so in this case now what i can do is that if it was found right then what we're basically going to be saying is subreddit is found with this topic right so if it was found on this topic then it's basically this is going to be true okay so what i can now do here is i can say okay if the subreddit doesn't exist then i need to basically go ahead and create the subreddit okay dot dot dot else we can use the existing subreddit use existing subreddit okay so basically you see what's going on here right this is the logic that we were playing with okay so we've got to use the existing object create some subreddit there we go okay so the first thing i want to do is create the subreddit so at this point we basically had that ad we had to add post example i'm gonna do the same thing for adding a sub reddit okay so they're adding a subreddit we did it for add post we need to do the same thing for the uh ad subreddit so going back to our postgres what i'm going to do now is where we've got insert post i'm going to use the same approach here for sub inserting a subreddit right so we're going to use their special db query very very simple approach okay all you need to do here is essentially the same syntax here so it's insert subreddit but we're passing in a topic right that's all i want to do is pass in a topic because basically that's what we require when we actually insert this row right so this is going to insert into the subreddit field and it's going to return back an object of type subreddit okay so now we have this ready what's the natural next step we have to go to our mutations add a corresponding add subreddit okay so in this case you can see the pattern i'm doing this is to keep your consistency this is basically going to make sure that your files don't get crazy messy it's going to keep everything normal so add subreddit gql is a mutation okay it's going to go ahead and pass in the topic take a topic of string and this value has to match the string value that we have over here so in this case subreddit is topic of string or some stuff okay and then it's going to basically be inserting subreddit so we're basically going to go ahead and call that one that we just created over here pass it in and then we're basically stating i want back these fields okay so now heading over back to postbox we can do the same thing i can go ahead and say add sub reddit right and we can go ahead and say equals use mutation equals use mutation and i pass in add subreddit like so okay now add subreddit here um is basically going to be our magic source here right so this is how i basically execute that um that function from our front end okay so in this case what i can do now is i can go ahead and say um in fact what i'm actually going to do is i'm going to make it really kind of nice where i'm going to say console.log subreddit is new creating a new subreddit so i'm gonna even log it out in the console okay so see you guys are gonna see what's going on so if it's the first time for example react we basically just pass in variables except the query in this case is already created because it's attached to this used mutation that we passed in here okay so variables is all we need to pass in and here all we need to do is pass in topic um here we can go ahead and say topic is going to be the form data dot subreddit okay so that's what we're going to be passing in guys incredible stuff we're nearly at 1 000 likes let's go amazing energy right so amazing energy right add the subreddit we've got the variables added in so the next thing i'm going to do is after this i'm going to say console.log and basically i'm going to i'm basically going to say creating the post okay it's the next step right now we need to prepare ourselves for a little bit of a situation that could arise right what i'm going to do is if the for post image didn't actually have for example if i had undefined that can throw an error so what we're going to do is if it was undefined we're actually just going to cast it to an empty string instead so that way we're protected when we're pushing it into our database it's just kind of a known bug but we're gonna that's what we're gonna do to eradicate this okay now we're gonna call our add post function okay so in this case i'm gonna say await uh and then all i can basically what i can do here is i can go ahead and do the following so what i'm actually going to do is remember that that subreddit we just created right the whole purpose of this was to basically get a subreddit id that we can then add a post with right so in this case data is going to come back from this and remember whatever the query or mutation was called that's where it's going to be wrapped inside of so in this case it's going to be add subreddit oh sorry um what am i talking about it's going to be the day it's going to come back the day is going to be called insert subreddit because that's what we basically had called here so insert subreddit so we basically go ahead and call it insert subreddit i'm going to rename it to new subreddit because that's what we're basically pulling in so that's a bit of a bit of a mash up right but i think it's i think it's pretty good um jail we're pretty good on the stream i think we are right so at this point new subreddit what we're now gonna do um what we're now going to do is we're going to go ahead and say with this new subreddit we're going to create a add a new post okay so i'm going to say add post um jay it updates okay so we're gonna say add post equals um this is gonna go ahead and say we're gonna pass in the variables now all right so the variables for the post remember what we did earlier we prepared ourselves for this right so the body here is gonna be form data dot post body the second one is going to be the image and remember we passed the image up here so in that case if it was default or blank we can suffix it the subreddit id this is the important one right so what we're doing here the subreddit id if it wasn't created before we would have just created it so we're going to use that new id that we just got back from the database to basically be our variable so basically what we're doing is if you created a new post for a subreddit which didn't exist it will literally create it return the id and then you can use the id okay so the next thing title is form data dot post title or some stuff okay now what we're gonna do is we're gonna go ahead and say the username is the final sort of matching last bit we're going to say session dot user dot name that's not sure i need proper updates there we go um session user name and we're going to hit save okay now this post is gonna also return uh some data right so you can see the pattern here right so we're gonna go ahead and say it return some data and again what was the name of the call that we had here was called insert post insert post but instead i'm going to rename that to be called the new post that came back okay so at this point after all this kind of logic is said and done what you can do here is you can say console.log new post right and i'm going to go ahead and say something like new post added and that's gonna be in the console obviously if you push this to production make sure you don't actually push these values you know i mean you want it to be very clean okay now what we can do is remember guys that we actually said already was the subreddit already found remember this bit over here when we did the initial one right so what we can now do guys is if the second situation came around for example if i already tried to if i tried to post in the subreddit which already existed now i can go ahead and post directly into that subreddit so what i'm going to do here is i'm going to go ahead and say using existing subreddit if it was already found and i'm just going to log it out so you can see for yourself and here i'm going to say const image equals form there again we're protecting ourselves against the image very similar approach here you could even refactor this if you wanted okay here we're going to go ahead and say await add post okay and then we're going to go ahead and pass in the variables now in this case slight difference and i want you i want to show you if you can see the difference there right so everything else is relatively similar okay so i'm sorry i didn't put that in my it's going to be variables oops variables and then we pop it in right so in this case everything is similar except for the subreddit id this one we actually fetched so it would have come back as the first answer in the array and then that would have given us the id back okay so in this situation we can actually go ahead and use that as our value okay and then what we could do if we really want to is we can go ahead and actually get this back so we can actually go ahead and destructure it so we can say const um like so we can get the data out of it what was it called it was insert post you can see the sort of pattern right new post comes back and then you can go ahead and say new post was added okay so you can see two different routes that we've got here all wrapped in try catch it's pretty cool how it works okay amazing amazing stuff right so after all of that is said and done we go outside the else block all right so this is basically after the post has been added hey we made it over here right so basically what you can do now is you can reset all the fields in the form they do this by giving you this set value right so all you need to do is very simple to use this all you need to do is say set value set value and you basically call the name so in this case post body and you're passing the value right so i'm going to do this a few times for post image post all that kind of stuff and what i want to do guys is i want to actually i'm going to do all of this in one go and if it works i want to make this the big winner for the 1000 likes right so i'm going to go ahead and quickly implement react hot toast which is a notification library and i'm going to basically make it that when it's submitting we have feedback so react hot toast awesome library all right we're going to go ahead and import this right now make me a toast these awesome things right so let's go ahead and actually add it into our app so yarn add react hot toast let's go ahead and pop that in jay saw at the chat let's go ahead and do this i'm going to go ahead and pop in like so oops um yarn add oops oh my god okay don't do that um why am i not copying lately let's do this back here yarn add react hot toast you want to add react hot toast and then i'm going to go ahead and basically you just need to put this toaster in at the highest point in your app so what you need to do is go over to your app.tsx and over here i want you to simply put in the toaster it doesn't really matter where you put it here it's just at the highest level okay the toaster goes in now you can start putting things inside of your app okay so at this point what i want you to do is i'm going to show you a really cool way of having a toaster which is essentially going to go ahead and react to the promises that are being made so here what i'm going to say is const notification equals toast and notice how i imported it from a react hot toast dot loading this is a special type and we're going to say creating new post dot don okay so this is the first thing the second thing i can do now is go down and once i've finished with all of this work right so once it's actually finally posted i can say toast.success right toast.success and then here we're going to go ahead and say new post created right this will have a nice little tick associated with it but what you can do is you can actually dismiss the old ones we can actually replace it or swap it out by passing in the id of the notification now remember if any error did happen what we could do is go ahead and say toast.error and i can say whoops something went wrong and that allows me to look into it to debug it figure out what the issue is and essentially you pass in the same notification now let's see if all of our logic worked we did a hell of a lot of work there guys and let's see if it actually plays off all right so are you guys ready i think i'm ready for this right we're gonna go ahead and say um is next js oh is let's go ahead and say is oops whoa okay what's that okay i've got some weird thing going on here um is react js awesome right body i think it is right subreddit react js we don't have a subreddit for this at the moment right image let's leave blank for initially i'm going to create the post creating new post okay subreddit is new it creates a new subreddit creates a new post with that associated subreddit so let's see what it did so i think it is the post new post was added returned back with an id of three with a subreddit f2 boom let's go it worked that is sick oh my god it worked that is amazing dude first time all of that just went through and let's actually check right now okay so let's go and see if we actually added this in so i'm going back to my thing right yes let's go ahead and make the statement boom it created it for us in the back end that's amazing man and it worked first time that is so clean okay so all of that happened right now if i do the same thing right so i'm going to do the same thing and i'm actually going to use an existing subreddit now so is the post i made for react there question mark um we can say i hope so dot dot dot and let's do react js create post all right let's see it using existing subreddit boom created the new subreddit idea for subreddit of two see what it did it used the basically the first time we did it it created the subreddit then it went ahead and the second time it used the existing subreddit so all of this happening full stack development in front of you guys this is incredible how this is playing out right i'm really enjoying this guys let me know if you're enjoying this as well we are doing awesome work right here okay so at this point what i want to do is i have no idea where the hell this comes from that's just weird okay um at this point i don't have that on mine it's weird first time i've seen that okay so and look at that a thousand likes perfect timing what is going on i'm gonna go ahead and just put our song on for a second because that's a thousand likes in the house guys oh that is so cool man all right so at this point i'm gonna go ahead you can see i've got a permanent smile on my face this build's going awesome right let's go ahead and see if i pull in all my posts let's go ahead and make a query bam look at this guys is my react look oh my god it's there is the poster made for react there is react awesome all right see how it's there everything's there there we go amazing stuff right say is react awesome there's a post i made for out there i hope so literally what i just made before right and you see how it's using my username this time okay so awesome stuff guys now what we're gonna do is actually use this information pull it into our front end and actually get the feed done and built okay and we're gonna move full speed now because now you guys have seen the flow you've seen pretty much how we do the mutation how we do the query how we do all that stuff so now we can go full speed get the feed done get the widgets done get the comments done get the dynamic routing done all that good stuff and we're already a thousand likes what that's what i'm talking about that's why i've literally sat there for 14 hours so i knew this was gonna be a banger let's go all right you can tell i'm hyped i get hyped with new tech and this one blew my mind i was so happy when i was using it i literally said yeah i got emotional when i found out it worked because it was that cool all right people call it sad i call it amazing i thought it was amazing how this thing worked right so we're going to go ahead and absolutely destroy this one we're going to keep taking it to a new height what amazing content science is insane thank you so much dude let's go ahead and make it even better right so we've got the postbox done now the best bit i love about this is the post box is its own little neat component it's just tucked away so now we can just focus on the next bit and then the post box will do this thing wherever like irrelevant of what we did elsewhere so this is what's good about low coupled code right we're going to create fee oh alexis welcome to the proper fam specialty thank you for supporting us we appreciate you feed.tsx new file rfce best live stream ever let's go all right feed goes here let's go ahead and save go ahead and import oh this song gets me higher all right so at this point we're gonna go ahead and pull up the feed on the screen so i'm gonna go ahead and pull it over here like so feed goes here okay awesome so i'm now going to go ahead and close this out so we can go ahead and focus and we're going to build out the feed so um heading back over to index what i'm now going to do the feed is basically a very important part of all of this because it's basically how we're going to get all of our posts in right and i'm going to be using the same feed throughout so if you notice how even on my deployed application where is it gone over here right so even when i'm in any thread or post or whatever it's using the same feed component right we're just passing in a special thing that allows it to differentiate what feed to show all right so i'm going to basically be showing you how we can do all of this off of the same component that is insane okay all right jake goes we want to see you next month oh yeah so people want to see jay i've got vlogs coming dude it's going to be a lot of fun on this channel right so the feed is the next thing so what we're going to do now guys is we need to basically make a get all posts mutation or query sorry so get all posts is basically going to be pulling in from so let's go ahead and do i think we've already got this one down let's go to queries we need to go ahead and create a query for this we're going to be calling it get all posts this is basically going to be using the get post list function that was already actually created for us so if we go to get post list here you can see it's actually already there all right so it's actually a perfect thing the use of steps ends db query looks really great we've got some good uh good help here from the guys so i can go over to my queries and i can go ahead and simply pop in the following i can say export const get posts backticks and then in here i can say query my query and then i can basically go ahead and just pass in get post list so get post get post list which is the query itself and it doesn't take anything here um and what we can do here is we can basically go ahead and request all the information that we want now i'm going to show you it gets even better i swear to god right because right now all i'm going to be doing in is basically requesting the information such as the body the text the post stuff but i'm going to show you how even if you requested things like comments you can use that materializer to just go ahead and let it do all the magic work and you it's incredible i'm going to show you it's literally so cool all right i'm going gonna go ahead and get the body i'm gonna go ahead and get the create that image i id and so forth let's go ahead and get this boom and then let's go ahead and get the title username all that kind of good stuff as well so these are all the post things okay we are going to eventually be upgrading this to get the votes the subreddit and the comments and so forth okay in fact screw it let's do it right now let's do it right now we're on such a roll let's keep going right so at this point we're going to go ahead and do something pretty cool here so what we can do inside of step then is we can use make use of something called the materializer okay so what i now want to do is i'm going to create a query which will essentially go ahead and do that clever join logic that i talked about before so imagine if i want to get all of the subreddits that belong to a post or if i want to get the subreddit information that belongs to a post how do i do that well essentially all you do here is you go to your post your type and you basically extend it right so basically i'm going to go ahead and say this we're going to have a subreddit field right and this is basically going to be an array of subreddits because basically we're going to assume that you could have been possibly somehow in i mean really that should be a single but it's fine right we can do that for this one we're gonna say at materializer so we're gonna use a special thing called a materializer right at materializer and what do you do here is you pass in the following so we need to basically make a form of query which will basically go ahead and query for something like get subreddit list by the id okay so in this case we have subreddit id here so i could use this id to make a special kind of query uh in in sql to go ahead and fetch the information that i'm after so let's go ahead and make a query like that okay so i'm gonna go ahead and show you right here so if we go down to type query i'm gonna go ahead and make a new query and let's call it something like this get subreddit list by id this will take an id as an argument and basically it's going to return a list of subreddits because what we're saying is select all from subreddit where the id matches the one that i passed in so basically you're querying based on all the subreddits based on the id okay so now what i can do is this if i hit save i can show you how this works so let's go over to steps then let's go ahead and check out the queries and let's see get subreddit um where is it get subreddit um where's it going come on cue uh local schema has an error expected found an error okay so wherever i made an error um it's going to be in line 24. oh yeah yeah oops materializer let's actually comment this out for now um we don't need that just yet we can go ahead and first test our iron point and then we can go ahead and do it and once you see the example once you'll really realize how powerful this is okay so refresh now you can see get subreddit list by id okay so imagine if i pass in that subreddit list to id2 and i pass in like the following right and you can do you can combine queries you can do loads of cool stuff right so if i do this you see how it passed back the react.js and i think one was next year there we go okay so this literally works so we've made a query which essentially goes ahead and can fetch based on the id that i pass in so this is the genius part what we're now doing is we just need to basically draw out the schema to say this is how you fetch the information that you're after okay so the way that i do that now is i essentially say um what is happening here where's my battery slowly dying that's interesting okay um so in this case we can go ahead and say um what does that do though um ignore that okay so what we can do here is i can go ahead and say um subreddit materializer and what you do is you pass in the query so in this case i say query should be the query which is called get subreddit list by id right um by id and then the second thing you do is you obviously that subreddit list by id took an argument so what you can do is you pass in arguments okay and then we pass in an array here and you can basically go ahead and just pass in all the arguments now the first thing you have to do is pass in the name of the field that you're trying to replace so in this case the subreddit list by id had a field id so what you do here is the name of that field is id and the value which we're going to swap it for so the field that was we're basically passing in is that value is the subreddit id here now think about this guys think about this properly okay what happens here to make this all work together in a really nice way is we essentially go ahead and basically have it so that let me go ahead and check something all right jay saw that please yeah um let's go ahead and hit save now i want to show you guys how powerful this really is so i have not done anything else i really have not done anything else special here all i have done is told it how to go ahead and make a query if i ever need that information so now if i go to any of these for example get post list right so let's go ahead and refresh if i go to my get post list right now you can see if i can go ahead and request all this sort of you know the things that we had before okay cool i get all my my list back now if i click on subreddit i can actually go ahead and get things like the topic the id and stuff as well bam and look what it literally did it now knows how to go ahead and query and fetch that inner information that is insane that is literally so powerful so we can do this all day long right we can do it for votes we can do it for comments we can do it for everything and it literally just works like it's inc it's so powerful i swear to god like it takes it might take a minute for that to sink in as to what's going on but it really is game changer stuff right like i cannot stress enough how powerful that actually is to be able to do that out of the box let me know if you guys are thinking that that's like good i know everyone is zoned in um a little update jj is good um but let's go and see comments um subreddit okay awesome so what i'm now going to do guys is i'm going to extend it to include the votes and the comments and then we're going to continue on with the front end portion of the build okay so here i'm going to say votes i'm going to go ahead and say this will return an array of vote okay and then i'm going to go ahead and do the following so let's go ahead and say this one second right so i'm going to do votes and then i'm going to do app materializer and we're going to do the same thing here as well okay so firstly i'm going to block this out i'm going to do the same thing for votes and we'll do the same thing for comments so i'm going to basically make these queries now so it's out the way we can get ahead with it the first one is get votes by post id and it's going to be a very similar function as to what we did earlier right remember we had all these relationships that we set out to define earlier so the the next one i'm gonna do is get votes by post id okay so we've got a relationship there where the foreign key is attached so we're gonna say get votes by post id we pass in the post id and what we're doing is select all from vote table where the post id equals whatever we passed in order it by the most recent posts okay so this is literally how we're going to do this um so i'm going to go ahead and do this example here so i'm going to go ahead and copy and this returns an array of vote okay cool stuff go up to the top now go to our votes and now again we do the same principle guys we have a materializer we pass in the query we now go ahead and say get votes by post id we pass in the arguments in this case it's an array and the first thing we have to do is pass in the name of the field and in this case it was post underscore id i believe yep post underscore id so in this case don't get that wrong the second thing is whatever field you're going to use here for yours so in this case the post id is actually our regular id field okay so done hit save let's go ahead and check that and if we have votes attached to it it will literally just work like that it's so pal i swear to god it is actually amazing that that materialized i'm so impressed by that materializer i can't even stress enough right so we've got the votes and i'm gonna do the next one as well the comments so comments is going to be replaced with a comment and we're going to have a map materializer and this one is going to be the same thing and basically we're just drawing our schema here so the query is going to be we're actually going to create get comment by post id so i'm going to go ahead and create a comment by post id a query down here so let's just go under here this is probably anywhere else but yeah you can delete the ones that they automatically create for you it's completely up to you this is going to basically take a post id select all from the comment table where the post id the foreign key that we made earlier is the post id here now what we do is we go up to our materializer we simply go ahead pop in the get post we pass in the arguments this is where we make that connection we now go ahead and say the name of the field is actually going to be post id so post underscore id and the field that we replace it with again in our situation post id is just id awesome stuff now we have everything set in stone and we're ready to kind of progress right so now what we can do is we can actually make a def like a request here to any of this and it will just work it's so it's actually incredible how you can do that right so now if i was to even refresh here you can actually see that we've got comments and if i was to go ahead and pull these in right now we don't have a comment but we can even kind of fake this and prove it right but for example here inside of our post here where we have for example let's go ahead and get the information back let's go ahead and get like a bunch of information back um so for example for post number one right is next yes worth learning i'm gonna go ahead and force a comment in there so we can actually use it to test later on so let's go over to our table editor go into our comment i'm going to create a comment i'm going to force the comment into post number one okay so insert row oh god it's doing this weird thing again all right so super bass fix that please it's so annoying um i'm gonna go ahead and pop that in over here let's do this again i love this song all right everyone's zoned in this is crazy i've never seen like the focus we still got 300 people across platforms and everyone is like glued in all right so at this point i've got the comment oops okay comment hey thank you so much bro i appreciate the donation so here post id number one i'm gonna go and say this is a comment username elon musk okay id will automatically be generated hit save now this is actually already connected to a uh thing so it's actually let's see is next yes worth learning so it's actually connected now i'm going to show you the i was about sweater the amazing magic behind the materializer so i drove i basically defined the schema and now it will it knows how to go ahead and fetch that information if i ever request it so if i do this bam look at that it literally returned back that's the post it's got the subreddit it's next jeff worth learning if you see here this is a comment it's linked to the post is next year it's worth learning that is crazy and now you can just go ham and build this stuff up so now we've got all of this work in i'm now going to go ahead and just go crazy and build out the whole ui right so honestly game changer it's mind-blowing it's so powerful their materializer kudos to the step zen team for doing that it really was impressive when i saw it okay um yeah it's huge huge all right so at this point now we're going to just go to our feed and we need to go ahead and make again our queries sorry queries and we're going to go ahead and do the get all posts now remember i said this was the get old post before right so i'm going to show you the actual ghetto post that we're coming that we can now request for right so if you just kind of pause the screen for a second i'm going to make a bunch of requests additionally right as you know i can go ahead and just pop them in at the end so it's clearer i'm going to get the comments i'm going to get the subreddits and i'm also going to get the votes okay so you can see now what i'm doing is the materializer will kick in as soon as i pull these in and obviously i'm pulling in everything here if you don't want to do that for example in the graphql fashion you could eventually go ahead and make this more granular approach and basically reduce the number of things that you pull in in this case it doesn't really matter we're just kind of doing it for demonstrational purposes but now you can see that we can do that okay smash the like button literally almost at 1 100 likes i cannot believe it keep this energy up guys incredible incredible stuff so for the feed let's go ahead and move forward so feed we're going to go ahead and say so i'm going to go ahead and say um const oh so basically i need to basically fetch from the query so i we're going to have some stuff that's going to get returned from use query uh here i'm going to say get all posts get all posts awesome stuff and this is going to return back data okay it also returns back error which you can use for debugging if for whatever reason it actually goes ahead and uh has an issue whatever right so i told you i was coding for 14 hours yesterday i'm not joking i built this a lot of this was built yesterday right it's actually not um but this is how excited i'm about that's what i want you guys to know okay so at this point we're gonna go ahead and say return um and here i'm gonna go ahead and do the following so i want to essentially go ahead and say that the here we're going to have data okay so i'm going to basically okay so firstly what i want to do is i want to force type definitions in right so it's about time we started introducing type definitions i want to do something similar to this where i can basically do data dot um it would have come back in the form of the query so it would have been something like this and this would have returned back an array of type post now we don't have any type definitions yet in our code so obviously we created a all we've got all these type definitions here in the form of graphql so what i'm going to do is build a relevant similar one so if i go to package.json i'm going to create a new file called typings.d.t.s this is called a typings definition file okay now what i'm going to do is basically i've already structured it out i've already done the work for you guys so basically we've got a type for comments okay we have a type for vote right we have a type for post and we have a type for subreddit so in this case we've got the types and these are typescript definitions they're just closely masking that of the ones that we have in graphql yeah so in this case we've got comments vote subreddit post and as you can see at the end of it we've got the posts are just like this is essentially near enough mapped to how we've got it here okay so now we can use these now obviously you can export this however i've actually found that when we use this now it actually pulls it up and it picks up on it straight away um so i think it's actually a new thing so now i see i don't have to import i actually knew that that was coming in pretty cool okay pretty cool so in this case we've got we're basically now saying that this is a post so when i actually reference it i will get all the correct typescript definitions okay so now what i can do is i can say post dot map and what i do want you to do here is conditionally render in case for whatever reason it's it's undefined you should handle it gracefully so for every single post i want to render out the following i'm going to render out a post component and we're going to create this post component now each post component should always have a key when you have maps right we're going to use the id to go ahead and provide that right then we're going to pass in a post object which is going to be the rest of the post all right so let's go ahead and create this post object right now okay so i'm going to create the component post dot tsx rfce into that and then here what i'm going to do is i'm going to go ahead and pass in the props so at this point what we need to do we're getting loads of new subscribers i see i'm flying in thank you so much guys if you're enjoying this content make sure you subscribe hit the like button uh and yeah i'm going to keep the content coming right so we've got post which is of type post and as you can see we don't need to import because i think it's typings.d.ts is naturally picked up by our compiler um but yeah that's pretty cool that we have to do that right so i can now pull in my post and we pass in the props like so and then we can start designing it so i'm going to go ahead and just do something quickly here so i'm going to import my post like so and where we've got our feed now on the page you can see we've got four posts hey now obviously that doesn't show anything right so i'm gonna actually make this way more useful but that's a good starting point that's a very good starting point right so now we've got create a post binary tile da da da so at this point we can go ahead and create the actual post itself okay so going inside the post what we're first going to do is go ahead and say um josiah says how are you i'm doing good dude thank you very much right so here we've got the post now i'm going to go ahead and firstly we've got the div and inside of that we're going to have the left hand side section so this is basically where i'm going to use my other one as reference so we've got the here okay so we're still yet to build this so we've got this left left-hand side which is the votes okay so this is going to be for the votes this is a div which will resemble the votes then we're going to have the um a div which is basically going to be for the rest of the body so here this is going to be the header so think about how i'm going to break this up right it's going to essentially be something like this it's going to be the header of the post the sort of title and all that kind of stuff or the body of the post the image of the post and then the footer of the post okay and then this section right here is basically going to be the um the whatever i just wrote here votes yeah okay so at this point we've got this so now i'm going to say this is going to be slip into header the body the image and footer okay so we've got header body image and photo at this point i'm going to go ahead and pull in my div for the header okay so actually we can go ahead and we can kind of just do all of this in one go so firstly i'm going to import all of my actual icons so we can kind of short line this process for the votes firstly okay the votes i'm going to have on the left hand side of this i'm basically going to go ahead and have an arrow up icon i'm going to have a um an arrow down icon an arrow down icon arrow down icon i'm gonna have a and then in the middle of it a p tag so that p tag will have the number something like zero in for now right in this case you can see we've got the number there right so forth so for both of these i want to basically go ahead and say that these are going to have the custom button custom class vote buttons which we'll do in a second and when i hover over it each one is going to be colored a bit different so in this case one's going to be red one's going to be blue okay now the custom buttons don't exist right the colors were kicking in that's fine oops not blue how about the vote buttons we need to go to our globals we need to go ahead and add in a vote buttons custom plus and here i'm going to go ahead and style these custom buttons like so okay so here what i'm going to do is add the following styles to vote buttons width and the height of 6 background grade padding and 1 rounded i want so forth right now obviously these aren't aligned correctly so what i am now going to do is go ahead and sign these uh assign these with a flexbox flex column to make them in the right thing so flex column there we go i need things to be in the center so the way i can do that is i can say items stay in the center there you go looking good justify in the start so that would be at the top of the file as it gets bigger space between the yx components of one rounded md oh rounded on the let's see rounded on the left side medium and i'll show you why we do that afterwards background gray 50 padding of four and a text gray 400 okay 400 there we go oh my god we've got so much retention i'm actually amazed wow okay so this is looking pretty good look at that oh nice brush all right looking sick right now for the p tag here this one is going to actually be text black font will be bold for that number and the text will be extra small okay there we go so that's starting to look a bit cleaner cool now for the header let's go ahead and get this bit down so firstly this div surrounding i'm gonna have this one as padding of three padding bottom so panning all around of three and i'm just changing the one at the bottom to uh padding one the surrounding container i actually want to start this one up first a bit as well all right so flex cursor pointer j sort something out um flex purple pointer rounded um md border okay so in this case we're starting to style it up the actual surrounding thing um border is going to be gray of 300 and then i'm going to say background should be white there we go shadow should be shadow shadow should be small however when i hover over it i want the border and i want the border to also be a gray of 600 okay awesome stuff so there you go we've got this nice little effect going on right now rounded md i messed up rounded there we go okay cool so at this point we pull it in awesome stuff okay now i want to basically go ahead and for the header this is where we're going to start populating things are going to basically be inside of it all right so for the header i've got the avatar remember we've got that beautiful avatar component i told you it was going to come in clutch all right and now for the seed we're actually we're actually going to go ahead and use the post subreddit topic okay so i'm going to show you how we do that we say seed equals remember i had the type definitions you just created so look at this post.subreddit is an array and then we can go in and get the topic so this is what's so sick about type uh typescript right we're gonna conditionally render in case it's not there but bow look at that they pulled it in all right so you can actually safely access your stuff because your type definitions are solid okay so got a p tag and here i'm gonna go ahead and have a so this is basically where i have that funky sort of writing like this okay so the way you kind of do it in um inside of um [Music] inside of a reddit is you have r forward slash which is regarding the subreddit and then we actually go ahead and have the post so in this case it'll be post dot subreddit subreddit and it's going to be zero which is the first result.topic okay and as you can see it's from the xjs to react jess awesome awesome stuff looking amazing right now and then we've got the underneath we're gonna go ahead and have uh this little kind of we're gonna have this little dot right so underneath there i'm gonna have this dot posted by user forward slash post.username and then you can see it says posted by elon musk um and i actually want to have a space after that as well so there you go and then i'm gonna have this special sort of time ago component okay so i'm gonna actually install this component right now from react time ago so there's an awesome little library which gives us this five hours ago based on the time stamp it's called react time ago so it's called time ago like so i don't know why i did that right we just have to install this right so basically what you want to do is go ahead and install this react time ago dependency so i'll show you how we do that we go over to our code command j pull it in full screen yarn add react time ago bam thank you ronel i appreciate you dude almost a 1.1 k like smash the thumbs up button you guys are awesome right so it looks good so far we have the react timer go inside right so let me go ahead and import that in right now from into our component and you can see we get this error now you might get this every now and then where it's basically saying you need to install type definitions when this happens you do the following you say yarn dev and then you add in the types what this does is it only adds the types for the developer defense which means in the production build you don't include the unnecessary jargon okay thank you mohit i appreciate you dude almost at 1.1 k likes let's go guys sick all right so in this case time ago we've now got this okay heading back down to the component we've got post.username so at this point what i'm going to do now is i've got posted by username and i'm going to do time ago and then i pass in the date and the date here is going to be post dot created up oops created that and then you've got the time ago okay so now you see that two hours ago 57 minutes ago 37 oh nice okay sick awesome stuff all right so this is looking good and now we can go ahead and actually style that out a little bit better so the header itself should be a flexbox it should be um items that should be center and we're going to say space between the x components of two okay looking better the p tag itself is going to have text which is extra small extra small and then we're going to go ahead and say the text should be gray 400 text gray 400 hit save bam okay looking good the span around the topic should be font bold it should be text black and when you hover over it i want to have a link effect so i want to say text should be blue 400 when you hover and i want to underline it when i hover over it and i'll show you what i mean by this bam so now when i hover over this bit you see how we get this beautiful looking effect okay looking sweet looking sweet all right so at this point body um headers done body let's add a div all right so the div this one is going to be a padding y so class name adding y of four um we've got h2 and we've got a p tag the h2 is basically going to have the following inside it's going to say post.title underneath here it's going to say post look how it just comes together honestly it's crazy this is not saying this is when you got the back itself it's so cool all right here we're going to say text is extra large i will have a water break in this expense semi semibone and then p tag class name is going to say margin top of two to separate itself text small font should be like all right say um just like that all right see how we're getting there pretty damn a good progress right now so let me see where i'm at yeah okay well it's slowly getting there guys we are slowly slowly getting there this is looking awesome cracking the new bottle of water right now [Music] oh my god we're doing good progress this is crazy all right hands are getting sweaty all right let's keep going smash the like button if you're enjoying this right now make sure you subscribe we are literally absolutely dominating this session crazy crazy stuff image next the image here where it's going to be an image this reason why this one is an image because i can't trust the domain that it essentially comes from because we're accepting dynamic that's why i'm not doing the image tag here by the way so post or image and then here we're going to just say width is four so let's do class name is width of four and right now i don't think we're actually pulling in any images i don't believe so yeah so we don't actually have any images right now so what i could do to force this to see if there is an image change is inside of i could sign in with github that's fine oh i could tell you what i could just add in video afterwards i'll add it in afterwards um let's do reddit clone i'm going to add an image in i'm going to force an image in so let's go ahead and copy this image address for testing i'm going to go to my table where they are i'm gonna go to my post for example is next.js worth learning um so post is next year it's worth learning there we go here image and i'm gonna pop in an image like so okay saving done for refresh let's just double check that it came through okay oh nice there it is awesome stuff all right so hey there we go okay we are not actually ordering it right now so we need to fix that afterwards but the image comes in so that's a good way of testing the final thing the footer of this section is basically going to go ahead and we've just got a bunch of a repeating um sort of icon contest so what i want you to do is understand what i'm about to do then i'm going to repeat it okay so i'm going to go ahead and firstly set up the div so it's going to be class name it's going to be flex space x of 4 and then we're going to go and say text should be gray of 400 awesome stuff all right 400 good stuff and then we're going to go ahead and say div and this is going to go ahead and have the chat icon with the comments okay chat comments boom and this is going to say post.comments.length that's basically how we get the number zero now for this div i'm going to say class name is flex actually what we're going to do is create a custom one called post buttons so i'm going to go ahead into globals create this one so globals post buttons is going to be one i'm going to add here so post buttons at apply and then what we're going to do here is say it's flex items should be in the center space between the x components of one text should be small so text should be small font should be semi-bold there we go hitting the good stuff p2 make it a bit bigger when i hover the background should be gray of 100 the cursor i want to be a pointer and i want to be around it on the edges of small okay awesome stuff hit save there we go now when you see i hover over it i get these nice beautiful rounded corners as well okay and this next thing that we can do guys is go ahead and basically copy this but we're placing out the essentially replacing out the um icons so i've got to copy that out with the exception of gift icon share icon bookmark and dot horizontal okay so this is looking pretty good now now what i want to do is for the award share and save i want him to be pretty much see what i've done here i've said it's hidden on the phone but only on the small screens should it come in so the text so on the big screen you see how it says the full text so only after you hit the small screen and above should it show the text before that is hidden that allows us to keep the responsive nature okay so looking pretty good at this point right amazing amazing stuff luke says did you get a blockchain no dude i just i'm just building a hell of a lot of stuff thank you would be nice there we go all right so we've got the body um so now that's looking pretty good all right pretty pretty nice all right so at this point we can now i think what we just have to address is the spacing between the children so that would tend to be inside of the feed where we would pretend to be naturally rendering them out so what you can do here is go ahead and say the margin top should be five push it away from the top and then space between all the components underneath there should be four just like that wow incredible actually amazing look at that we've got the ui looking bomb everything's looking good great stuff okay really really good stuff okay so at this point what i want to do is when i actually create a post right what it's not doing is it's not going to refetch the information so if i did something like test test in the test subreddit and i created a post it will create that post but you see how nothing's updated there so there's a special thing you can do which will basically force a refresh okay so i'll show you how to we can do that right so if we go to our postbox component what we can do is we can actually go ahead and make a refetch come in okay so at this point i'm now going to go ahead and say the following so where we do the add post here's where the magic happens you can pass in a special thing inside of the used mutation hook and what we basically do is we say refetch oops refetch queries and what this does guys is it passes in a array okay now what you can do here is basically remember how on the feed i'm doing get all posts so what i'm basically going to say is refresh the get all posts and because we're using this special hook right all you need to do is the second argument is post in the actual query name as well okay so query name as well so now you can see it's going to refresh get all posts whenever we do an ad post and basically because we're using hooks it knows that you're using it over here so it's going to trigger a refresh over there as well so let's give this a try okay so i'm going to go ahead and firstly so you see test is down there so let's go ahead and say firstly i want to change that as well so let's quickly make it so that it orders but what i want to do as well is when it does the fetch i need it to order as wide i would like it to be ordering um so we did actually we've actually got get post list so what i'm gonna do here is inside a post rest sql where i've got get post get post list right now i'm just using the db query what i'm actually going to do guys i'm going to replace this with my own query right so here i'm going to say i want to replace this with my own query i'm going to use a cool little kind of you know join here so joins our relational database stuff i'm going to say select all from so i'm actually going to pop it in and i'll show you guys what basically what i'm saying so i'm going to pop this in and you can see now it says select all and basically the post id so select every field and then the make sure the post id is retained as the id from post id what i'm doing is i'm basically connecting in the subreddit right so you could do this or you could actually just order it to be fair you can actually just order it um because we actually got the additional connector already there okay so we don't actually even need to do that yeah we've got to materialize this so we can actually just do this right so what i can actually do now is go ahead and say select all as we go select all from the post order file order by post creator that descending okay so now if i do my refresh let's see if it worked um there we go no so i haven't got my order by it hasn't refreshed that's why okay there we go let's go ahead and do it and there you go see how the new ones come to the top now because we're doing order by so you see the order by post created at descending that's basically where we do it so now i'm going to show you how all of this works so i'm going to say this is a test boom it refreshed and i'm basically going to do it inside the test subreddit right so create post wait for it hey look at that sick that is so cool see how it refreshed because it did a force fetch on the other one so 1.1 k likes just at the point of time when it was needed oh that is clutch that is sick all right this is amazing guys so we have this up and running the next thing i want to do is have it so that you can click into the the actual subreddit to go into the subreddit page so i'm going to go ahead and do that now so we've got this up and running and i will also even have this top community section over here as well so we're going to have this firstly all right and then we basically got this subreddit page and we're also gonna have the commenting page with the loadout right so we've got a lot of stuff and we've also got the incrementing and decrementing logic as well okay so lots of stuff to come but don't worry we got this okay so i'm gonna go ahead and make it so when i click into this um it's going to basically go ahead and pull me into that page so firstly the thing that we need to understand is in next.js we have page rooting based on this right so i'm going to basically create a structure here where we're going to have a page root called subreddit okay so inside of the page folder click index click new folder at this level we're going to click subreddit and here you can create something called a dynamic wild card basically where you can basically have topic dot tsx and this will mean that imagine you had a url like forward slash so www blah blah forward slash subreddit forward slash next js this will basically support that and then this is the topic so you can use that variable in your code okay rfce let's go ahead and do that and this is basically going to be known as the subreddit page okay so this one is going to be known as subreddit page okay so at this point in the subreddit page i want to do a couple of cool things right so firstly i need to get that query parameter out of the url so what i do is i basically go ahead and say get me the query from uh use router from next router and what we can do here is we can actually pull out the params um so i believe it no it's the topic sorry so the topic whatever the name of that is so in this case topic so in this case it's topic okay so that that is crazy right it's actually incredible how many likes you've got someone said you should build this from a pub fam i know right we can actually do this right so now at this point i'm gonna have a div inside here i'm gonna start building out so first thing is i'm gonna have another div i'm gonna have an avatar inside of here this avatar is basically gonna go ahead and do this the seed in this case will be the seed for the avatar will be the post okay so it's gonna be another topic sorry so topic and it's gonna complain because seed is basically topic could be a one of three values so we just say cast it to a string and then we're gonna say this is also a large image okay oops oops oops what's going on arch image yeah um and now what i wanted to show you is if i go to forward slash subreddit forward slash next let's just do four slash test because we already have something up there now you should see bam we're on this bridge okay so pretty cool now over here what we're going to do uh then we're definitely going to use the proper platform there so it's like i know it would be cool you know i'm actually tempted to do it um so we've got that div now we've got a div under here so we're going to say we have a h1 inside of this one called welcome to the r forward slash topic subreddit hit save boom and then we're going to go ahead and have a p tag under the h1 which is going to go ahead and say uh our topic this is basically like the ur ui part okay so something like this r forward slash topic this is how it's all rendered on on the reddit side okay cool stuff that's good so at this point i mean it doesn't look good we need to make it look good so the surrounding div i'm going to go ahead and give this a class name so div i'm going to go ahead and say cast name and here we're going to go ahead and say that the jsx is going to be a height of 24 i don't know why i've done that let's find bg red of 400 and a padding of eight okay cool you see what we're doing here we're basically making this screen and then what i want to do is i'm doing a i'm going to do a couple of tricks here to make it like look kind of cool i'm going to do a minus margin x of 8 margin top of 10 and background of a white okay so trust me just bear with me it will look good i promise you all right so here we're going to say mx auto flexbox max width is a 5xl items should be central space between the x components of four and padding on the bottom of three okay and then that's actually not what i wanted to do um i made a mistake this is actually in the wrong div so firstly my avatar so i've got the top one i've got my next one um and then i've got another one i've got another one okay so oops i made a mistake so this is it should be wrapped in a div this should be minus margin top five there we go awesome stuff that was it no stress um this ph1 is gonna have a padding on the y axis of two and we're gonna go ahead and start out the h1 there so we're going to go ahead and say this one is text 3xl uh font is a semi bone genki says i'm studying your skill switch course we'll be there more content in the future yes bro 100 i'm literally in the process of dropping more content so text assam text gray as you can imagine i'm trying to pump out content like no tomorrow so i'm trying to do a lot bro for you so at this point we've got this looking kind of cool but we need to actually put in the this is wrong this should be around the entire div there we go yeah i just shifted it around so there we go that's our structure so if you got confused there it should be that level three levels in then you've got this div then you've got this div there you go okay and now it's that that's a lot better yep that's a lot better okay so welcome to the test subreddit awesome stuff and then underneath all of this we're going to go ahead and have a div and this div is going to go ahead and have the post box postbox and it's going to have the feed inside of it and we're going to customize these and i'll show you how we're going to customize these shortly so firstly i want to just prove a point that it will work in the way that we expected it to so you see it actually loads out quite nicely um the only thing that i have messed up here is i didn't actually put the styling over here so class name mx auto that's because we're going to apply a max width of 5xl margin top of five and padding bottom of ten so when you scroll down you've got some room but check this out yeah so right now this subreddit is actually pulling in everything it's pulling in all of the uh the posts right but already look i mean like it looks damn good right it actually looks very good already right so this is already looking kind of clean right so you see here looking very nice here we just need to add a bit of spacing towards our post um margin top of this this this max width planning bottom of 10. um there we go margin top 10 nx 8 okay so i think what made a little mistake on here is also a case of this so margin top let's give it a bit more this is not enough that's fine all right we can mess around with this afterwards okay so at this point what i want to do is oh okay so it's actually just because of my icons a little bit bigger than i thought all right so i've made a mistake here somewhere on my top bit but that's fine we can fix it afterwards that's why it's slightly touching in there just that's why i don't i don't i don't like the look of it it's bugging me i can fix that anyway so afterwards um it's still sticking it looks kind of cool i want it neater so if you start typing in you can still create a post okay anyway i'm getting off topic so this right now i needed to only show the subreddit stuff right but you see it was awesome here and i also want to have this subreddit for not up here if we're already in the subreddit so i'm going to show you how we can crack this problem now so first thing you want to do is we're going to basically upgrade our post box and upgrade our topic so we're going to upgrade the post box to pass in a subreddit prop this is going to be a topic as a string casted and then we're going to go ahead and upgrade it so our post box can take this prop so what we're essentially going to do now is we're going to go ahead and say that this accepts props subreddit we need to define what the props are so here i can go up and say type props equals uh like so subreddit string um and it's also going to be an optional value it doesn't have to be there but it's not bug it's a feature yeah exactly that's what i yeah say a bug is a feature all right so at this point looking kind of cool um now for the subreddit we need to basically go through our code and basically essentially where i was checking previously for to check if the subreddit already existed instead now i'm going to say check if we pass the subreddit in already and then what i'm also going to do is i'm going to go ahead and say the following so i'm going to conditionally check on that so it's going to prioritize my part prop that i pass in first over the other one and then what i need to do is i need to go ahead and where i've got my placeholder i'm going to update that so this was actually jay's idea i'd done it last second and it was a very nice addition so thank jay for that all right so here we've got a session and then i'm going to say if you passed in a subreddit then i'm also going to go ahead and say the following i'm going to say it should be um create create a post in r dash subreddit subreddit there we go and then i'm also going to go ahead and hide this subreddit field if you passed it in so this one right here we're basically going to go ahead and say it should be hidden so only if there is no subreddit prop should you render in this all right so this one here so cut up and bam okay so now what i've done is i've passed in the subreddit and that's literally going to be auto filling in some degree to this bit here so let's see if that actually worked i don't think it did for a second so okay so we broke something so subreddit's not being passed in so first debugging step is to go ahead and double check if i'm actually doing what i said i thought i was doing so console.log subreddit see if we pass it in so this is a live debug right now so i'm going to go and see undefined okay so undefined means we're not passing in the subreddit hence why it's not working okay so that's our big problem here so wherever we're rendering this in so it's gonna be inside of our topic page here i didn't save the file that's the problem hit save now you can see it actually gets that value so if we see here test came in inside a post box so we can see that that is now here okay so now what we should be able to see is that if i post here it will be posting only to the subreddit that we're actually inside of okay so in this case if i go ahead and say this is a test popper farm and i hit create post now what you'll see is this is a test popper fan got posted in the subreddit for test awesome stuff all right really really nice okay um amazing stuff oh universe courses today the project is react tell me typescript and for the first time touchdown graphql supervision so you guys say it's a developer and a youtuber it doesn't get it doesn't exist channel veterans thank you so much brother that's huge guys we're almost breaking 1.2 000 likes oh my god all right keep going guys we're getting there okay so at this point we're doing this we now need to upgrade the feed okay so we're moving at a very good speed the feed now also has to accept something okay so at this point if i go to my topic um this page and i'm going to go ahead and upgrade it so i can say passing a topic okay now the topic will get casted as a string value or some stuff now we obviously need to upgrade the feed so go into the feed and we now need to basically introduce props okay so the type props we're gonna have a conditional topic this is gonna have the topic which gets pulled in like so we cast it to props like this now what we do is i'm gonna basically for my query here i'm gonna say if there is no topic then i want you to use the query to get all the posts otherwise i want you to use the query to go ahead and get all posts by topic which i haven't actually created yet so i need to go here i'm going to do get all post by topic now do we have a postgres sql uh command that does this let's have a look okay so if i go ahead and check i need to basically go ahead and create the following thing so i don't think i have it right now we haven't created yet okay so essentially what i'm doing here is i'm going to go ahead and create a post list by topic so what we're doing is we're going to do a nice little kind of um get post list by topic okay and what we're doing here guys is i'm going to pass in a topic which returns type post and this is actually going to be the following right so i'll explain this as i pull it out on the screen now so we're basically making a query and what we're doing is select all and prioritize the post id as the id from post this is where magic happens this is where essentially not magic but it's where that relationship between foreign key and primary key happens we're saying join the two tables where the primary key and foreign key match so subreddit on subreddit id is equal to the post dot subreddit so this is basically saying join this primary key so the subreddit.id to the post dot foreign key so post or subreddit id where and then we're basically querying for where the subreddit topic is equal to the one that i passed in okay so this is basically gonna say like it's gonna query for the next js or forward slash test or not and then order those things accordingly so now we've done this and created this we now need to create a query to correspond with it so at this point we're going to go ahead and do very similar to what we did for get all posts but essentially the same call except we're calling a slightly different thing here so if you pause here you'll see it's get all post by topic and then we're basically doing the same thing passing it but this time we're passing in a topic so very similar but we're passing in a topic and then we call that special function that we just kind of went ahead and created and we're basically requesting the same information i'm going to make it more neat though i like how i returned it here right so basically returning the same information okay so in this case now we've got this get all post by topic which we can now actually go ahead and do some cool stuff from so let's see this we can go ahead and pull this in import the graph qr query and then if i go back into my feed what's really cool now guys is i need to go ahead and pass in the variable here as well remember don't forget that the variables in this case is the topic right so topic is actually going to be the topic that we passed in okay so why is this freaking out um it's because we've got use query um okay use query let's see variables topic it just wasn't fast enough with us okay so we do that now you can see basically you're saying if you didn't pass in a topic just get all the posts if you passed in a topic use that in the special query now the only different thing that we have to do here is prepare our posts so basically remember the data comes back based on the query that you've done hence why the original one was get all posts to get post list so here what we do is we say if there is no topic then i want you to get data from the object um which is basically going to say uh get all get post lists so it should be getting this one otherwise the data will not be located there will be located in the other query which is called get post list by topic now with that said we are literally already done with that bit so i swear to god this will work right look at look how incredible this is look at that now inside of this subreddit it's only showing the test stuff and if i do next chase it's only showing next year stuff and if i do react js it's only showing react.js awesome nice okay really good stuff now i'm gonna make this even better guys so what i want to do now is firstly that is bugging me so much that header right so i want to go ahead and fix that quickly so um where is it going um i can fix it in a second let's go to the header uh where i have my image right now where the heck is that thing where is that uh sticky top flex items center yeah there you go that's nicer fresh okay that's a good clean okay so now what i want to do is i want to add some um some links around the rest of the app okay so basically i want to add a few links so you can essentially click through to a subreddit and so forth right so the first one should be if you click on the top left it takes you back home okay so let's go ahead and fix that bit so i'm going to introduce the next link component from the next now this will introduce an issue about ford ref i'm not going to teach you how to fix that one today but it's actually very easy you just introduce the forward ref to any component underneath the link and that will actually fix it so in case you see that error that's why um but it's very easy to do okay so around this image now i want to basically introduce the link and i'm basically wrapping and what's really good about the next js link guys is if it's seen on the page next.js will pre-fetch that page if it sees it so essentially it's pre-fetched that page so it's actually really fast at loading it so notice how it took me back to the page the home page so that's really cool next thing i want to do is wrap this one so it'll take me to the subreddit okay so at this point oh nice awesome stuff jade screenshot that i think um oh no it's just basically saying it's awesome right so i'm gonna basically when i click on this it's gonna go ahead and take me to the subreddit okay so at this point i'm going to go to my post and you see how everything's like componentized it's so much cleaner right so i go to post and what i do now is i want the whole post to essentially be a clickable a link i kid you not i want the whole post right so i want to basically make this whole post a link so what we do here is i basically i'm going to be wrapping the entire thing right so i'm going to say link oops link and then i cut this out i go right to the end i'm going to wrap it in the closing div and then here i'll say href equals and i want this b to be a ref towards four backslash post forward slash post id so actually that's actually if you click on the post itself so we haven't actually built that yet but i'm going to introduce that link at the moment anyway um but i actually want a nested link inside further so underneath the avatar if you clicked on remember that span here where it shows the topic in bowed i'm basically going to introduce a link here so i'm going to say link and then this one is going to have this right so basically if you were to click that link then it will go ahead and take you into forward slash subreddit so sub reddit forward slash and it's going to be post dot subreddit zero because remember it came back as an array dot topic and now this will take you to through to the subreddit and obviously we're doing the hover on the line so it looks like a link okay so we messed up um okay multiple children will pass the link with a trap subreddit test but only one child is supported okay so where did we screw up um let's have a look so um more than one child so let's have a look it's not this one it's actually gonna be this one i believe yeah so it's actually this one so what i did wrong here was that is actually not supposed to be there yeah believe it or not that counted as a second child so be very careful guys so what you want to do is if you're on that space you can throw it in there if you really want it yeah but do not include that because it will compete it would be very hard bug to spot i just know that based on experience right so now if i was to click into these look react.js boom run to the react.js thing click this oh nice and we haven't actually got the post 7 page to complete yet but now if i was to go ahead and click on like on xjs boom we get the subreddit for next year amazing stuff all right amazing amazing amazing stuff isabella you're giving me massive nostalgia so much of a software channel all of this paperwork about bugs mrs stuff oh no don't worry about it you can jump back into it any point right so this is looking amazing right now we've got subreddits implemented awesome awesome stuff quick water break right now thank you jay for reminding me [Music] all right guys almost a 1.2 k likes killing it let's go same t looking beautiful thank you dude i don't know what to say to that but thank you um okay so posted at this point looking good we've got this looks quite nice and now what i want to do is that's all good i mean it's frustrating me what the heck is is bulking that out a little bit i mean let's just go fix it right because i'm not gonna sleep if i don't fix that so the header is basically being bogged out by something um i don't know what it is and it's bugging me um it's only on the larger page that it does it so um i think i've got something incorrect with my i don't want to spend too long on that it's a very small little buggy thing oh you know it's great it's going to be in the code in the repo so it's fine basically that header is just sticking out a little bit which is causing that little overlap but it's fine i can live with it if you really want to fix it quickly you can go to your sticky component down here and just change this to be sticky like 20 if you want there you go that's actually fixed them nicely it just kind of reduces the drop down that's all right we can do that all right got our test there we go nice stuff okay good stuff all right so the subreddit's done now we're gonna do the actual page itself so post you see how it's four or four pages not gonna be found but that's fine um we're gonna go ahead and actually do that and then we've got the upvote logic we've got the comment logic um we have a few disabled logic things for example if i sign out if i sign out right now you see how i sign in to post still works in that same way amazing right but everything is still working in the way that we wanted it to so let's quickly log in oh yeah time starts the video yes we will okay okay so at this point smash the thumbs up button guys still 300 people are watching what the hell crazy that is amazing guys thank you all right so at this point let's go ahead and keep the momentum up so i want to have it so when i click into a post right we're going to load that page up and then we can go ahead and proceed to do the rest of it so if i go ahead and click into a post we're gonna have the photo structure like so go to index add in the forward slash post page which is a folder then it's gonna essentially be um post id so post id dot t s x okay now inside of here what we're going to do is basically have our rfce so rfce and we're going to call this one the post page okay post page okay awesome stuff and then inside of here now we're going to need a few things i'm going to need the router so we might as well get in now we're going to say use router okay cool pull it in so forth um we are going to be using form data in here as well um and we are going to be having an ad comment functions as well right so i'm going to go ahead and firstly do the demonstration so um at this point we do get a post from we're gonna have to do the following so i need to basically get a post by post id at this point so you could even implement server side rendering here but i'm going to show you the first way there's enough builds on my channel that show you how to do that um so we're going to firstly do get post by id so i'm going to basically make a query here called get post by post id and it's going to look something like this get post by post id and we basically need to go ahead and do this so this essentially is the same body that we're basically fetching in except i just need to make a request in our back end for this get post list by post id okay and this is going to take a post id and then we're going to export it okay so i need to create this in our postgres sql graph qr docs and we don't have that at the moment okay so over here now what i'm going to do is i'm going to go ahead and find so basically this is very simple thing we're going to do here we're just going to go ahead and make a difference instead of close by get post by post id query and this is basically going to take a post id which is of type id and it's not nullable it's going to return a single post okay and what i want to do here is i'm basically going to say select all from where the following okay the db query select all and prioritize the post id all right so we don't actually need that as well we actually need that we can get rid of that we can say select all from post where the post id is equal to one okay so this way what we're doing is essentially passing in a post id and it's just filtering out based on whatever one that we want okay so at this point we've got this access to our graphql schema we can now use this on the front end to make the call okay so we're gonna go ahead somebody said are you gonna add testing dude like it's such a big build as it is i'm moving at the speed of light to get this done um post id down here but it's a good suggestion but not today no um so at this point what we're gonna do is we're gonna go ahead and say const um use mute no it's not yeah use query sorry use query um no sorry advanced object equals use query and then we're gonna pass in get post by post id and we're going to import our there we go get rid of this what the heck is that and basically i pass in variable here so i pass in the following i say variables and the variable here is going to be post underscore id and it's going to be router.query.postid.post underscore there we go that post id okay cool hit save now for this bit it's going to go ahead and say the following it's going to say data now this does give you three things back so it gives you loading error and data so feel free to use them but i'm not going to use those today i'm just going to use the data okay and what i'm going to be focusing on guys is essentially getting the post out of this so here before we do the return i'm going to say cons post cast it to a type of post equals the data optional chain in case it's not there and remember the query name is because it's going to be inside of that so here post that's how i get access to the post object okay now i'm going to render out a post on the screen and i'm going to pass in the post like so okay and here i can simply go ahead and import in and it takes that and it handles it so if i was to click into this now let's see what happens if i go into this test there we go cannot reproperty and undefined reading post id okay so post.tsx failed us post.tsx post.id okay so where is this happening link post firstly interesting let's see post dot id so it should have been in there um but let's actually do a optional training there we go because it may not be okay so we're not actually protecting ourselves oh no okay so this is the reason why this happens so right now the fetch is happening on that page so you can either a server-side render here or you can introduce a loader now i want to introduce a lot of just to show you the fact that you can do that so basically the way you can do this is i'm going to introduce this nice loading library from ui ball loaders so jay introduced me to this very cool library so we're going to go ahead and install this right now so loaders ui ball and all you need to do to get this up and running is a yarn ad so let's go ahead and say yarn add ui ball loaders let's go ahead and do this and chuck it in here so let's go ahead and log this in this is a song and a half yarn ad um oops let's change this to yarn add ui ball loaders cool and that's gonna install that and then we need to import the actual thing so i'm gonna use this one called jelly i like that one and essentially what i'm going to do here is i'm going to go ahead and say if there is no post yet which is going to be loading right so i'm going to say if there isn't no post says defensive programming you can actually get rid of this with a server side render that's literally the point of next chess um so you can get rid of that if you want i'm just going to give you options here so div and i'm going to basically say render out the jelly right so this jelly component quite cool and i'm gonna say the size should be 50 50 color should be the reddit color and i've already got the reddit color here okay awesome stuff the reddit color looks good like this all right so this div right now i'm going to quickly style it i'm going to say the class names to flex with the full so it centers across the screen item center justify center as well padding of 10 and the text should be extra large okay cool now let's go ahead and have a look what's going on so you can see it no longer freaks out okay so let's have a look what actually happens so if i was to click on a new post see how it loads and then the image popped in so that's because what's actually happening here is if we go to the topic now it's doing this prefetch before no sorry on the topic if it goes to the post id this one it's doing this prefetch and while it's doing the prefetch post is undefined so basically we're saying while you're undefined load up a loader and then it will pop in okay so you can go ahead and do um what's it called the rest of it i love you asking for testing guys i think i don't think you realize how much coding is happening right now right like to have to make this happen in this amount of time is incredible so i'm just saying that in my own sense right i'm impressed with myself i keep going this long um but yeah okay we will introduce this at some point all right so post page i always listen to you guys so don't worry i got you guys all right so the div that surrounds this now we need to introduce the max width constraint because it looks strange we're going to say mx auto my 7 to push it away from the top and max width of 5 xl hit save now you can see we've got our nice little thing here if i go into the react you see we've got this awesome navigation between all the things loads up the individual now i want this to essentially be the actual thing now so if i click into this we're going to have a comment feature with these nice beautiful comments right and then we've got to do the upvotes and then we are gucci right so that's going rojo makes it say hey let's keep the girl going let's go thank you dude all right so post um here let's go ahead and build out the rest now so we've got div so quite a bit to do here so we've got div um and we've got a p tag and i'm going to basically say comment us so let's just go ahead and start building out i'll say comment as span we're going to basically expand the user so we need the user's logged in state so i need the session to get the users logged in state we basically go ahead and say data and rename it to session because that's more easier tonight so nicer to work with use session go ahead and import this in common as jsx session.user.name or and then i'm basically going to go ahead and see there we go now you can see it's time to pop in um okay now i'm going to do a little trick here i'm going to show you what i did it's kind of a cool little trick it's a little bit hacky but okay it's uh i think it's pretty cool um so text should be small here i'm going to make this one be actually margin top of minus one i'll do that trick after the rounded rounded bottom medium border border on the top of zero order gray of 300 and the background white so essentially what i'm doing is i'm going to go into the existing container and i'm basically going to start up as i need to padding left of 16. so you see how i've done here right i'm essentially kind of going into that one and i've basically rounded off the corners and then what i'm gonna do is i'm gonna say minus margin top of a one so i'm basically to push it up into that old one and then you kind of get this kind of effect where i know it's going to the hover isn't it isn't perfect you can always even get that bit right if you really want to go that far but i'm basically going to do this kind of effect that's what i've basically done here so you can reuse it and it's kind of cool i think it's kind of nice right obviously you can make it even better if you want but times limit right so at this point we've got the p tag that's looking good i'm going to say comment as class name text red 500 is a nice little ui that they have comment as this person and then underneath we've got a form okay now this form is going to have some text area we are going to be using react hook form here um so we've got a big text area and then um i can go ahead and get rid of this and i need this right now okay text area self-enclosed component um we're gonna do some styling around it height of 24 rounded md border border should be gray of 200 uh padding 2 200 not 299 padding 2 um padding left of 4 outline should be none i don't like the outlines and then disabled if i have it disabled for example if you're not logged in i'm going to gray out with a value of 50. awesome all right placeholder james steps is great what's up dude thank you for tuning in right so at this point the placeholder should say we're gonna do some jsx and i'm gonna say if there is a session then it's gonna say what are your thoughts all right we're gonna philosophical on this yeah otherwise it's gonna say please sign in please sign in to comment don't okay so what are your thoughts and if i signed out it would say please sign in to comment you can trust me on that right and then we're going to disable this build if there is no session so that way we're preventing someone from actually and like accidentally or you know they shouldn't be submitting where they shouldn't be doing it all right we're gonna hook up react hook form after i'm gonna do a button underneath saying comment this button is gonna be type submit so type submit type submit and class name do you know what i'm thinking about right now it's literally sushi it's crazy all right bg red i just thought i'd share that uh i can't wait til some sushi p3 uh fond semi bone if you're ever wondering what brain's at there you go text white disabled i'm going to disable this button if the user hasn't entered any input and i'll show you how to do it hit save there you go and what you do is i'm going to use the watch thing on the react hooks right so it's going to make it super cool oh maya's in the house hey hello um so at this point we've got the comments looking ugly it needs to sort out so the form with class name flex flex column and i'm going to do max width of a 5 xl bam and you see it looks way better that way all right now the button should not be touching the top so i need to fix that as well i don't think i've got space in between yeah that's what i forgot um actually i've messed that right up it shouldn't be effects column it should be it should be flex column but we should do space between the y axis of i like this song space y of two there we go uh oh yeah james met maya all right so this point you can see look pretty nice right that's looking pretty good let's hook up the react hook form to this so i'm going to go ahead and pull in react hook form like so and i've got a second example here of how we can pull in our type so remember you need to actually cast it with a type so in this case that is going to be known as the comment field that's what i want to recognize it as and then this little snippet is our helpful snippet that we get from the docs over at used form as in react hook form so in this case we get there red same thing we did before in the previous example except now we're passing over oh god now i pass another form data okay good stuff and um okay nice so we've got this i need to now connect my form up so handle submit we're going to create a little helper function in a second so i will do that in a minute um but yeah so i'm going to show you another way you can do it as well so form here you can actually say on submit equals and or submit and then create a function called onsubmit okay so over here if i create a function called onsubmit so i showed you another way earlier but this is another way you could do as well and then you can create an onsubmit function with a special type called submit handler and that will take your form data so this is just two ways of doing it you can pick whichever way you prefer i prefer this i prefer that actually the first way but there you go you can do it this way right um someone is hungry yeah i know i i swear to god i'm right now my stomach is thinking about sushi right now sushi wow okay um on submit right so at this point we've got the i'm gonna basically have this where we'll post a comment out and what kind of stuff so leave that as post comment here post comment here all right we've connected that up i need to register my input field so in this case bam register and comment pops up because the typescript beautiful we've got type submit so it should be submitted right now so if i was to go into my on submit and console.log the data that's actually the form data right so you just remember that so if i was to go ahead and do af12 and i was to go ahead and say hello world comment there we go okay you get the nice input there is a suit all right so we've got this happening now at this point we need to basically create a inserted comment mutation right so i need to basically go ahead or insert comment mutation so i need to create an add comment mutation so i'm going to go into my mutations oops mutations and we basically need to create a way to add a comment okay so i'll do it the reverse way so we've done it in loads of different orders this way i'll do it here so add a post id username text id similar principle we've keep we've done like over and over again okay um so at this point all right so we've got this j we're pretty good so add comment um let's go ahead and add comment we've got gql my mutation again the name is not that important okay so name is not that important we would take a post id use name text we take this username test we pass it down and we get these values back okay so alex commune what's up dude it was great jumping into the retention today and guys bam we just hit 1200 likes what is happening oh my god jay you're seeing this all right we need to create insert comment over here oh my lord postgres sequel this is big why is it a big stream all right postgres sequel at this point um i need to go to my i need to create an insert comment um this one's actually easy because the geyser steps and made it awesome for this so basically you can use that db query you basically just have to pass in the pram so in this case insert comment you pass in post id username text like we have previously been doing um probably just like smash something i know i need something right i mean i can just blast the music up a little bit all right so in this case we've got uh insert into the comment table the values that you're passing create that id will automatically be generated so that's fine um insert okay cool so at this point now we can use the mutation so i've got the add comment over here i can get rid of this uh we can go back to our code over here and let's add in the mutation so um okay so what's really cool here as well is remember we're doing a fetch here for the actual post rendering so i'm going to show you how we can refetch after we add the comments so that way it'll refresh all of the comments so very cool way of doing it so add comment comes back from our used mutation handler or hook sorry add comment we will pull in then we're going to go ahead and do a refresh query so basically after i've done it all the way that i'm getting the comments at the moment or any of the data for that matter is through this get post so if i ever do any mutation i need to basically refetch the new stuff so i'm going to go ahead and refetch get post by post id i need to then pass in the query name as well so bam here like so okay so now i can use add comment yeah so at this point um it got dark but sunny still delivering thank you so much lucas i appreciate you being here man all right so this point on submit um on submit we've got the notification okay so i'm actually going to do a nice little toast notification here right i'm going to have some uh some say toast dot loading equals i'm going to say posting your comment posting your comment dot dot and i'm gonna wrap uh basically assign this to a notification there we go and then i'm gonna say cons so basically i'm gonna say await add comment remember this is the query we passed in the variables and the variables in this case are coming from a bunch of different places we've got the post id that's going to come from the router so remember when the root so post id comes from up here so rooter.query.um topic you know is it um post id yeah so it's basically whatever we named it here and then we've got username um which is going to be session.user.name and remember we optional change protect ourselves and we've got the text which is basically the data that came in common okay awesome stuff um let's keep going let's go um we don't want that chipmunk name yeah exactly universe has been here before when we've run through that so that's a painful process okay so the best part about this is add comment returned a bunch of data remember so we actually got that data come back now i'm not actually doing anything with that data so i'm not actually going to use it right now um but you can definitely do something with it afterwards right remember it'll come back as insert comment there um so at this point set value i'm going to set the value of my fields to blank afterwards so i'm going to set the value of comment to be back to blank and then i'm basically going to say toast dot success success equals comment successfully slipped out because it's exactly posted uh and then i can dismiss the other one by passing in the id which is in this case the notification bam oh that's a big one all right so this point now i want to show you is if i make this full screen and i do this and i go ahead and actually refresh all right so if i go ahead and show you guys what is inside of the data so inside of here you should be able to see so data dot let's go and see data control log data am this point you should see that we get this right so inside of here we get you know comments are zero at the moment so let's have a look what's going on so in this point i say hello world comment okay so you see a comment was posted a bunch of stuff happened refetching and then we got a comment saying hello world bam comment in awesome awesome stuff all right so yeah no customer my bad guys all right so at this point we've got the one comment and notice how it also refreshed on the ui so we the way we did this is really great okay so now what i can do is render out the post of the comments on our screen okay so let's keep going so we've got the um post now i need to go ahead and cast my post to what we have up here so before the return block i'm going to go ahead and do that i'm going to say cast my post to and this is freaking out because cannot redeclare whatever i don't know i've already done it up here okay my bad so i've already got the post all right so in this case i can go down underneath the form um underneath the div i'm gonna have another div with a horizontal row div with a horizontal row bam and underneath the horizontal row i am gonna have the post comments so post comments conditional rendering in case i or condition optional changing sorry in case i break something in case it's undefined so comment every single comment i want to do parentheses return um div and inside that div remember always provide a key when you're mapping through anything comment.id and then under here i've got a hr i'm gonna have another horizontal row and basically i'm i'm gonna do some cool stuff here underneath right so i'll just do the avatar for now the seed will be the comment username so comment dot username hit save and i've got okay so you can see one comment was made that is me that we got made from so it's actually working in the way i expect so let's do a little class name p y of two okay and then let's actually start this out so we can start seeing things so i'm gonna do the same trick here minus margin five rounded bottom md uh duck says just dropping in say you're a goat sonny i'm back when the stream is over watch it all in one go thank you dude i appreciate you so much all right rounded md so we've got border border dot top zero and i'm gonna say border gray is 300 bg white and padding wire five adding x of 10 all right sweet now look at that so i mean i've got two horizontal lines um wherever i screwed up uh oh yeah so this horizontal line i need to basically start in a slightly different way so firstly i'm going to go ahead and make this a class name oh yeah that's uh leave that one for a second i'll come in and get that one afterwards so underneath this div i'm gonna have the actual bit where the comment is shown so div um p tag span inside there i'm gonna have the commander username underneath the span tag i'm going to have the time ago component with the creator that so is this person said this this time ago right import it from react time ago you can rename that to time ago if you want right so it's easier it's default imports it doesn't matter okay so you can see sunny three minutes ago and then underneath the p tag we can have comment dot text comment dot text um hello world hey look at that stick all right so flex flex column uh okay so we've got this looking okay right now the overall surrounding div should have a key which you've already done it should be relative because i'm going to have some absolute positioning stuff inside items should be center space x between the two i love this song this is six space y uh a five okay and for the avatar div we're gonna have z of 50 because there's going to be a horizontal line which i'm going to basically be slicing through it so i want that to be at the top um the p tag over here on top of this is going to be padding y of two text should be extra small james says four hours of coding you're dope thank you dude i appreciate you man for you watching me so i appreciate that takes great 400. i'm not joking when i said yesterday i was coding for literally like a ridiculous amount of time like 14 hours jay will vouch for me on that one j tell them dude one semi boat text gray i do it for the pop fam i love to see you guys go and learn honestly watching from cameroon what is up the vision thank you so much dude um probably compare it with youtube tour it's completely free it's a normal one save time just for money save money and spend time exactly that's it that's how we move okay so we got the p tag over the comment i'm gonna have this one that's actually gonna be a basic thing over there now this comment right here i think that's how i've done it yeah so i've literally kept it pretty relatively minimal the hr now this is the icing on the cake here right so this one is going to be a absolutely positioned line and what i do here top 10 i'm going to give it a height of 16 and look where this line's just gonna be flying around somewhere right so i'll give it a border and there's a random line there right now look what i've done i've done a little kind of hacky trick here but it's kind of cool instead of zero's put out behind the z50 and bam look at that oh and now if i say yo what's up papa farm comment posting your comment comment successfully posted yo what's up bubba nice you could literally go ahead and uh change this up if you want and basically order it if you wanted i'm not gonna go to that level of detail but basically you see two comments amazing stuff comments are actually done on that note so i can go ahead and show you guys what we've done so far we've got this looking bloody amazing right now you can go ahead click into one it loads it up click into subreddit loads that up the only thing that we haven't done right now is as far as i'm aware is upvotes and downvotes which we will do right now but otherwise jay i think we are looking amazing guys um coding with mandy thank you so much fan from yoblogger.com i appreciate it a little plug in it right thank you though okay you guys are incredible 1.3k likes i wonder if we can hear but otherwise we're now going to go ahead and to increase the eye so it's super dark in there we're now going to go ahead and um we're now going to go ahead let me quickly just update my uh my camera one second so it's a little bit brighter and then i'm gonna go ahead and do the upvote down bow then we're gonna deploy that's it gucci as that right um okay look at that you can see me a little bit lighter now look at that magic wow look at that kind of changes everything all right so i think that's pretty good okay nice okay so at this point now you should be able to see my face a little bit easier yeah so we've got this looking pretty nice um smash the thumbs up button if you think it looks damn good or right now right um hide the comment box when the post is a page is loaded oh yes you're right dude you're actually right that's that's a very good point um i don't think i did that here did i um i didn't do that here where let's click into a random one oh no so i didn't actually hide it at the moment but yeah you can it's very simple to do that right you could literally make it so if it's loading you can do that and so forth um it's your call it's your call you can do that if you want um at this point i'm gonna probably leave it i think um yeah i think it's all right to be fair but you can you can definitely add in i see your point i see your point you could definitely add in that kind of i kind of like the way it snaps in but yeah you do what you want that's fine okay so at this point um we're gonna now do the upvote down below okay so upvote downvote is inside of the post component so let's keep the momentum strong post okay so at this point when we click on arrow up icon arrow down icon i want to go ahead and create thank you dude someone said i'm proud to be a member of the papa fam i appreciate that so we're gonna go ahead and create a um if there is no poster okay so we're now gonna have the uh a function called upvote right now upvote is gonna be a pretty you gotta bear with me on this one upload's gonna be an asynchronous function it's gonna take an is up vote now the way i've basically planned this one is essentially we're going to assume that it's going to be kind of like is up vote is going to be true which means you voted up if it's undefined it means you haven't voted if it's false it means it's down okay so that's how we're going to basically do this one and then we're going to do a bunch of cool stuff to figure out how if you voted or not so data i need to get the session for the users logged in so use a session awesome stuff okay and now i'm going to go ahead and do the following i'm going to say if there is no session firstly i want to say to the user whoa well you need to log in before you can vote okay so anyways we'll do some defensive programming here so i'm gonna basically like kick the user out and say no no no you cannot vote unless you're signed in okay so if they try and click this and they're not signed in it's gonna go ahead and just say like the toaster is gonna pop up okay now we're gonna attach the upvote to the buttons so here arrow up we're going to say on click of this one it's going to be an arrow which says oops arrow which says on click on upvote sorry upvote i'm gonna pass in true so imagine you voted up and then here i'm gonna have on click um upvote uh false which is basically as if you voted down okay um yes tube says you're doing a great job thank you so much um i really like the animation early looks lively yeah i know the same right um vision says awesome when are we going for the next reaction native app soon soon i'm just kind of working on a few cool things so we got this looking pretty nice now um oh this is a good gym yeah so now we've got okay if there's no okay so cool so at this point i'm going to keep a piece of state as well okay now this piece of state is going to be used in a few different ways i'm going to show you as we kind of progress okay so what i now need to do is we need to create a so i'm going to import that so we've got basically a minimal piece of state which in the beginning is undefined okay so this is literally going to be undefined in the beginning and we're going to use that as an example right so if i don't sort of give this a value vote is now billion or undefined that's fine um so at this point i want to essentially go ahead and do the following so i'm trying to think about how we can tackle this one so we need to have the add vote we need basically yeah we need a mutation for adding a vote so basically we need the ability to add more votes so i'm going to go ahead and add the mutation first for adding a vote so essentially it's going to look something like this we've done it a few times now so i'm not going to run through it all the time so we've got this is our syntax for the mutation insert vote is what we need to create inside the postgres so in our schema sorry so at this point i'm going to go ahead and this is using the nice very easy syntax of the the db query from the guys over at step zen so insert vote post id username upvote awesome stuff so now i can pass this in it will basically just do a simple uh simple insight into the vote table okay um you could also update it so if you already voted it would update your existing vote but i've just done it in a sort of sequential list okay so in this case we've got that now i'm also while i'm here i'm gonna do a query to go ahead and actually get the votes by post id okay so that's gonna help me out a little bit so um get a vote by post id so queries i'm gonna go to my queries i'm gonna add another one for that as well so i'm gonna just add it to the top get those by post id we need to create this endpoint get votes by post id so post let's go ahead and do that now this one is essentially gonna look something like we actually created this one earlier if you remember we used it in the materializer um so we can actually i mean we could actually just fetch the other thing but we're gonna use anyway um get votes by post id um so at this point i'm gonna i've already got this created so we can already start consuming the two things okay so we've got our post we've got the mutation we've got everything done so now what i'm gonna do is start preparing things so firstly we're gonna do get all votes by post id so we're gonna use a query so const data loading equals use query and i'm going to pass in get or oops get get all votes by post id we pass in the variables and in this case the post id so post underscore id is post underscore id and we're going to i'm sorry optional training to make sure things don't go wrong ricardo what is up dude thank you so much um this is looking good and then we're going to go ahead and say um i need to prepare my mutation as well for adding a vote so this one is we add vote equals use mutation uh add vote we're gonna basically use the thing that we just prepared add vote and this one is gonna have a refetch command so it's basically gonna cause the above one to to refetch right so get into basically passing get all votes by post id so when we do a mutation it will refetch this we also need to pass in the query name there we go so now we can basically make a vote we can actually go ahead and get the vote and i need to also check now so i'm going to make a really handy little use effect use effect is going to run every time that the votes change and this is basically update our piece of state right so this use effect if you don't know what a user effect is we have an awesome video on the channel jay is going to link it somewhere around here afterwards thank you jay and then we're going to go ahead and do data which is our dependency and that will explain how you use effect at this point what i'm going to do is i'm going to go ahead and say const votes cast it to the vote type equals data and we're going to go ahead and essentially get it out of this fetch so where is it going data dot get votes by post id this is how it will come back from here so now what we're doing is we're getting the votes and then we're going to go ahead and say we need to basically make a sort okay so you can do this in a few ways that's why i've added a little kind of note here but what we're going to do is we're essentially going to do a find function which is the near 6 find function okay so i'm going to go and say votes dot find and basically what i'm doing is i'm looping through all the votes and i'm saying the precedent of a vote.username is equivalent to the person who is signed in dot user.name okay so if you if your name is found then i want to go ahead and access your vote okay so it's a safe way of accessing the vote that's why the option of chaining and if we found a vote yeah this will either be basically true false and the reason why we can rely on this one is because we actually set it to query based on the latest value inside of here so when we did this we did order by descending so your latest vote would have been the first to return back otherwise you can do it right you'd have to you'd have to do another bit so then we're going to set the vote to the vote that came back okay which is gonna be the upvote so it's a boolean so it'll be true false or undefined okay so at this point now we can see if that person has voted or not okay so the next thing we just need to do is basically an issue issue a vote okay so at this point up though if you have already so i'm gonna do a little a few things here yeah we're gonna have some defensive programming if you've already voted okay if you've already voted and oops i'm sorry and you're about to try and do an upvote so it is up though then we're gonna basically stop you we're gonna return okay if you've already vote so if your vote was false not fo c posie will check if i just did if not false this will count undefined i don't want that i want to explicitly say if it's false right it doesn't count if it's not that yeah so that's why there's three equivalents and if it's if you're about to try and up vote down so basically you shouldn't be able to vote down like three times vote up you should do it to do it once so we're going to block you there as well so you see we're blocking you from entering at this point and then otherwise it's basically going to say yeah you are voting so we're going to console.log and then i'm going to go ahead and actually perform the vote okay so here i'll say await add a vote and what i'm doing here is i'm passing in the variables and the new vote variables will be post id so post underscore id would be post dot id then we've got the username which is session.user.name and then we've got the upvote is going to be is up vote okay so at this point what is happening right so crazy crazy stuff what is about to happen now is this vote will happen which means that the mutation goes through the refetch queries will happen as it's included here which means it will refetch this query which means that data will change and as the data is a dependency inside of a use effect this code will re-trigger and it will set the vote in our local state to be of true or false that means we can conditionally use that vote to render what we see on the ui okay i know it sounds crazy it is and then i'm gonna have some logic to show you the actual number here insane right so at this point what we're now gonna do is um i'm gonna go ahead and okay that's cool what i'm now going to do is i'm going to say this right here so should be firstly um jsx so let's do the following so i'm going to make this into jsx but that flow was incredi incredible right so what i just explained there that's how like if you know your fundamentals well then you can see what i just did there and how we applied use effects in the correct way right um now here thank you so much sanjay awesome stuff um alex says the dude is spending his hours here with us teaching us incredible no break like a rocket sky through spread but thank you so much dude i appreciate the support smash the thumbs up button is all i ask guys and subscribe if you haven't already all right so let's see coding with mandy oh yes um text red is going to be 400 so if you've already uh done it text 400 and then here i'm also going to do the same thing um here back to expect x remind me guys i also need to do the um what's it called the uh front screen all right so here and remember here i'm not doing foci i'm doing vote is false because there's a difference between that and if you haven't voted all right text blue is going to be 400. okay so at this point oh i did upvote very okay i mean it's fine we can keep it as that it's all right i just realized now i don't upvote red and down vote blue okay i mean you probably want to change that to the opposite but it's all right it is wise all right so at this point at least you know mine different from reddit so if i click this now um it should say okay so oh okay sql scan error converting driver value from boolean okay oh that's nasty okay let's see what happens here now so we need to debug a bit i think is upvote so let's have a look what's going on here okay so my database is being a bit weird so let's go ahead and save my postgres postgres sql db so it's deploying [Music] okay so at this point we've got a little bit of an error going on so i'm just going to go ahead and cut my server steps and start and let's see what's happening i just want to double check as well my database all right so looks like my either my internet is being slow or i've got a weird connection going on which steps in let's have a look okay so connecting to reddit clone let's see our table let's see what is going on off cure so it's deployed at this okay so it is deployed we do have our comments we do have this we have our vote okay and let's just maybe do a refresh and see what's happening so right now we've got a bit of a funky error it says on kind of destructure eligible url plans or something something postbox is freaking out feeds freaking out so we just changed our post right so something is going wrong here so what we can do is let's debug let's check out the error here firstly now let's see what's happening so console.log error is there an error here it's coming in i hope there is because i don't know what's going on okay so that's fine that one we can leave that for now okay so feed let's see um [Music] comes post okay so console.log posts okay undefined posts interesting all right so let's have a look what's happening post posts okay so let's see we've got this we've got subreddit what's that react okay so it's fetching it there seems to be an issue with my i get all posts or it's maybe to do with my url so let's actually go ahead and digest this a little bit so get post list is this pulling in my data that's the first thing yes it is pulling in my data so we know it's not that okay so that's live right now so what we can do is we can kind of break it down step by step so going back over here we can see that i'm getting literally zero posts come back in my undefined undefined post box and feed okay so why are we getting that it's a question so error let's have a look console.log error okay here it is scan name upvote scan error on column three index name upvote containing the type boolean true to an integer of 32 invalid syntax all right so we've got an issue here so firstly i think we have some dodgy data right now inside of here so let's go ahead and get rid of this one and let's go ahead and reload okay so it was basically i'm pushing in a dodgy boolean value so that's a way of debugging it by the way right so let's keep that in there for a second and let's go to our you guys are even seeing live debugging here so it's actually really cool um let's go to our upvote functionality and where i've got my voting going on this is where we have to be a bit careful so up vote true upvote false is up but it comes through here is upvote is that voters okay and then let's just make sure that when we vote so voting is true converting upvote name upvote combined drive value billion true to an interest of 32. so we've got an issue here where i'm trying to essentially go ahead and change a value here upvote so that's not correct so i have screwed up somewhere upvote variable okay let's go to the add vote next so this is a mutation so mutation insert vote upvote upvote upvote postgres insert a vote okay um interesting all right let's have a look we've got our inservo insert um [Music] smash the thumbs up button if you like debugging by the way all right um especially when you're live tense all right so you've got boolean insert vote [Music] scan error on column index three name upvote okay convert and drive value type boolean true tune in 32 and valid syntax right so in 32 that's the problem that i'm thinking because us right now and here it's gonna freak out okay so let's get around country feed 22 [Music] so feed 22 it's this fetch that's getting a bit freaked out get all posts get all posts is being called here get post lists now i did make a change to my post list so i'm wondering if it's because i haven't joined i don't think it is but let's just assume that it could be so get processed i'm going to change this back and i'll explain what happens here i don't think that's that's going to be reason for it no it's not i thought all right so it's definitely not that okay so [Music] i'm just rolling out things here so inside vote insert boat okay let me just see now since that vote [Music] that's the same thing my mutations are the same thing yes so then it's literally to do with my this when i'm adding the vote this is basically some bookie weird behavior so my post lucas thank you dude he goes uh japan 1000 yen he goes i gotta go but i watch replay let me buy at least buy you a bit thank you dude i appreciate that so much [Music] all right so we need to clean the database up to get out of this weird state so let's refresh and let's see by the way let's see what's going on so we've got index id2 upvote true so this value right now is strange because i mean it doesn't seem to be it's only that value that's going a bit dead okay so let's see we've still got loads of retention this is insane you guys are loving the debugging process all right um as long as you work on the front-end team i love that uh that's so cool okay so we've got this we're getting it all right so add vote okay so post display votes add vote as upvote is upvote um voting okay so i'm gonna do a double check here of something i want to just make sure that's no different from what i'm doing except we return a value this is no different to what i'm doing advil use mutation get all votes by post id get votes by post id loading data data comes in error of a verbal post id post id okay okay and then i'll tell you what we'll do let's actually get back the information here so console.log data we can say you placed vote and let's do data thank you giancarlo i appreciate you all right so let's try this now so if we refresh we will get the feed now cause we got rid of the dead there okay now let's go ahead and try something let's go down here and let's do something like increment and we got the same thing there okay so so voting true 49 we never made it past our advert all right so okay okay so i think voting true name okay scan error on column index 3 name upvote converting driver value type boolean of true to an integer 32 why would you be converting it to a value of 32 i have no idea um upvote boolean [Music] yes i see that um there's a difference in username session username you don't have a question mark after a session yes session newsname no that's okay post id only difference i do have here my user effect is placed before but javascript does hoisting so it shouldn't affect that um [Music] okay so i have a feeling it's to do with so the the thing is it's in this table that it's broken so this table may not be configured right let's see column type yep allow nullable oh okay maybe i didn't do that maybe i did that differently in my one if i look at mine vote edit column liam create that post id boolean username barcode post id timestamp id such a strange issue all right come out and drive value typing and true to him okay so let's try and do another step just to rule out we do type of type of is up vote okay i think it's because yeah so i see what you're saying it's because of this true but that's why it shouldn't be it is a boolean true so that's correct type of is that vote so let's do this one more time okay it's type boolean which is fine oh wait add vote okay so is that let's try and do if i literally set it to true i want to see if it's if it's me or if it's the input i'm doing or if it's something else let's have a look so let's do insert vote okay so it's just now ready [Music] to an invalid syntax 1032 but this is strange because i haven't gotten in 32 so i'm not sure what's my graph cure my mutation yeah i know guys i know it's trying to convert into an in but where is the question maybe somewhere in your polar conflicts to connect to graphql you define our birthday yes so that's what i'm that's exactly what i'm thinking isn't there too oh my god i think i might have actually where is it gone hey there we go let's go i think yes that is so sick oh my god i'm full here it is guys yes yes oh my god we made it there it is yes yes yes that is damn amazing all right let's check this out now oh that was a big one yes boy all right smash the thumbs up button that was so sick all right we made it see pear programming that's what community is about nice i was wondering i was like the logic is sound like what is going on all right let's try this again and this needs to now be don't make this mistake is upvote all right so you guys even got a live debugging session in this one wow it's been pretty cool okay that is a relief okay nice so let's go hit it up oh there we go and they fight down oh nice okay so it's working all right so the votes are being pulled in so if i refresh this it would have had a couple of votes in there now yes and they will pull the latest one as the value if i refresh now it will say i vote it up yes okay so now at this point we can do the display logic well done guys smash the like button we don't quit even when it doesn't go our way we literally go you guys see everything i put myself in that position so you guys see it all content display votes i'm going to create a helper function called display votes this takes data for now i'm just going to cast it as any just trust me it'll be all right for now um i'm gonna go ahead and pass the i the data that i get back over here and then i'm gonna say const display number so what i'm doing now is essentially i'm looping through the votes that come back i'm reducing so it's a reduce function for every single so basically if you haven't used a reduce before the way it works is you have some kind of like accumulator function right so i'm going to start with a number of zero in our case and each time i get this thing called total and i get the individual vote so i basically loop through it now what i'm doing here is essentially i'm saying if the vote dot upvote okay so if it was true and i'm gonna say the total total is plus equal one otherwise total is minus equal one okay sick nice uh j i think we're good so total plastic one save okay so now my display number is there and then what we need to do is check a few things so if nobody's voted vote stock length is zero so if the votes dot length is zero then we have to basically return zero because no one is voted you need to edge case if the display number is equal to zero and yes you can do this many ways this is just one of the ways right there's so many ways you can probably make this way more efficient if you wanted to in sql you could definitely do it um but i was quite talented time so return votes zero dot upvote so basically this is saying if the last vote that you made was um as wait so one second let's say number zero yeah so if if the number's on zero between the votes so imagine if it was a um like loads of people had voted you never actually get a zero value on reddit you just get a plus minus based on how many people are voting so if the last if the value is zero then check the last val the vote and if it was positive make it one and if it's negative make it minus one otherwise trust me it doesn't look right at all for the ui so in this case display votes now i can render and what i'm actually going to do here is return display number display number there we go okay um so display number so at this point on around wherever i got my display number yeah so what i'm going to do now is say display votes and pass in my data so that's actually my posts i believe so data we actually cast the data out okay let's see that so you can cast it if you want private the value i'm just trying to quickly here so now minus one boom there we go nice and that actually works that actually works right so i'm not joking i've tried it out before i've tried it with loads of things but now what's really cool as well as you kind of click into it okay so this is interesting if votes is length pstss votes oh yeah here we go protect yourselves right so because while it's loading it could be a thing so in this case there is already a vote here so i'm going to vote plus so there you go see there was already a vote there which we when we tested it out all right so if i do a minus now you know it's it's it'll know that i did a minus file but somebody else already voted on it before when i was testing i added a vote there so look at that and if i refresh boom nice and you can even sort based on all that if you really want it to go that far but what's sick is honestly look if i just do a couple of votes here say that two minus one and it knows what i voted on based on my user state ah sick oh my god this is live reaction right now so cool all right so we've got this working j this is going sick okay literally we're four likes away from 1.3 we're about to implement the the icing on the cake now okay uh because i said because i graduated the challenge i teach how to project an internship reason right thank you i was able to do it thanks man jay screenshot that mokeem gizlan thank you dude i appreciate you telling me that that is awesome man right at this point the final piece of the puzzle this bit the communities right so i'm going to go ahead and implement that um and then we're done then we're done i'm going to deploy all right sick all right so at this point i'm going to go to the home page so uh index and inside of the index we're basically going to go ahead and change it up a little bit so index so inside of here where we have the feed right now i'm going to essentially have underneath the feed i'm going to have a div and i'm going to have p tag saying top communities top communities and this is more of a gimmicky thing but it looks cool i'm going to have a div under here and then i basically going to make a fetch for subreddits right so all the subreddits are going to be listed out here so list subreddits and we're going to limit basically for a number of 10 for example now here what i want to do is i'm going to update our ui in a way that it will look pretty quirky so i'm going to pull that on the side so you can see it a bit so here we've got flex now here for this div i'm going to go ahead and say class name so sticky it's gonna be sticky because it's gonna have this nice little parallax effect top 36 mx5 we're going to say margin top of 5. hidden on phones height is going to be fitted to whatever the contents is width is going to be maximum 300 pixels um so it's going to basically always take up 300 pixels of space rounded corners border order oops border is going to be gray 300 background should be white and large we're going to inline it okay there you go so boom there you go so basically at this point only on the large screen will it pop in but on the small screens it's going to be hidden okay so basically i'm going to keep that there so you can see it now and basically what i want to do is turn that into this top communities okay so um ratio we chat to popularity.com yeah there you go reach out to my answered you and we've been embarrassed that tutorials i'm trying my best dude to do everything in my power and dude 1.3 k likes what is happening oh my god jay manoj palmer screenshot that he got a job as a math developer because it's the best video you've ever learned in channel thanks from about my art appreciate you dude thank you so much wow the retention is next level man oh my god okay so at this point we've got this happening top communities let's get this done so text md margin bottom one padding four padding bottom three one board hit save okay looks good and now let's do a very nice subreddit with a limit so i need to basically fetch so i'm going to add in a mutation a query sorry no more mutations queries and i'm going to basically go ahead and create this query so the query looks something like this get subreddits with limits we need to create a get subreddit list with limits basically i'm passing in a limit number so it could be 10 it will go ahead and fetch 10 of the latest subreddits so let's go ahead into my postgres sql and here what i'm going to do is i haven't actually created that already so i'm going to go ahead and create that right now and what i've done here is essentially go ahead let's go to our queries down here and i'm going to go ahead and paste it in so you guys can see here get subreddit list takes a limit returns a list of subreddits okay now all we're doing is we're running queries to select all from subreddits order by created at so you'll see the latest ones and just limit the number of responses that's literally all this is doing right that's a efficient sql query so it's going to go ahead and do that so now we can use this on the front end to go ahead and pull in our information so um as you can see now what we're going to do is go over to index and i'm basically going to go ahead and say const data equals use thank you man says congratulations for 100 140 000 subscribers amazing stuff i'm so happy honestly get subreddits with limit and we're going to pass in the variables in this case my variable here the limit is actually going to be 10 i'm just going to pass in the number of 10. okay now the data will come back right so i'm going to cast this to our value so remember just how we've been doing it previously i'm going to cast it to a value this is the query name so that's the reason why it comes back that way now we've got the subreddits here so yeshua says how is he going after four hours mad lad thank you dude it's just stamina dude it builds up slowly um we're gonna say subreddits dot map okay we're now going to protect ourselves because it's going to be asynchronous um we're going to say sub reddit okay and i'm going to render out parentheses and we still got one more command i know what i do want to do is i actually want to get the index as well that's like the number which it comes out and we're going to create a component another one what subreddit row and i'm basically going to go and say your subreddit row and i'm going to create this component over here create subreddit row dot tsx boom rfce um and subreddit row is going to take the following things it's going to take a index so props are going to come through it's going to take index it's going to take topic and it's going to have um whoops so at this point it's going to be we're going to have our type at the top like this they're going to be mandatory fields because we're going to be rendering based off of those um i will be using a chevron up icon here so i'm going to just pull that in while we're here i'll go back to index and what i want to do is pass in firstly the key the key is going to be the subreddit id so subreddit dot id the rest of it is going to be topic and index so import it so we can say topic is equal to subreddit dot topic and index is equal to the index in which you render it out as so that looks clean um index is i sorry okay cool subreddit rosa coming out which is a good sign now we just need to render it out as we need so at this point looking pretty decent the div on the outside is going to have a flex box items are going to be centered we're going to have space between the x-axis of two border along the top of each we can have a background for white of each of them adding x of four on each side adding a y of two on the top and bottom and then on the last one we're gonna round the corners off so rounded bottom cool and then probably wondering what the hell was that it didn't even do anything but it does it trust me they say index plus one now you should see a list awesome stuff then we've got the chevron up icon this is going to be a height and width of four and then we're gonna have a shrink zero so i'm basically gonna say you not allowed to shrink um flex a shrink of zero is that even a thing is that x shrink yeah there you go and i'm going to say text should be green 400. this reminds me of peter mckinnon this one avatar um there we go the seed in this case is gonna be uh backslash four slash subreddit topic bam hit save and i will have a water break in a sec we're almost there um p tag is gonna be r forward slash topic okay hey look at that nice and that looks good and if it gets too long we need to protect ourselves so we're gonna say flex one you should be using up the majority of the space but we want to trunk it as well so trunk game dot dot dot if he runs out of space and then i'm going to have a button which is going to be a link component on next js and this button is basically going to be a div and it's just going to save you oh in fact it's actually you need to be a div um all right we'll fix that insect that's fine hey trev you can make that whatever you want at this point i'm gonna say four slash subreddit forward slash topic so it's taking it will take you to that page and then here i'm going to give a class name cursor pointer and it's going to be rounded or bg blue bg blue of 500 padding on the x-axis of three text white so we should get a nice kind of finish at this takes white balm boom look at that oh just as the song finished nice so if i go to react.js now bam when we adjust i can navigate through i can click into a post i can go back here boom i want to go into the test subreddit boom works over here next chairs bam look at this so smooth and so it works so nicely and you could obviously put several side rendering isr whatever the hell you want in here and it would just work right you can even do downvotes upvotes all that kind of good stuff we'll go to t test and look it's still there this is what i love about this build right because essentially every component is being reused so well that it's really really just efficient right so really really nice fact trends will you suggest going along with these videos i'll firstly watch the whole video and try to code myself a bit of buff a bit of both i'd say right a bit about fighting trying to see what works for you i can't recommend for everyone because it's always going to be different for you um but i would give it you know give it a try both ways now guys look at this on a phone looks amazing over here looks amazing over here looks incredible if i log out we can now see sign in to post i can't comment so please sign in to comment the button should be disabled that's the only thing i'm not doing um so let's do post um i am see what i mean i like i get proper crazy about this post id button should be disabled so whoa okay this one is to be disabled if there is no session um there we go disabled there and then sign in now if i sign in with reddit it should take me back to my page afterwards they're saying i feel good vibes from you thank you dude i feel good vibes from you guys hence why pop fam is awesome community i love you guys look at that bam takes me back to the page i can sign in yo this is amazing comment boom look at that awesome awesome stuff and it also goes ahead and updates right so this one doesn't have a comment if i say test never say wow it's amazing look at them watch this watch this wow it's amazing hit comment two boom and if i go over here two comments uploaded but it's just so clean so clean i'm so happy with that i simply realized everyone the gangster until something goes live four hours of live you're killing it man so much money thank you so much that beaches are fully functional absolutely awesome thank you so so much guys amazing stuff i think all that's left now is a deployment so i'm going to show you guys right now how to do a deployment so i'm going to go over to my github and right now if you have if you want the code for this and you don't want to put the work in i recommend you do put the work in literally i'm saying don't buy it because i want you to put it working but feel free the papa github repo is in the description down below the code will be uploaded to that very shortly so feel free to go ahead and jump in now over on your github create a new repo go ahead and in this case i'm going to go ahead and say something like um reddit to youtube clone private and create reaper okay and then get remote ad origin i'm going to go to my code command j deployments right so as you can see 23 things to commit so i'm going to basically paste in get remote origin and at this point we're going to say git add or get status and you can see everything should be green get commit you can do this a few ways you can do it this way or you can do it over here it's completely up to you i'm gonna say build complete let's go get push and we'll get this nice little command push to that branch this will go ahead and push out the thing the the the the code up to my github so if you refresh now bam it will be there then you want to go to vasel.com and over on vasel you will see the uh if i click on new project import git repository and you should see the new one i just did look read it to your youtube plan and just now boom let's go ahead and do this and you've got environment variables now this is the bit where i want you to pay very close attention okay so i'm going to go ahead and try and run you through this as best as i can so without exposing stuff so what i'm going to do is i'm going to go ahead into my environment for i'm going to hide my file for a second so i'm gonna go ahead and actually sort of cut out the keys for a second but in your file right now you should have the following okay you should have this all right you should have credit client id so i want you to go ahead put reddit client id um put this in as well put that in bam you click add you do the same thing for next or secret excel secret every cd you just put anything in there that's a secret and then next auth url for okay so for in the beginning i want you to put just like this as a tester then when you get your deployment url you can come in and switch it okay so that's just gonna be a beginning your next public step zen key is the next one so this one over here i'm going to hide as i put this in so this one i'm adding in and then the final one i'm saying out is reddit client secret is going to be the final piece of the puzzle and that one is actually going to be let me just double check so i need to get it back because i think i've lost it right that one is here okay so i've gone ahead and i've added in all of my stuff okay so at this point if we check this out boom j block it man sort out this all right so environment variables so now we've got this right um awesome stuff um you might as well make papiche mod as well to be fair there you go that picture now you're a mod awesome stuff um so now you can see a predict client secret if i click deploy that's a good multitask um there you go i'm gonna click deploy so now you click deploy and then watch what happens it will literally go ahead use our environment variables now it will not work i'm telling you that before it already happens right it's not going to work it's going to hit a barrier and i'll show you how we overcome that barrier the first thing you want to do is inside of your reddit app right so if you go to reddit.preferences.app so this url right here this is where you're going to basically be seeing your um your app and its keys and so forth right so if we go here i've got this right here right so you've got the web app if i click edit right now i'm going to i'm not going to show that just yet let's kind of get through this bit first so it says building field react tools what happened there first combined component coming up we use jsx component okay so this is a little bug that's happening right now um it's over in app or tsx this is literally here so just change this to any at the moment right that will get you past this just for now and then you can change that afterwards i wouldn't recommend that in production but it's quite a long fix to explain otherwise let's say bug fix get push push that bit of code up bam and now this will re-trigger the deployment we can see bug fix should get popped up in a second so if i go ahead and say over here let's redeploy um okay back oh no i'm not doing that again is it there credit clone radical on youtube there you go bug fix there you go so building okay so now it's building out let's see i'll get you past that issue all right hey look at that so there are this thing cannot bring to us i think sunny can use a water breath five hours left yeah you know what that's actually so true thank you dude i forget okay so it's building out awesome stuff we built our endpoints okay so at this point you can see it deployed there so what i want you to do now is notice that we have this so firstly there's actually two errors that i haven't addressed okay the first thing is no no that's fine actually i have addressed them i have addressed them um okay so this is live right now so this is working the only thing that won't work right now is if we try and sign in and that's because we haven't white listed the url and the authentication endpoint hasn't been set up correctly so at this point this is going to be our deployment url so i want you to do is go over to your reddit clone go over to settings go over to environment variables go to your next auth url go to edit and basically what i like to do is i paste it in and i'll basically just copy this and then that way it gives me the correct one i paste this in here so what i want you to do is basically copy this url here okay hit save now what i want you to do go over to your reddit preferences click on edit and i'm going to hide this for a second click on edit and i want you to do basically the following i want you to paste this in like so all right so only where it says localhost 3000 should you be replacing it so i'm just going to explain it so i've added the https and i'll basically i'll show you this without i'll blur something out all right okay so check this out caitlin barryman thank you so much because what you're doing is great i thank you so much honestly it means a lot yeah here so what i've done is i changed this so i changed the http to be https and then i changed this to be localhost to my url and you can see the same api auth callback reddit is still there okay so do that and then click on update app okay so do that and then what you want to do is click on update up and then go back and basically check that your app redeployed so because you changed the environment variables what you're going to want to do is go over to your branch and click redeploy and then make sure it's redeploying without cache do one final build a run through and wait for it and it will be up in a second so this is gonna build out and then it's gonna happen and then if that all went well then you know that was one hell of a god i think that's literally gonna be one of the best girls on this channel by far if we pull this deployment off then it's literally gonna be like the ultimate creme de la creme finish and then oh god it's amazing all right let's see remember if you want to you know enjoy this kind of you enjoy the coding vibe the community spirit this is literally what zero to full stack girl is all about this is what our community literally is it's coding together building together succeeding together that's literally what we do inside and out we have coaching calls every week loads of course content so join us at proper react.com forward slash course if you're interested in it the link is in the description to join xero to full stack hero do not miss out it's the best community by far period right let's go over here to this james says it's five hours i'll teach you the way my friend honestly don't want to buy it i said look at this right so super basic base okay i think that's me i don't know oh someone's here oh my god sign in with reddit okay so i'm gonna click allow so i'm gonna hide it because i don't trust people but okay i'm in there now so somebody else is in there as well so they're actually in there but um i don't wanna kind of refresh it because you know but the point is is that this works if i click on hello you can say whoa it works and i'm just gonna make sure if i comment let's go ahead and you know see what's going on is that gonna post right now or is it getting overwhelmed okay so maybe we've got a little bit of usage going on right now so that's why it's happening but the point is i'm going to show everyone here look you can see that hello everyone hey this is awesome nice upvote hey that is amazing dude hey look at that oh sick someone else voted at the same time as me oh my god this is amazing i'm gonna make sure every time i go back i just i just don't it's not that i don't trust you it's that i don't trust you all right but look at this look people are actually on here right now pomfam marcus youtube that is amazing guys literally proof in the pudding it works you know how we do it this is literally like the realest use case proof i could have ever wanted to show you guys i'm so happy that you guys have done this look honestly how are you by joanna pablox i'm doing amazing dude in fact i can see you guys here absolutely incredible stuff please please please comment down below after you've seen this video help push this video out right if you smash the like button it helps this go out if you comment it helps this video go out help support the channel that's all i'm asking for because i just want to help more developers succeed and crush it and if you want to go ahead and excel in your career as a developer then obviously i'm always going to be delivering content on youtube for free but you can join us over at zero to full stack hero where we have our inner community absolutely game changer we do this stuff every single week this is why we elevate to this level this is how we do what we do right so thank you so much for tuning in the guys over at steps in absolutely killed it with this one i swear to god that there is like an incredible amount of of just good tech coming out from their side so as you as always if you enjoyed this someone's saying harry potter if you enjoyed this make sure you use the link in the description go ahead set up your steps in um accept them service and basically benefit from the offer that we got going on right now first link in the description is the step zen affiliate link so if you do go through that link you're going to support the channel and guys yeah let me know what your best bit was already right so james steph ashwin we have a papitcha we have lucas this is amazing sonny love this livestream what situation would you seek when instead of nosql databases all depends on how you need to structure your data so you saw this situation especially paired with the graphql endpoint incredible especially materializer that was mind-blowing right so super super cool stuff comments do work yes um why random profile picture every time yeah we're using the seeding the dice best but on that note guys i'm gonna wrap up this build i'm gonna end it the way i know how to end this stuff and i'm gonna go ahead and run through one more time what we did in this video and i'm gonna go ahead and share it on my other build so that way no one else spams it with something else but yeah guys this is what we built in today's video absolutely massive stuff the guys over there steps in came through clutch provided the tech i just taught it right so if you enjoyed this again smash the thumbs up seven masters the tool step you chose are really amazing thank you so much dude we had full functionality in this app we had the ability to upvote downvote all that good stuff we had the ability to write comments we had dynamic routing which we've gone ahead and played in here you can pull in your comments we had amazing use of reusable components so we're actually using the same component several times out throughout it's fully responsive reddit api for authentication all this stuff powered up and it is literally a functional app that you can go ahead run with do your thing with on that note guys i hope this inspired you i hope this was fun and it was an absolute pleasure coming through today me and jay are both gonna literally catch up after this i love you all thank you for 140 000 subscribers television just dropped a 50 donation hey let's go hey funny love your tutorials cool to see you making a reddit clone i learned a lot from your earlier vids and also made a bit of your reddit clown myself would love to get your feedback it's trodit.com jay screenshot that we're going to get him the feedback he deserves dude please email us at paparriac.team gmail.com i'd love to give you some proper feedback so thank you so much jay screenshot that save it as always guys it's your boy papa react i will see you in the next one [Music] by my peace let me feel your love again just the two of us and we could stay up all night kissing on the streets doing what we want to doing what we need to do stand up all night everything [Music] know if you is understand how you make me feel i got you in my head

Channel: Sonny Sangha

Views: 100,612

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: O0AhmAVzOo4

Length: 307min 11sec (18431 seconds)

Published: Wed May 18 2022