Full-Stack Blog App Tutorial | Next.js MongoDB Blog App Project Full Course

Hello friends today we are gonna create a full stack block application using next.js and mongodb on the home page we have some categories latest posts and on the right side we have the most popular and featured posts and we will patch all these data from our database and here we have a dark mode toggle that we can change our theme we can choose any category let's open up the single post and here we have the command section if we are not logged in it's gonna show this link we can login using our social accounts and right now I can add a new command and as you realize after the authentication we have two more links here we can log out or create a new post and this page is just like medium.com if I switch to light mode you can see the similarity let's add a title and description and the best thing is when you select any text here you can give some styles you can make them bigger you can add any link or just copy and paste any external content and here you can add any color image or video let's publish and it's here and this app is fully responsive it's a great project to improve your react and design skills you will learn server side and client-side beta fetching Advanced queries with mongodb and Prisma server-side authentication and API security pagination context API and more and at the end of the video we will deploy our application using hostinger as you know it's the hosting sponsor of lamadev and I create different projects using hostinger and remote on this channel and for this project I'm gonna choose a VPS hosting because it's a full stack application and we need to run node.js for the backend server and you will see how easy to install node.js apps with just one click and all of these servers are super fast because they use mvme ssds and one of the most powerful AMD processors let's choose the most popular one and if you use the link in the description below and llama Dev coupon code here you are gonna get an extra discount after purchasing you are ready to set up your server you can choose any location we are gonna install a control panel and it's gonna be Cloud panel let's create a password and finish setup it's gonna take a while and after that it will be ready to deploy our apps so if you are ready let's create our app and deploy it here okay I created here a new folder and inside this folder let's create our next application to do that I'm going to be using my GitHub repository if you visit this page you are gonna see this reapple story and here we have our starter Branch we are going to be using this Branch because it includes our images here and I removed all the unnecessary files and styles so we are gonna write everything from scratch so let's come back and copy this URL and I will say git clone single branch I'm gonna write here my Branch name starter I will paste my URL Dot and enter okay they are here let's install our libraries I'm using yarn so I will say yarn if you are using AMPM you can say AMPM install and it's going to install all the necessary libraries and we can start after that during this process let me explain you the structure of the application we are using next.js and let's say this is our app directory and in this directory we will create the backhand API that we can connect to the DB and make Rod operations and we'll have the front end part and here we will create some pages and reusable components and when creating them we should consider the rendering method because in next.js we can render components on the server side or client site to decide which one to choose you can ask yourself these questions is SEO important if the answer is yes you should use a server-side component because search engines can directly reach to the entire HTML document of the page and index the content easily another question is do I need to keep the resource safe you may want to access the backend resources directly or maybe you have some sensitive information to hide from client in this case again choose the server site but if you need any user interaction like event listeners you should use a client-side component and when you need to use react hooks like use State use effects you should prefer the client site for example our home page category page and single post page will be on the server side because we'll fetch the data and the login page and add new post page will be on the client side because we need some user interaction and we will use many hooks inside them so let's design our app and after take care of this backend part okay it's ready let's start our application I'll say yarn run Dev okay it's ready let's start and it's here so let's give our initial Style if you check the source file you are gonna see that there is a global CSS here it's basically the main CSS file that we can use in error pages every components so I can Define my background color text color or link colors here because I'm gonna be using them in the entire application so let's define our background color first to do that I can create variables I will say root and let's say background color and the default color will be white because when we visit our website the default team will be light team let's define our text color I'll say black and I'm going to Define two more variables soft PG it's gonna be this gray color it's something like white but a little bit darker so I will do the same thing for text color it's going to be black but a little bit softer like that okay let's select our old document and I want to remove this padding and margin by default there is a margin here so let's say padding 0 margin 0 and box sizing will be border box and after that I'm gonna create my body and I will say 100 PW because I want to prevent any overflowing to do that I'll say overflow X and hidden and what about links let's see first I'm gonna create here a link next.js link and I'll say hello and as you can see by default there is a color and this underline let's remove them I will say color will be inherit it basically means take this color from the parent and text decoration will be done and this style is going to apply for all links in our application as you can see it's empty right now okay so let's give our background color I'm not gonna give it here because as I said we are going to toggle between our teams and it's going to apply to our container to do that I'm going to open up my layout let's close here by the way and as you can see the body is here inside I'm gonna create my container so let's say do and I'm gonna wrap this children and the class name will be container and let's come here for this container I'm gonna give minimum height 100 VH and the background color will be our background color so I'm going to be using variable and as you can see it's here let's use it and the text color will be again variable and text color okay why it's not here let's use it like that as you can see background white color is black and after that let's create our layout so I'm going to create here one more div because I want to give some space for the left and right side and our design will be responsive we are measuring our page we are gonna change its size you are going to understand what I mean by that let's say wrapper like that and I'm gonna come here and say Rubber and the maximum width will be 15 36 pixels and I'm gonna Center this I'll say margin left and right Auto as you can see let's give background color and you can see better it's centered and also I want to give here some padding because when we're sharing our page it's gonna get closer to here and for the mobile screens it's going to start from this line I don't want to do that I want to give some space so let's say pairing left 80 pixels and right okay so let's make this layout responsive firstly let's add here where's our page here I'm going to add some more texts maybe even more and I can add here title for example and let's see okay and right now I'm gonna open up my console and in this point I'm gonna decrease my rubber size so we are going to have some more space here and let me showing more we are going to add some more space and our layout will be responsive all the time you are going to understand better right now I'm gonna come here and I'm gonna choose my first break point to do that I will say media screen and I'm gonna write here my breakpoint 1536 and then we are on this point I'm gonna change my wrapper and Max width will be 1366. let's get back this is the big screen if I come here changes its size and if I get more I can do the same thing let's create another breakpoint I'm just gonna duplicate this and I'm gonna write here another common breakpoint and in this case its size will be 10 24. like that and if we are in the time 24 again and this time it's going to be 768 pixels those all sizes are really commonly used so I don't recommend you to change those points and as you can see we have more space but in this case all I want to do is decrease in those paddings remember it was 80 pixels but I will say make them 40 pixels okay and this point I'm gonna create another breakpoint let's remove those paddings and I'm gonna write it here and change this number and if we are on this point it's going to be 475 pixels okay and this is the Mobile screen it's that easy guys when we add our HTML element you are going to see how useful to create those layouts if you write them at the beginning of the application everything will be much much easier for you okay let's close this console and open up our application I will say localhost 3001 and this is the completed version of our application and let's see what we are gonna need this is our home page so firstly we are gonna need this Nail Bar this featured section categories component we have our post list and on the right side we have our menu we are going to need this pagination component and finally this footer so let's create our components and use them inside our home page so I'm gonna come here in the source folder and I will create my components folder and the first one will be Nail Bar and inside I will say now bar jsx and I'm going to create my function and to give some style we are going to need a file and it's going to be a bar module dot CSS it's going to create a unique class name for each individual component let's do that I will say class name and let's import our style styles from now bar so I can use it here and say container let's copy this and create one more component footer I will paste and change my name and let's create this file and I will save them and let's use them in our home page right now I don't need them I can delete and paste here footer let's import okay they are here if I open my console as we can see this is our main container and inside we have wrapper and our nabar and footer of course we didn't give any style yet I will say container background color red I will do the same thing for our footer and it's going to be let's say blue and right now as you can see we have different class names so let's close here and delete our backgrounds and for this wrapper okay so if we check our application if I write here any post ID you are gonna see that we are still using this number and footer so basically we are going to use those components in all pages so instead of writing them one by one for each page I can write it in my layout let's remove them and open up layout and I'm gonna create here my neighbor and footer and wrap my children by the way you can change your website title and description it's important for SEO by the way there is no object fit for this image we are gonna change it but before let's create our other components remember we have featured items categories card list and menu and this by generation so I'm gonna copy this folder and paste and let's change them I'm gonna change them quickly okay we have all our components and let's use them I'm going to close everything here and open up my page let's give our class name here it's going to be container firstly I'm gonna call my featured component and after that we are going to have our category list and I'm going to create here a container let's say content and it's going to include our card list and this menu I'm creating another container that because we are going to make this container display Flex and inside I will say cut list and menu and inside this card list I'm gonna call my pagination component and that's all let's see all of them are here let's start with this Nail Bar you have social icons logo and those lyrics so let's create three items I'm gonna open up my now bar and inside this container social logo and let's say links by the way as you can see I'm using here a shortcut it gives me a div with class name and styles I can directly give here any class name if you don't know how I am doing this you can watch my vs code extensions video basically I'm creating a new cinepad using an extension anyway let's continue as you can see we have four items for images let's create quickly I'm gonna call next.js in which source will be Facebook and I need to give some width and height let's say 24 and I'm gonna duplicate this and it's gonna be Instagram Tick Tock I don't know why I use Tick Tock but and YouTube okay they are here and let's create our logo it's going to be just the text I will drag the paste and here we have some items some links next just think and the first one will be home page a12 and it's going to be the home page and we are going to have contacts part page and what else as you can see we have toggle button to do that I can create one more component and we are going to have this login button but if we are logged in we are gonna see here another link that we can create new post and we are going to create logout button to do that we have to listen the user session and in order to do that our components will be a client component because we are going to be using a session hook I want to keep my nail bar as a server side component so basically we are going to need a client-side component just for those authentication links let's create our components first one will be team toggle CSS file and jsx file let's import our tile here of course import styles from this path and I'm going to give my class name and let's copy this and create one more and I will say auth links like that and do CSS okay so after this about link I can call my component and before this home page link I can call my toggle team toggle okay it's time to give you some styles I'm gonna close everything and open up my nail bar here and CSS here so let's make this container display Flex so our items will be horizontal let's separate them firstly I'm gonna Center them vertically and justify content space between okay what about those social icons let's copy this and again display flex and I'm gonna give a gap between each item time fix us I can do the same thing for those links here display flex and gap between them will be let's say 20 pixels it's gonna be more and I can give a height for my nail bar because in our example as you can see there is a height and our items are centered so I will say height 100 but as you realize there is something wrong here in our application the logo is in the middle of the nail bar but in our project it's going to the left side to prevent this I'm gonna give a width for each item for this social logo and those links if I do that they are gonna have exactly the same size so we can see our logo in the middle we have social logo and links I'm gonna give exactly the same size Flex One Flex One Flex one basically we are saying split this flexbox into three pieces and give exactly the same size for each item if I make this 2 for example in this case our social container will be twice smaller than logo let's try actually I will say a color as you can see this is one unit and this logo container is two units if I make this one each item will be exactly the same size so if I Center my text here let's delete this background and say text align Center as you can see this is what we want okay let's increase this font size and font weight 36 48 will be bold perfect and for those links it's gonna be 20 pixels okay right now instead of this text I can create my login button let's open up our component and for now I'm going to create here a status effect status and it's going to be not authenticated it's going to be temporary and after creating our authentication functionality we are going to take this status from our hook but for now let's use it so I'm gonna come here and create a condition I'm not going to need any container or do here it's going to be drag the r links and I'm gonna write here my condition I will say if status equals not authenticated show here something if it's not show something else so if you are not authenticated I can show here the login link login and if we are authenticated I'm going to create another link and it's going to be right so if you have a user we will be able to create any post and I'm going to create a span here and it's going to be our logout button of course we are going to need some parents I can directly use fragments let's see as you can see login button is here but if we are authenticated write and log out button by the way it's not a link so I can give here cursor pointer so I'll say class name Styles and Link let's open up quickly R Style and I will just say cursor pointer okay so I'm going to take this back yeah I'm gonna see a login button and let's take care of our team toggle firstly I'm gonna give some style and I'm gonna create this toggle let me zoom in and after we are going to create this functionality firstly we are going to have a container and inside this container we are going to have two images this Moon and this sun and I'm gonna create this circle div and when I click on this container we are going to change its position and its color let's do that let's close everything and open up toggle CSS here and inside this container let's create our images next image Source will be Moon dot PNG let's give width and height it's going to be 14 pixels and it's going to be sun and between them I'm gonna create another div and its style will be let's say ball or Circle whatever so let's take care of this container first I'm gonna give some width and height that's a border radius 50 percent I will say cursor pointer and I'm gonna use display Flex my items will be horizontal let's zoom in so let's change its background color let's say black by the way this radius is too much let's make this pixels and let's enter them vertically align item Center and I'm going to separate my items using justify content and space between okay so let's create our ball it's gonna be 50 pixels and Border radius will be 50 percent and background color let's say white for now okay so what I'm gonna do is make the position of this ball absolute because at the beginning it's gonna be on the left but when I click here it's going to be on the right so if I say left 0 for example it's not going to be here because its parent is not relative to prevent this don't forget to use position relative for the parent actually let's see one pixel okay it's much better and when I click it's going to be right one pixel so how we are going to implement this dark mode functionality to do that we can use react context API let's open up our menu and inside source folder I'm going to create context and inside let's say team context jsx and let's close here and create our context I will say export const team context and I'm going to use create context it comes from react and right now I can create my contacts provider export const team context provider if you don't know how to use context API don't worry I'm going to explain and finally we are going to wrap these children with our provider team contacts.provider and inside children okay there is a problem it's not defined because I didn't say const export const and let me explain basically we created our team context and using this context we are going to store our team State at the beginning it's going to be light mode and using that state we are gonna decide the background color of this application or text color of this application or whatever so we are gonna need that state and after that we are going to create an action when we click on this button we are gonna dispatch that action and we are gonna basically say check the state if it's the light mode make it dark if it's the dark mode make it light so we are gonna need two things our team state and toggle functionality and we are gonna store those items inside our context and when we wrap our application with this context provider you will be able to use that team State and toggle functionality in everywhere so I'll say const team set team you stay took and at the beginning as I said it's going to be the light mode but there is something important here when we click here and make it dark mode and when we refresh the page it's going to be light mode again because of this use state to prevent this we can store this state in our local storage let's open up application as you can see it's empty we can create here a key and value can be light mode so let's actually create here a function I'll say const get from Storage local storage and I'm gonna check my value using local storage and I'll say get item and team and I'm gonna return this value but there is something important here if you visit this page for the first time we are not going to have anything inside this storage it's going to be empty and I will say in this case if it's empty make it light by the way we are using Q State and obviously our component will be a client-side component so I will say use client and right now I can use this local storage this function to say return get from local storage of course there is a typo here there is one more brackets okay why I'm creating here a function because remember nextges is using server site rendering by default even if you write here use client at the beginning it's a server-side component but you are trying to use browser local storage but in our server there is no browser so during this transition it's going to cause some problem to prevent this I'm gonna say if type of window is not undefined we are saying if the transition is completed if it's the client component use that local storage it's a little bit weird when you use next.js because in react it's much easier but in next chance we have some additional steps we are going to do one more thing after that you are gonna see but for now let's wrap our application with this provider and use our context so I'm going to open up my layout and after this body I will say team provider it's here team contacts provider like that right now I can use my state everywhere for example inside this toggle component let's open up and let's call our context I'll say const team is going to come from our context I'll say use context hook and team context thank you and remember we are using a hook and it should be a client component but of course we didn't pass our team yet let's open up our context as you can see we are wrapping our children but we are not passing anything so I'm gonna say value and I'm gonna pass here my tip let's try to use it I'm going to open up console and as you can see this is the light mode so using this theme I can change my style but I want to change the entire background to do that I can use this theme contacts in my layout but remember if you do that you have to use this use context hook and in this case it's going to be client component but I don't want to do that that's because it's a server component and I'm using this title and description I want to keep this as a server side component so I can come here and create another component actually let's create other folder and I will say providers and I'm going to create team provider and in the future we are going to create our fashion provider this is why I created this folder I will create my function I will make it client component let's do exactly the same thing I'm going to copy this and paste here let's import them and using this theme I want to change my class name here I will say class name is going to be T dark or light I can use this theme in my Global CSS and at the beginning remember we already use the light mode background color white text color black but if it's too dark I'm gonna change those variables so let's come here after this link I'll see if it's the dark mode PJ will be this color text color will be this color and soft PG and finally soft text color like that of course not comma is going to be semicolon okay right now I'm gonna change my team but we don't have our functionality yet Let's test it using light mode and I'm gonna use this team provider let's open up our layout wrap our application and of course it's going to be our children but we didn't take any let's take children and Rob them here okay and as you can see our background is dark right now so let's create our functionality I'm going to come here and I'm going to create a function inside this provider I will say cons toggle set team now I will say if team equals light it's going to be dark if it's dark it's gonna be light and I can send this to go right now but remember we are using local storage when we change this we should also change our local storage to do that I can use use effect hook and whenever our team changes we are going to update our local storage so I'll say set item RT we are going to change its value so let's use this token function in our number I mean in this toggle I will say toggle and when I click here on click I'm going to call this function let's click and perfect dark and Light as you can see it's the light and if I refresh it's still dark and if you are using some other browsers you might have some problems because as I said we are using local storage if you run into some problems you can open up your team provider and create here a use state and I'm gonna tag if the component is mounted or not and using user packed hook I can make sure my component is a client type component first I'm gonna set my state and I can write here a condition if my component is ready return this children let's close everything and let's change this style let's check our application as we can see when it's dark its background is white and this ball is black and we are changing its position so I'm going to open up my toggle and using this theme I can change its position so I'm gonna come here and give inner style and I'm gonna write here my condition let's use team and I will say if it's dark the left Position will be one pixel and background color will be these dark color and if it's not if it's light this time right will be one and background color will be white so I can do the same thing for my container actually you can drag the right here background color we can use any variable and remember text color is white okay it's something like gray but I want to make this white so I don't want to use my CSS I'm gonna give inner Style if it's dark the background will be white if it's light the background will be this color so I can remove them here this and this left okay it's still dark if it's dark background color will be white if it's not foreign okay it's still acting like a server side component of course inside quotes let's actually run this again okay there is no problem but why it's not white oh because I forgot changing my Global CSS it's gonna be dark mode okay perfect when I click it's gonna be it back by the way those are not vertically centered let's open up our neighbor align item Center PATH inside links we don't have okay awesome so what about responsive design so I'm going to open up my console for the large page we don't have any problem now for here and for this point I can decrease my font size let's do that let's close everything and open up now bar and I'm gonna write my media query maximum size will be 1280 now for logo font size will be 32 pixels it was 36 and for those links it was 20 in this case it's going to be 18 pixels and I'm gonna decrease the gap between them it's going to be 15. okay and when it's 10 24 I'm gonna delete those icons let's duplicate this 10 24 pixels I will say social and I'm gonna remove this display no for the logo it was centered remember text align will be left and when it's smaller in this point I can decrease this size a little bit more let's say 24 pixels and when it comes to Mobile screen I'm gonna remove these links instead I'm gonna create here a mobile menu and when I click on that menu it's going to open up here a container and we will be able to see our links to do that actually I can use these auth links remember we have another component here I can use it because we are going to be using on click event and we cannot do this in server side component so I can directly use that component but before I'll say if it's Mobile screen remove those links but if I say that it's gonna remove our auth component also so instead of links I'll say link and I'm gonna give class name for those links styles dot link okay right now I can create here a button let's open up our component here and I'm going to create here a use State I'll say const open set open use statehook at the beginning it's going to be closed so I will say false of course it's going to be use clients and here I'm gonna create a button let's say div Burger let's create three lines inside basically instead of using any image I'm going to create my own menu let's come here and I will say Burger menu it's gonna be with 20 pixels height 16 pixels I can use display flex but reaction will be different it's going to be cold and if I say just five contact space between it's gonna separate them let's create our lines and you can see better 100 percent it will be just two pixels and the background color will be text color oops I set lines it's going to be line okay it's still White text color let's open up Global CSS actually let's create for light mode also copy this oh there's a comma here that was the problem but anyway it can stay and let's see okay perfect let's give cursor pointer and when I click on this button by the way I gave cursor pointer here it's going to be in the parent and when I click here I'm gonna show another container that's right here a condition and I will say if it's open let's create here edu I'm going to close my menu and let's say responsive menu I'm going to create my links again home page and others and I can do exactly the same thing here I will copy this and paste like that and let's write here our on click event I will say set open it's going to be the opposite and they are here so let's give our style at the beginning it's going to be displayed on we are not gonna see that say display none I can delete this and if it's for the mobile screens it can show up let's create media query it's going to be display Flex like that and I can delete those items for login and this and it's the small screen they are going to be display no and I can move them here in my now bar I'm gonna say links just file content flex and like that and finally this is responsive container what was the name responsive menu let's actually create this here and I will say position absolute because it's going to contain all our screen top will be 100 pixels because our neighbor is 100 pixels it's gonna start from here and I will say left zero and color it's gonna be PG and I'm gonna give height I will use calculate method that because it's going to be full screen but remember our nail bar is 100 pixels don't forget to give here a space and it will be a hundred percent okay let's enter them here I'll say display Flags like extraction will be column align item Center just y content Center and gap between each item will be let's say 50. and font size will be bigger let's open up and perfect okay so let's take care of featured let me zoom out as you can see we have a huge Title Here and After we have an image and post details let's create them I will close everything and open up featured quickly I'm going to create my title Styles dot title and this part of the title will be bold a llama Dev here and after that let's create a post it's gonna have an image container a text container inside this container we are going to have an image I'm gonna give my source and I will say fill so it's Gonna Fill this container in this case remember we have to make this position relative and inside this text container we have title this description and a button read more let's give class name post description button okay let's open up our CSS file here firstly I'm going to give here a margin top I'm going to separate my mirror bar and this container as you can see we don't have any width and height for this container in which container we are going to handle that but before let's give this font size it's really big for post again margin top I'll say display Flex because they are horizontal line item Center and gap between this image container and tax container will be 50 pixels let's give size for the image container so basically I can give again Flex One Flex one so they can be equal and after I'm going to give here height and Position will be relative okay I have for this image I will just give object fit it's going to be color and for the text container I can give some space between my items to do that I'm gonna be using column Flags and gap between them today let's increase this size font size 40 pixels like that and for this description let's say 20 phone fit will be a little bit smaller and the color will be let's say soft text color okay and finally for this button I'm going to give some padding from top and bottom left and right I'm going to delete the Border it's going to be known and finally for the radius let's say 5 pixels as you can see it's too big so let's say with maximum content by the way why it's bold it should be only this one okay let's give class name so I can come here and say font weight 300. ah okay so it was already bold so I decreased this weight in this case we don't need this class name and after that we can create our category lists let's make this light and inside we are going to have a title and after that we are going to create a container that contains every individual category let's close them and open up category component which one tag this title and after I will say categories and category inside let's give class name for this is going to be title and inside each category we are going to have an image and this text and when we click here it's going to open up the blog page so let's create a link and inside I'll say image and after this image we are going to have the category name let's say Style I'm gonna give you my source here style.png 32 height and I will say class name okay let's give our link it's gonna be the blog page and we are going to give here any category name it's going to be style okay and as you realize each category has different background color so I can specify them using their titles so I can add here one more class name I'm gonna cut this actually I can delete this div we already have our container this link I will say class name I'm going to be using backtick and it's going to be category and also Style the name of the category so I'm gonna do the same thing for others let me actually copy and paste them there is nothing different here like that as you can see coding culture travel whatever let's see I will make this light mode as you can see they are here right now we can give our style first thing I'm going to give here is space they are too close I'm going to open up my CSS here and I'm going to give here a margin actually I can give it for this title because there is a space here also so I can give both for the top and bottom so I will say title margin 50 pixels and 0 from left and right and for the categories I'll say display Flex Flex will be rub and I'll say justify content space between and 20 pixels Gap okay what about each category I'm gonna Center them display Flags align item Center let's give Gap perfect and I'm gonna capitalize the first letter of the category text to do that I will say text transform capitalize okay what about those images I will just keep portal radius is going to be Circle perfect now for the category I can give different background colors to do that I will say category and remember we have additional style here we can use it and the background color will be this color let's give some padding here actually I can directly give a width and height it's going to be 50 percent it will be 80 pixels and I'm gonna Center everything just by contact center like that let's keep all the radius here 10 pixels okay so let's do the same thing for others I'm gonna give different colors I will copy and paste them there is nothing complex here I'm just giving different backgrounds and awesome and when I shrink the page we are going to give responsive design and it's gonna look better there is a problem because we gave here percentage that's why it looks weird and also I didn't give any responsive design for this site let's do that I forgot I'm gonna open up my featured CSS and firstly I'm gonna decrease this font size I'll say media query I'm gonna give my breakpoint it's going to affect my title font size will be 72. like that and when I shrink more I can decrease again it's going to be 64. what about this post I can actually delete this image let's say display none and if it's smaller I can decrease this size more 46 and finally for the Mobile screen is going to be a little bit smaller 36. here will be 48 here will be 36. okay perfect for those categories if it's in this size width will be 20 percent let's do that this size I'm going to say single category it was 15 but this time it's going to be 20 percent perfect and if it's smaller it's going to be 25 awesome and when it's smaller we are going to see only two items here let's say 45 perfect and finally for the small screen it's going to be a hundred percent so we can see it only one item per line perfect it's that easy okay right now we can take care of this content remember in the home page we have created a container and it contains this card list and this menu basically is going to be display Flex let's do that I'm gonna close here and everything here and let's open up our home page here okay we have class name and I will say content display flags and gap between items will be 50. that's all like that so let's give some size for them in our example as you can see this side is bigger than this side so I'm gonna give flex and this container will be Flex 5 and this container will be Flex 2. so it's going to be two and a half bigger than this menu so let's open up card list and container I'll say Flex 5 and for the menu it's gonna be Flags too like that okay so let's take care of this card list again we are gonna have title some space here and after that we are going to have carts container which contains every individual cut they have an image container text container and those items it's going to be really easy let's come here okay this is the home page I'm going to open up card list let's close this menu and I will say H1 tag this title quickly give class name Styles and title and after that we are going to have our posts and inside a single post and again image container tax container inside this image container we are going to have our image I shall create snippet for this in which also I think let's give our temporary data here and I will say feel actually we can create different components for single post it's going to be easier let's open up components and I'll say cart jsx module let's import this here and write it here okay let's take those and I'm gonna remove this like that let's import image and I'm going to call my cart here actually I can call multiple times like that okay we are gonna need image container size but before let's create our texts we have some details here which includes date and category and after title description and this link so let's see detail is going to have a span let's say any date category I'm gonna give class name for this one is gravy date and after this deal I can create my H1 tag is going to be my title let's copy here A P tag and this link actually I can give link for this H1 also when we click here we can visit our single blog page let's see of course we can't see because of this image let's give our style first ly I will say margin button I will say display Flags gap between image container and text container will be 50 pixels and I will say align item Center let's create our image container after we can see our component I will say Flex one for the text container I will do the same thing so they are going to be equal I will give any height here semicolon and height and I'll say position relative right now we can see it okay but we don't have any space here let's open up our cart list here for the title remember what we are doing margin 50 and 0. okay awesome I will give object fit for this image did I give class name or not okay I didn't style stored image cover okay for the tax container I'm gonna make them horizontal sorry vertical for extraction column 9 gap between them 30 pixels now for this date I'm going to change the color for this category and between them I will give a dash that's actually give it here like that for this date color will be Gray now for the category color will be this red color font weight will be a little bit thicker and for the description I'm gonna increase font size and decrease font weight description font size 18 pixels and font weight will be 300. and color will be solve text color okay it's not here because I didn't give any class name Styles dot description let's do the same thing for this link let's see first as you can see it's much better if I open up the dark mode it's going to be much softer for this link I'm gonna give some water button foreign pixel solid and our red color as you can see its size is full to get rid of this remember what we are doing with maximum content and I will give some padding between top and bottom and awesome so what about this menu and we are gonna have three main sections these popular posts categories and editors pick this and this component will be similar so it's going to be easy to create so let's start with this subtitle and this title I'll say h2 tag I'm going to copy and paste if you have this problem you can basically use color brackets and a code I will say H1 most popular and finally I can create my div I'll say items and a single item actually let's make this link so we can click and visit the post well now we can stay like that link and inside we are going to have some texts but in this side as you can see we have an image also since we are using exactly the same item let's actually start with this one and then we create this one we are just gonna remove this image so I'm gonna create image container and text container and inside text container we are going to have category title and those details in which container tax container inside this we are going to have an image I'm going to use exactly the same image and I will say fill I'm going to give class name because remember we are going to need object fit I didn't import let's import and inside text I will say span let's say travel and again remember we are going to have two class names because we are going to have different background colors so I will say category of course inside backtick and one more and it's going to be travel and after this span let's create another H tag I'll just create random text of course it's gonna be shorter and after that some details let's say detail and inside we are going to have two spans first one will be username let's say John Doe and the second one will be the date let's give class names and that's all let's give our style and after we can create different items I will say let's actually give class name here subtitle like that okay I will say color will be gray font size will be 16 and phone plate will be 400. now for this one it's going to be smaller and as you can see we don't have any space here let's give and what about this item we are going to take care of these items but before let's create the first one after giving style and creating other items we can take care of this so I will say display Flex align item Center and gap between them now for image container Plex will be one for the text container Flex will be 4. by the way there is our image okay it's here of course I didn't give position relative and we cannot see it that because we don't have any height you can give here any custom height but I'm gonna use here aspect ratio and it's going to be one to one the height and width will be exactly the same size in the previous video I showed some awesome CSS tips and tricks it's a really short video I highly recommend to watch it there are some tricks just like this let's see okay perfect and I can make this circle and add here a border let's say image for the radius and Border will be three pixels solid and light gray and of course don't forget object fits okay I forgot class name I think oh okay so let's take care of those texts and after we can create some more firstly I'm gonna make this vertical display Flags Flex Direction and Gap and after that I can use my title description did I give any class name okay I didn't of course we have title here so I'm gonna say post title font size will be 18 and phone fate will be bigger and finally I'll say color is going to be our variable soft text color and after that for the detail I can decrease this font size it's gonna be 12. for this date by the way I can give here a dash as we did before and its color will be Gray okay so what about this category again we are gonna have different colors but before let's take care of the main container remember its class name is category I'll write it here it's before title I'll say padding from top and bottom three left and right eight I will give some border radius 10 pixels font size will be small and the color will be white okay we can't see because we don't have any background let's take this category and travel background color will be this orange color okay as you can see again each size is too high it's going to be maximum content right now I can create some others let's see how many okay we have four I will take this link two three four let's actually give some other categories I will say culture let's say food and fashion so I'm gonna copy and paste my colors like that and perfect so let's give space between them to do that I'm gonna use the container remember we have our items here I'll say relax Direction column gap between each item will be 35 pixels perfect and also I can give space between here and here for top and bottom margin top 35 pixels and bottom will be a little bit more okay so let's create another item I mean this container actually I can duplicate all of them and I'm gonna change this subtitle and title okay we already use them let's change here the second one we don't need this and this main title okay so let's get rid of those images let's see okay perfect and between them I'm gonna create another container and it's gonna be our categories again title subtitle and our categories container and it's going to include different categories so I'm gonna come here I will duplicate this it's gonna be discovered by topic categories and after that let's create our category list and I'm going to be using link so we can click and open up the blog page just like this I can give here any category name and I will say Style and again class name Styles category item and one more the category name so let's create more I will duplicate actually I can drag copy paste there is nothing important here we have other items and their class names of course it's a huge component you can split them let's actually do that I will say menu posts like that and I can take here any props that we can fetch data and also we can add here with image or not that's actually at this here and I will come here and copy this items I will cut and paste here that's import link and image of course we don't have any image so I can actually copy the other one like that and I can write here condition if it's with image let's do the same thing for others okay right now I can use this component here and I'll say with image true and this one and it's going to be false as you can see it's exactly the same of course I can take this style and paste inside my component Style there's our menu post here I like that okay nothing has changed perfect oops it's not ours okay there's a problem because we don't have styles many posts import styles from many post module CSS posts okay perfect it works as you expected so you can do the same thing for those category lists I will copy here actually I will cut and create new component menu categories and I will paste it here let's import the link and finally I can create my CSS file let's copy this and paste it okay so I can close here we have only titles and I can use this module let's see we are gonna do exactly the same thing as we did here remember different colors so firstly I'll say category item actually let's start with this list firstly I will give my margin 35 and 60. and it's gonna be display Flex Flex will be drop so when we showing the page our items will be spread to other lines and capital B20 now for each item I'm going to give some padding from top and bottom left and right I will give border radius and font size will be 14. of course we didn't call our component let's call menu categories perfect and let's give our colors here I will drag the paste and perfect it's that easy let's open up this dark mode it looks really nice and what else let's create those buttons if you remember we have a component for those buttons I will create here two individual button Styles dot button another one and the first one will be previous page and the second one will be next page oh what's this third one let's remove and let's give Style I will just say display flex and I'm gonna separate them using justify content space between and I'm gonna make them red and give some padding 100 pixels I'm gonna delete the Border let's give our padding and background color text color will be white and cursor will be pointer that's all and finally let's take care of this footer we have two sections left and right side and it includes this div logo and title any description here and social icons and for the right side we are going to have items and each item includes a title and some links let's do that I'm going to close them and open up my footer the first one will be information and the second one will be links and inside we are going to have logo container which includes our logo let's say logo.png I'm gonna give some width and height it's going to be 50 so I don't have to create any container in which container and after I'll say H1 tag and Lama block let's say logo text and after this deal we are going to have this text let's create a P tag and paste here and its class name will be description and finally icons 18 pixels and others finally this site I'm gonna create a list and it's going to have a title let's say links and after different links here home page three more and I'm gonna give class name for this link because its weight will be a little bit different let's say at least title and finally I'm gonna duplicate this it's going to be tags social okay let's see we are ready to give our style let's open up here and firstly I'm going to give some margin margin top and I will say display Flags justify content space between and color will be soft text color okay there is no space here let's give some padding 20 to 0 and after that let's start with this info actually I will give Flex one and not pass the other one links and again display Flex Flex Direction column and gap between each item will be 14 pixels like this now for this logo container I'm gonna give some Gap for the logo text font size will be bigger okay and for the description I can decrease font weight it's going to be lighter and finally those icons I will give some space by the way I can give some margin here maybe let's say 10 and after Gap okay and what about here let's check our example as you can see it starts from here so I will say display Flex just file content flex and for each list is going to be vertical yeah will be 10 phone paid 300. okay let's give some space between them like that and for those titles remember we have list title I will just say font weight Bolt perfect and again I forgot responsive design for this part let's take care of this footer first and after we can take care of here we are just gonna remove this menu and I will say if it's smaller than 10 24 I'm gonna decrease this space by the way they are not vertically centered display Flex align item Center and let's create our media query 1024 links cap will be let's say 50. oops I forgot writing and perfect and if it's smaller as you can see this space is not enough anymore in this case I'm gonna make this container Flex Direction column let's duplicate for the container for extraction column and gap between items will be 30. and I can separate those items just five content space between okay it's not a hundred percent okay perfect maybe I can increase here let's say 50. and if it's even smaller I'm just gonna decrease this size font size let's remove here okay and what about here let's shrink okay there is no problem and if it's small firstly I'm gonna delete this image let's open up cut module 1280 image container will be display not okay and if it's smaller I'm gonna delete this menu I will copy this and open up my menu menu module if it's 10 24 container will be displayed no perfect we have only our items awesome it looks really nice so we've finished our home page so let's take care of our category page it's really easy we are not gonna do anything different Let's see we have again our card list this menu we are just gonna add this title that's all so let's create our page I will close everything here and inside app directory I'm gonna create my page and it's gonna be block page log page or category page whatever you say I will see log page module CSS okay I will just add here a title style block this title is Gonna Change according to our search query for example category will be part and it's going to be Sport and this color will be different let's give class name and after that remember our home page I will create here a Content div and inside I'm going to add my cart list and menu we are gonna take our search parameter and pass it to our cart list and it's going to take that parameter and make a fetch request and show all these items so I'm just gonna make this contact display flex and I'm gonna add a style for this title that's all let's open up I said container is going to be styles okay as you can see they are not horizontal actually we don't even need this container I will just say title and content and it's going to be display Flex cap will be 50. for this title background color will be let's say Coral color will be white I'm going to give some padding from top and bottom left and right and text align will be Center oops sector and that's all this is how easy to create websites using reusable components and what about single page when I click here it's going to open up any page here and it's going to show our single post of course we don't have our page let's create inside app directory remember how we are doing this I will say square brackets and inside you can write post ID post like whatever you want but I'm gonna use slack because it's important for SEO instead of writing here any random post number we are going to show our title and using this title biograph hatch our data let's create our page single page let's create module I will copy this I'll say container and here and call this style here okay as you can see it's here by the way I'm changing this dark and light mode all the time I hope you are not watching this at night I'm so sorry actually let's make this dark and let's open up any slack here and as you can see we are gonna have our title user information and image and again we are going to create content div and we are going to add another section here but this site will be again our menu let's do that actually let's close everything here and open up so let's remove this and create another container I will say info container and after we are going to have the content which includes our post and menu remember its Flex 2 is going to be Flex 5. so let's start with this info container we are going to have text container image container and text container includes this title and user div in which container I will say fill and I will give class name so I can apply object fit and inside here let's create title and user div and again another image here let's move this here actually let's give our example and user text container and we are going to have here our username and date okay let's separate our container and give here a width and height so we can see our image I will move this here and I will say info container align item Center and gap between image and text will be 50 pixels I will say tax container Flex one an image container Flex one and I'm going to give here height and Position will be relative let's give quickly object fit okay it's still here now that's because of this image container blow text container I will just give 50 pixels and right now I will increase this title size and give some margin here let's say 64 margin button but I didn't give a class name okay for this user it's going to be display flex and for this information it's going to be displayflex again but Flex Direction color and inside this image container we have our image let's say Avatar and change this class name and I will say border radius 50 percent and of course object fits for this text container display flags flag extraction column gap between items will be 5 pixels and color will be soft let's say bar soft text color okay maybe let's increase this size and weight and perfect right now I can create my description and this comment section actually we can create here another component for those commands but before let's separate them that content and this menu remember we have contact here let's play Flags Gap and that's all and after that inside this post I'm going to create my description let's just create some random text actually I can create more P tag so basically I'm gonna need another do and it's going to be a description and inside this div I can create my content my texts headers or whatever it's too small okay as you can see I forgot giving Flex for my content for this post Flex will be five because its Flags is two and I can give some margin top pixels I want to increase this font size it's too small description and P tag inside I'll say font size 20 pixels font rate will be 300. and I can give margin between P tags finally our comments to do that I'm gonna create new component but before let's take care of this responsive design actually we can do it after comment section I'm going to close them inside components commands thank you styles from commands modules CSS okay let's call it in our single page after this view I will say comment and inside this div I call my component and let's come back here and let's see what we are gonna need firstly we are gonna need this title after that we are going to create a div which includes this input and button but be careful if we are not logged in we are not supposed to see this container so again I'm gonna write a fake status and using that status I'm gonna write a condition and after that we are going to write our comments we are going to have a list and each individual command let's create this title first and let's create here status authenticated and I will write my condition status equals authenticated show here a container if it's not let's call here a link and I will say login to write a comment href and login page and here I'm going to create a new let's say right and inside by the way let's import this and actually let's create a text area I'll delete those I will give a placeholder write a comment and class name will be let's say input let's make this self-closed and after that a button okay and after that let's create commands list I'll say comments and a single comment and inside this we are going to have our user div it's exactly the same and description so let's create user which has an image and user information I'm going to give my class names and let's give our source width and height is gonna be 50 pixels finally after this user I will just create my description and let's give a style and after we can create other comments I will take this here and firstly let's give here margin top and after title this title I'm going to change its color it's gonna be soft color margin button 30 pixels like that and for this div remember right display Flex align item Center just file content space between now for the input padding 20 with a hundred percent perfect for this button I'm gonna give some padding for the radius color will be white background will be this green color padding background color will be teal text color will be white it's gonna be bold I'm going to delete the Border and Border radius will be 5 pixels that's a cursor pointer awesome and what about this user actually we did this before I'm just gonna write quickly display Flags online item Center gap between image and text and I will say margin bottom because I want to give space here for this image I'm gonna make it Circle and object fit what about this user info it's going to be vertical remember let's give gap between them color will be soft and for the username font weight will be bigger where is our username here font weight 500. now for date so what about this description I'm going to increase the font size and decrease default weight like that and there is no space here let's give after this right container remember we have commands and command this is our main deal comparative I'll say 50 and for each command again margin bottom if you want to you can use display Flex for extraction but I directly give margin button oops of course top not bottom okay let's create other commands for the design purpose and let's see it looks pretty nice so what about responsive design as you can see there is no problem here but actually I can decrease this size at the very beginning there is no problem but after the first breakpoint it's still too big let's actually open our page style here single page and commands Okay let's click create media screen the biggest screen is going to affect our title and font size will be 54. okay when it's smaller it's going to be much smaller other breakpoint let's say 48 and for other one let's see first actually for other one I can drag the remove this image so I'll say image container and display no like that perfect and for here I can decrease a little bit more and this is too big also so let's say title font size 36. and description 18. okay it's still big okay it's description and of course P tag okay perfect I have all the comments as you can see there is no problem I don't have to change anything it looks really nice okay so what about this login page as you can see it's acting like it's a single page because we didn't create our login page let's close them inside app directory I will say login page jsx I will say login page and module styles from this login page okay firstly I'm going to create another div it's going to be wrapper basically it's going to be a small box that I will Center inside this container and inside I'm gonna just create three divs and that's a social button it's gonna be Google GitHub and what else it can be let's say Facebook and let's give different class names or we can directly use first child second and third child doesn't matter let's do it like that so let's come here and I will say display Flex align item Center justify contact center so our books will be centered let's give margin here okay and for the wrapper I'm gonna give a background color let's say soft color so PG like that of course we don't have any padding and we can't see it let's give a hundred for each item I'm gonna give some Gap maybe I can increase this padding and give more space for left and right okay and Border radius let's say time picks us so what about those items social button I will do padding border radius will be 5 pixels border known and background color actually I'm going to give different background color for each one let's say color white font fate will be bought and we can click on them and for the first item first child it's going to be a Google button so a background color will be something orange let's try this one okay awesome by the way I can Center my items justify content Center okay perfect for this one it can be black Maybe so actually let's use and child is going to be second child and I will say black okay there is too much space I'm gonna decrease it but for now it can stay I'll say Facebook I mean the third child or you can directly use last child okay and maybe I can soften this and okay it's gonna be let's say 50. okay it looks nice there is nothing fancy let's check the responsiveness as you can see the padding is too much for this point I can decrease media query our breakpoint and wrapper will be what was our padding okay maybe 50 and 100 perfect if I get more maybe I can decrease this font size and this padding again so if it's 640 padding will be let's say 30 pixels like that and I can decrease this don't wait font size okay perfect and we have one more page to create if we are logged in let's open up our authentication link component and it's going to be authenticated and as you can see there's a right page so let's create this page inside app directory I'll say right module dot CSS by the way we are creating page not component be careful here it has to be page and let's call our style module.css actually let's see right page so it will be easier to find okay so let's see what we have here as you can see it's just like medium.com we have an input here that we can add our title and we can write our text here and the best thing is we can select any text here and as you can see we have some options we can make it bold we can add here any link I'll enter as you can see it's here or I can make it bigger I can add here any code and here we have a button that we can add any image external image or a video everything is minimal everything is pretty clean and we have a button here that we can publish our post so let's create this inside my container I will create my input after that we are going to have a container that contains this button and this text editor let's do that I will come here and say input I will give placeholder and it's going to be title let's create our editor we are going to have a button here last name will be button and inside I'm gonna have an image basically it's going to be this plus which and after we are going to create one more container that contains those green buttons and each button has different images inside okay I will say plus PNG let's give size by the way let's import this and before creating other buttons I'm going to create here a use state that because we are not going to see this container at the beginning we are going to open that container only when we click here we can open or close open set open use state and it's going to be false and I will say if it's open create here edu and it's going to be let's say add and inside this we are going to have three buttons I'll say image external video let's change their class names I'll say add button because they are going to be green and after that finally we can create our text area but we are not gonna use directly html text area by the way we are going to make this component a client-side component and to create this Editor to give all these HTML elements we are gonna need a library it's a great Library let's open up our terminal and I will say yarn at react Queen okay let's make this use client I'm gonna add here my library and its CSS file it's inside our library but we have to import this otherwise we cannot see its Style and let's use it after this I'll say react quill I'm gonna give here a team name and it's going to be bubble and when we change our text we should set it somewhere so I'm going to create one more State and it's going to be value at the beginning is going to be an empty string when we change our text we are going to update this state firstly let's say value equals value and on change event will be changing our state I can give any placeholder here tell your story let's see our text editor is here but we cannot see it if you come here and inspect your HTML element you are going to see that our editor is inside Cloud container and editor so basically we can open our Global CSS and edit any of these classes let's open up Global CSS and I will say Quail container firstly I'm going to increase its size and finally I'm gonna change the color of placeholder to do that I'm going to say quill and inside container coil editor growl blank again I'm not memorizing anything I'm just inspecting and finding what I need so don't worry about here I'll say before and I'm gonna change its color it's going to be this gray color just like this but we couldn't apply here let's make this important uh perfect awesome it works so let's give a style for others firstly when I click here I'm going to open up my div let's close here and I will say on click event and set open will be the opposite of open just like this okay we are ready to give Style let me make this bigger firstly I'm gonna make this editor display Flex gap between that button and our editor will be 20 pixels and let's give a height okay it looks weird but we are gonna handle that we don't have any width right now let's give a style for our editor here I'll say class name Styles dot let's say text area I can give additional class name and I will say a hundred percent okay so what about this button we have a button and add button their style will be same but for those buttons additionally I'm gonna give a color so let's come here and say button add button I'm gonna give a size it's going to be a circle let's delete those background colors transparent I'm gonna give border and it's gonna be one pixel solid and text color let's enter our images just like this of course we can click here so I'll say cursor pointer and for those buttons border color will be this green color just like this let's give a style for them I will say display flex and gap between items will be 20 pixels I'm gonna give background color is going to be PG and its Position will be absolute because it's going to be over our editor and as you can see our text is over this deal to prevent this I'm going to give c Index and let's give it and I'm gonna give left it's not showing up somewhere here because we didn't give position relative for the parents and perfect so what about this input did I give you class name or not okay let's give Styles dot input I will give a really big padding and font size will be 64 pixels I'm gonna delete the Border and outline and the background color will be transparent just like this so let's change this placeholder it's going to be exactly the same color foreign placeholder color will be our gray color and finally I can create here a button that we can submit our post I will say publish and class name will be Styles dot publish let's write it here again it's going to be absolute positioning I will say top 30 right 20. let's give some padding round top and bottom left and right and I'm going to delete the Border like that let's give a background color and the text color will be white and finally cursor pointer okay I can give both the radius okay perfect right now we have our pages and components and we are ready to communicate with the backend API our API will be connected to a mongodb to do that we are going to use Prisma orm it allows us to create our database schema and make route operations and the best thing is you can use any database provider like postgres MySQL or whatever you want because thanks to Prisma the syntax is independent of any database we will send an API request and the API route is going to take the request and pass it to Prisma and it's going to make the database query let's say find a post by ID and it will get the result and send it to our API and we will get the response let's see which tables we are going to use for this database I'm gonna paste my schema as you can see we will have a user table and a user can have multiple posts and comments and in the same way a post can have multiple comments but each post has only one category of course you can change here you can make the relation many to many so let's create our API route and complete the database connection right now our design is ready let's create our API and hatch all these data and add new data using this component but before that we should handle our Authentication if we are not authenticated we won't be able to see this page okay I'm gonna come here and close everything and let me explain what we are gonna do so I'm going to open up the official website of authjs and let's get started I'm gonna choose oauth Authentication and here firstly we are going to install our library I'm going to open up my terminal yarn at next auth and after that in the API folder we are going to create this auth folder and after we are going to create our route but this page was prepared for next.js pages that we are using App router so instead of this file we are going to create one more folder and after we will create our route file let's open up app folder and I'm going to create my API and inside I'll say auth one more folder is going to be next off why we are using it like that because we don't have to create all of these endpoints one by one we are just creating our next off endpoint just like this and it handles all these sub endpoints and inside this folder let's create our API route and inside as you can see we are going to create our next auth function and we will add all the providers that we are going to use in our example we will use GitHub provider and Google provider let's paste this here and I'm going to add one more and it's going to be Google provider let's import that okay of course you can write all your options here but I prefer creating another file let's open up our utilities okay we didn't create let's create and inside I'll say auth.js and I'm gonna write all these options here let's cut this and I will say export const options like that and let's import them okay I can call this here and let's wrap our application with our next auth provider to do that I'm going to open up my providers folder new file and I will say auth provider let's create our function it's going to take a children just like this and I'm going to write here session provider and it's going to come from next auth react of course it's a provider it's gonna be use client and let's use it in our layout somewhere here let's import okay and there's something wrong here because we didn't import it's not warning me there is something wrong with my settings okay anyway let's see I'm gonna open up my login page and I'm gonna try to login with Google to do that we are going to need some configuration I'm going to open up cloud.google.com let's open up console and in this console if you don't have any project just create a new project and after choose apis and services and here I'm going to choose credentials and I'm going to create a new credential it's going to be all off application type will be web application you can give any name here I will say block app I'm going to add my URL localhost 3000 but remember when you deploy your application you have to change this URL you are going to see at the end of the video and here again localhost 3000 but I'm going to write here my endpoint it's going to be API auth and callback and Google our API route off and as you can see it handles this endpoint we didn't have to create here anything this is why we are using this folder and I'll say create and as you can see we have a client ID and client secret let's copy them and open up our EMV file we don't have yet let's create let's close this Source folder make sure that you are creating in your route not inside source folder I will say dot EMB and I'm going to paste my client ID and let's remember what was the name Google ID and Google secrets and one more is going to be secret and I'm gonna paste here my client Secret so let's open up our login page and see what's gonna happen I'm gonna come here and say const data and status I'll say use session hook and let's console log this data and status and when I click on this Google button on click event I will say sign in as you can see there's a function it comes from next or react by the way equals and I'm gonna write here my provider name as you can see there are many options but we are going to be using Google by the way we are using use session hook in this case our component should be a client component use client I'm going to open my application and my console and as you can see there is a problem here and it says you should add next auth URL to your eme file let's add that it's going to be our localhost and the port number and also I'm going to add here next of Secrets and we are using this secret ID to create session tokens you can write here any random ID for now let's say my secret ID of course you should generate a complex secret but for now for the tutorial purpose it can stay like that and that's all by the way if you are using next.js route you should provide here which method you are using you can use get method pause method put method but to take the request you should provide this first for the authentication we are going to be using both get and post methods so actually right here const Handler and I'm gonna export this as get methods and as post methods normally when we create a route we are taking our requests just like this export for example post methods and we are taking any request making some operations and returning a response but in this case our library is going to handle everything for us we don't have to create get and post methods one by one and let's check I'm gonna refresh the page as you can see by the way I forgot deleting this let's open up team toggle and remove that and as you realize at the beginning our data is undefined and the status is loading and after as we didn't log in our data is now we don't have any user and the status is unauthenticated but if I click here and authenticate I'm going to choose my account here and as you can see we have an user here and it has email image and name and the status is authenticated right now even if I refresh the page my user will stay and when I click on this button we are gonna log out so let's open up our component remember it's here when I click on this button I'm gonna call sign out function here let's try I'll click as you can see this is what I want so what I want to do is using this status and restricting my login page if I'm authenticated if there is a user we shouldn't see this page anymore so let's close everything and open up login page Now using this status I'm gonna write here a condition I'll say if status is let's use loading first if it's loading return including two and I'll say just loading you can give any style for this and one more and I will say if it's authenticated we shouldn't see this page anymore and we are going to be redirected to home page to do that we are going to need use router hook I'll say const rather use router but it's gonna come from navigation because we are not using next.js Pages anymore using this rather I'm going to push my user to the home page as you can see there is no problem we can see this page but if I click here and login as you can see we are in the home page okay perfect right now we have user in our client side but we are not actually storing that user anywhere let's create our user in our database using mongodb and Prisma to do that I'm going to open up cloud.mongodb.com and I'm going to create a new database I'm going to choose the free version you can choose any provider here and you can choose wherever you want and the cluster name will be cluster0 let's create no I hate this okay I'm gonna write here any username Lama Dev it's going to be exactly the same create user and here when you deploy your application you should add here your server address but for now for the testing purpose I'm gonna write here four zeros and it means allow anywhere so we will be able to reach our database from any IPA address but it doesn't mean everyone can read and write any data they don't know our username and password okay let's finish and close let's click on connect I'm going to choose drivers and it's going to be node.js application you can install mongodb and make your crude operations using this but we are going to be using Prisma so I will just need this URL let's open up our eme file we are hiding all our secrets here I will say bongo and it's going to be this URL I'm gonna add my password it's gonna be lamadev and I'm gonna write here any database name let's say block right now using Prisma and this URL I'm gonna add my user to my database let's open up our documentation and okay it's not here I'm going to open up the old documentation okay it's here as you can see there are many options but we are going to be using Prisma to do that we are gonna need those libraries I'm going to open up my terminal and install that of course yarn add or npm install and finally this Prisma okay during this process let's see what we are gonna need as you can see when we create our authentication function only thing I should do is add here a Prisma adapter and after that in the Prisma schema we should add our models like account session user and token I recommend you copy and paste this schema directly that because this adapter is gonna handle our user accounts and tokens automatically we don't have to do anything for example in our application when I log in with Google log out and login with another provider and if you are using the same email you don't have to create a new user this adapter is just creating a new account as you can see there's a provider property here and it stores all our providers here it's not creating new user and it handles all these sessions and verification tokens so let's create our Prisma schema and add them there I will say yarn at Prisma and I'm gonna copy here as you can see we have a database URL we are going to add our mongodb URL here let's initialize our Prisma first I will say MPX Prisma in it and I can add here my database provider I will say data source provider and it's going to be mongodb let's open up our menu and as you can see we have a new folder here it automatically creates this folder and this schema and inside as you can see we have our client and database and we should add our database into this URL let's open up our eme as you can see it just added by itself I'm just gonna change this URL remember it's here that's paste and I can't delete here and this okay right now I can paste my code okay we already have our client and DB I'm just gonna copy and paste here and as you can see there is a problem here because we are using mongodb and it stores IDs with this underscore if you are using any other database probably they are just using ID but if you are using mongodb you should use this annotation for your IDs and we don't need those texts I'm going to delete them but before let's add them here and this is our ID in this case I will say first ID and after map ID okay let's delete those and that's all Let's test I will log out by the way it's not changing that because we didn't write our condition if you remember we are using this temporary status right now we don't need that I'm just gonna use use session hook like that and it's not not authenticated it's going to be unauthenticated and as you can see our login button is here but before let's add our adapter let's see here as you can see we are gonna need this adapter and we are going to add our Prisma client that's important just like this and I'm going to generate my prismas schema to do that I will say MPX Prisma generate if you are using any relational database you should use MPX Prisma migrate and if you are using mongodb you should generate your models first let's check by the way instead of using this please my client again and again because we are going to make a lot of crude operations and we shouldn't create multiple clients to prevent this I'm going to be using this code basically if we are in the development mode it's going to check whether we have created our client before or not if we have created it's gonna use it it's the typescript version I'm going to create the JavaScript version let's open up our utils and inside I'll say connect and I'm gonna paste it here you can find this code in the GitHub repository right now I'm gonna use this Prisma function like that and let's try I'm gonna refresh let's sign in okay let's check here I'm gonna refresh the page and as you can see we have a database and inside we have account session and our user name email and image perfect as you can see it uses underscore and we can use this dashboard but there's an awesome feature of Prisma let's open up new terminal here MPX Prisma Studio in this address we are going to have our Prisma Studio as you can see let me zoom in perfect so what else we can do I can do the same thing for writing page I'm going to open up right page and paste it here of course they can't be conditional I'm gonna move this here and let's import them next navigation and use session okay we don't need data right now I'm going to close everything here and I'm gonna create my other models so I'm going to scroll all the way down and here firstly I'm gonna create my category model and it's going to have an ID and it will be a string I will mark this as ID and by default I'm going to generate a new ID using this method it's going to create a unique ID and remember if you are using mongodb you should add here underscore ID and each category has a slack it's going to be a string and unique make sure that it's Unique because we are going to use it in our posts and let's say title string and we are going to have some images actually it's not required I can write here question mark and we are going to have some posts but we don't have our post model yet let's duplicate this and I will say post model it's going to have ID slack title and we are going to have a description image and let's say views it's going to be an integer and by default it's going to be 0 and when we visit our post in our browser we are gonna increase this View and right now we have post we can edit here and I will say post array in this case I can add my category here let's say cat is going to be category and I'm going to add here a relation and I'm gonna connect my post model and category model so how I'm gonna connect them firstly I'm going to create here a cat Slack and it's going to be a string and I can check this cat slack and this slack and if they are equal it means they are related so I will say Fields is going to be cat slack and the reference inside this category will be slack okay and right now each category can have different posts and each post has only one category and also each post has a user I will do the same thing here I'll say user email we are going to use this email because remember when we login inside our data we have our username email and the user image we can directly reach that email using use session hook this is why we are not using user ID and I will say user is going to be user relationship we are going to check the user email and the reference will be email and there is a problem here because the Foreigner key is not unique let's come here okay it's Unique but it's not required every user has to have an email and it has to be unique okay and what else let's create our comments I will say command again ID you don't need slack we are going to need a title actually let's say description not title we don't need any image or views we don't have any category we are gonna need a user and also we are gonna need our post so I'm gonna duplicate here and we are going to check the post Slack pause slack and it's going to be Slack let's check here right now I can add my comments it's going to be command array okay there is a problem because I said user is going to be paused okay each user can have a post list and comment list and each post can have some comments and also we can add here created add date because we are going to need it I will say created at is going to be a date time and by default it's going to take the current date just like this I can do the same thing for post and I hope everything is okay if it's not we can come here and regenerate our items let's generate and I'm gonna restart my Prisma studio and let's try to create for example our categories I'm going to open up my API and create a new folder and it's going to be categories I'm going to create my route and I'm gonna try to fetch all my categories to do that I will create a get method export const get is going to be an async function and I will write here try catch methods if there is an error I can console lock this error and also I can send it to my user return new next response I will say Json stringify I'm going to send my message here you can send any object something went wrong and I can send here a status inside an object and it's going to be 500 a server error and let's try to find all of our categories I will say const categories wait Prisma dot category remember the name is category and I will say find mini basically it's gonna find all the categories and finally we can send it to our user let me duplicate this and move it here in this case it's going to be successful to 100 and I will drag the past my categories that I've hatched here okay by the way let's import this Prisma there is something wrong with my yes code okay let's try I'm gonna come here and say API categories as you can see it's an empty array let's open up our studio I'm gonna refresh here all our models are here and let's create our categories I will add record let's try I'm gonna refresh and it's here perfect right now using this endpoint I have hatch my categories but before let's add others okay let's open up our home page and in this component by the way let me zoom out a hundred percent okay inside this component I'm gonna fetch my data let's open up category list and let's create here our function I will say const get data is going to be async and I'll say const response await I will call to fetch function and my endpoint here API categories and I can write my options here and I will say cache no store because by default next.js is caching your requests but I don't want to do that because it's just a tutorial and I wanna always show you to fresh data of course they are not changing in this situation the better option is using cache but in case of making any changes for the tutorial I just want to see it directly this is why I'm not caching okay and after that I will say if response is okay actually if it's not okay I will throw error or you can send any message I'll just say failed if it's not finally we can return response and Json let's call this function here of course it should be async cons theta equals a weight and our function let's use this data here let's remove them and I'm going to leave only one of them and I'm gonna map to my data if there is data take all items and return this link like that and there's a warning because we are using a map in this case we should provide here a unique key and I'll say key item dot ID but remember in mongodb we are using underscore ID let's see okay it's not attractive fetching our URL I will write here perfect as you can see six items it means it works let's use their images foreign titles item dot title item Dot and also I can change here styles item dot Slack perfect and I can write here a condition if there's an image because it's not required remember if there is an image okay as you can see it's that easy guys I can do the same thing for these posts let's open up I'm gonna copy here and open up my card list and I will paste it here in this case it's going to be posts and let's call this function here I will say async constella get data of course await but we don't have our endpoint yet let's create inside API I will say posts and I'm going to do exactly the same thing let's paste here again get methods in this case is going to be posts and it's going to check our post model but there is something different here because in our example we are going to need this pagination we are going to fetch only four items if you are using client components it's really easy you can just store a number starting from one and when you click a button you can just increase that state and fetch items but if you are using server-side rendering to reach that page number we are going to be using search params for example at the beginning we are not going to have any query here in this case the page number will be one and when I click on this button I'm gonna drag the create here a page query and I'm going to increase that number it was one it's gonna be two and if I click here it's gonna be one again if I click here it's going to be three of course we are gonna check if we have more items or not we are going to create all these functionalities but before let's take this page query in our home page and pass it to our component so I'm going to open up my home page where is my home page I'm going to close them okay here and I will say get the search problems and I will create a page here and I will say if there is a search params and Page take it if it's not write it one and at the beginning as I said we don't have any page in this case it's gonna be one and of course it says string it should be a number I will just use parse integer and pass it my string and right now I can pass my page here just like that so let's take these props here where is our cart list here and I'm gonna pass this page to my fetching function I'm going to take it here and write it as a query page equals page of course it should be a package we are using JavaScript here and inside my route I'm gonna make some changes firstly I want to decide how many posts I want to show to user I'll say const post per page so let's say to for example and right now I'm gonna get my page number remember we are hiding this inside our request and in this URL we have our page let's get our search params First const search prompts new URL and I'm gonna pass here request URL and inside this search params we have our page const page search params.get and page right now we have the page number and post per page so what I'm gonna do is writing here my option I will just say take only post per page he's gonna get only two items of course it's an option and I will say skip post per page multiply by Page minus one why I'm doing this because at the beginning remember our page number is one one minus one is zero If I multiply this by post per page is going to be zero it means we are not gonna skip any post we are going to start from zero and we are gonna take only two items and when we click on that by the way it's not working because we didn't complete it yet but imagine where the next button here when I click that the page number will be 2 in this case 2 minus one is going to be one If I multiply them it's going to be 2 and it means we are gonna skip first two and we are going to take two items it works like that it's really easy I'm Gonna Save and let's open up our page and I'm gonna open up my studio and create some posts for the test purpose I'll set posts by the way it's raining too much I hope sound is not coming to you actually I can take a break okay I'm taking break and I'll see you soon okay guys I'm back during this break I just created some posts their titles are from one to six and I gave some categories and let's fetch this data I'm gonna come here and I'm gonna show my posts okay using this data I can call this card component map if there's a data map through this data and take items and show a cut let's remove others I should add here a unique key remember item dots ID but it's not an HTML element I should use it inside my card component I will take that key and use it here okay and also I'm gonna pass my item item equals item and using this prop I can show item dot title let's see if I forgot dot here as you can see only two items if I click here I'm gonna update my page let's do that I'm going to open up my component what was the name pagination okay here so it's gonna be a client component use client and using use rather hook let's say const rather from next navigation I'm gonna update my page but before I should take this as a prop let's open up cart list and I'm gonna paste my page and if I click here on click event I'm gonna use my router push and I'm just going to add here a query and Page will be Page Plus One let me close this menu and I can do the same thing for other when I click it's gonna be -1 let's try I will click as you can see we are in the page two right now and we have three and four if I click more five and six but there is a problem here if I click more it's going to default page but we don't have any item so I have to check if I have previous and next items if we don't have I'm gonna disable this and I will do the same thing for this one as next let's give a style for them I will say if button is disabled I'm gonna change its color it was Crimson but I'm just gonna decrease its opacity and cursor will be not allowed but how we are gonna take them let's come back and create here as previews and next I will say const as previous and next and I'm gonna pass them here okay but how we are going to make this decision firstly I'm gonna need post per page you can make this calculation in the API but doesn't matter we can do it here also remember it was two and I have a page here and I can say if post per page multiply by Page minus one bigger than zero for example for the first page 1 minus 1 is going to be 0 0 multiplied by whatever is going to be zero doesn't matter and it's not bigger than zero in this case it's gonna be disabled but for this one we are gonna need the total number of our posts because we are gonna check if we have more posts or not so how we are gonna get this count I can come here and write another operation and I can say count equals Prisma post and count but I don't want to do that I wanna make everything in just one request to do that I'm gonna use transaction methods and inside these methods I can call multiple queries so firstly we are gonna find our all posts and secondly we are gonna find the count of those posts in this case we are going to have two items first one will be posts and second one will be count let's say Prisma post find mini and second one will be count of course we don't need post here it's going to be transaction and it's not going to be an object it's going to be an array just like this but we don't have our Curry here let's create constant query and remember we are taking two items and skipping this amount of items let's use it here okay right now I can send my posts and also discount let's use it here right now we don't have only posts we have posts and also account in this case this data will be posts and right now I can write my condition I will say pause per page again multiply by Page minus one and plus pause per page and I'm gonna check if it's smaller than count or not if it's it means we have more items if not we are gonna disable that button let's calculate at the beginning we have six items and our page number is one in this case this expression will be zero plus 2 will be 2 and 2 is smaller than 6. in this case it's gonna be true let's see I'm gonna come here as you can see our cursor has changed but background color there is something wrong there I'm going to open up my CSS oh I said border it's gonna be background okay if I click here right now as you can see we have previous perfect and in this case we can't click here anymore but we can come back it's that easy right now we are gonna make something different if you remember we have block pages and we can search for in a category here for example if I click it's going to open up this page and again yeah I'm gonna pass our page here page number and also we are gonna pass this category let's do that let's close everything here and open up blog page I'm gonna take the search params and again I'm going to create page integer search params.page if it doesn't exist it's going to be one and I'm gonna search for one more thing and it's gonna be my category let's actually structure this like that and right now I can pass them to my card list by the way I can change here cat block and I can capitalize this let's open up title and I will say text transform capitalize that's all and as you can see we have items but we are not fetching based on this category let's handle that I'm going to open up my card list am and I'm gonna take category but it's not required in the home page we are not going to have any category but for this page we are gonna pass it in this case I can pass it to my API request and I will say and category equals category but if it doesn't exist it's going to be empty or you can do the same thing here if it doesn't exist you can say empty string right now I'm gonna take this category in my API route remember we have page here I will do the same thing for category and I'm gonna add here a condition and it's going to be where and I will say if there is a category cat slack will be this category because remember in our schema post has a category slack we are gonna fetch all these posts if they belong to this category I'm writing this condition because if I drag to say cats like equals category is going to give an error because remember it's not required we are calling this only in this page this is why I'm using it like that and I should use this query here also but remember we are counting our posts so I'm just gonna need this part otherwise it's going to take only two items in this case it's gonna give us two all the time I don't want to do that so I will say where and I'm gonna take only this part of this query so I will say query dot where let's check as you can see there is only one item by the way we didn't change here let's open up our cart we changed only this title I will copy this and change here item dot created at but if I say this as you can see it shows the full date I'm just gonna take this first 10 items to do that I'm gonna use substring method start from 0 and take first 10 items okay let's change here item Dot cat Slack if I say food for example he's gonna fetch this data fourth item and it's awesome because it's really important for SEO when search engines visit this page they are gonna see this server-side rendered page and it's the same thing for our Pages they can index those pages page 1 page two and if you have any blog page or e-commerce page you are gonna see that how useful they are and what else let's take care of single posts when I click here it's going to open up the single page I'm going to close here block we have slack here but we don't have posts actually let's create posts page it's going to be easier I'm gonna move this slack here and by the way let's continue changing them I will say item dot image and of course if there is an image because it's not required and this description I can do the same thing here because description will be really long I'm going to use substring and I'm gonna take let's say first 60 items and when I click here finally we are going to open up post page and item dot slack and I will do the same thing for this title where is our Title Here okay as you can see we don't have any image actually instead of this image I can write my condition here so it's not gonna show this container perfect and when I click here it's going to show up our post page right now let's create our endpoint for this single page and fetch our item let's close everything inside API posts I will copy this and create my Slack and paste and I will say get single post in this case we can take our params here we don't need search params any of them let's remove all of these and I'm gonna take my slack first I'll say const slack is going to come from params remember we are using this slack here this is how we can reach it and using this slack I'm gonna search my post I will say const post wait Prisma dot post and I will say find unique and I will write here my condition where slack will be R slack so if you are using the same name you don't have to write it like that you can keep it like this and I'm gonna pass this post here and let's fetch our item I'm going to come here let's close here and I'm going to make this async function and I'm gonna do exactly the same thing let's copy here and paste get data we are going to need our slack and we are going to take this using params const Slack equals params and using this slug we can call our function get data and Slack Now using this slack we can make API request and I'm gonna pass this slide here of course like that and it's going to return us a data and using this data let's write our title image first I'm going to write my condition if there is an image show it here and we are going to handle here later and if you remember we have a description container here and it includes any HTML element it can be P tag H1 tag whatever so what I'm gonna do is instead of writing here data dot description I'm gonna self-close this div and I'm gonna add dangerously set inner HTML because remember in our example we are using this editor so we can pass any paragraphs or bold items or H1 tag or whatever to show them here we are gonna need this item I will say underscore HTML description of course you can use here any library to make this operation more secure but for now I'm gonna leave it like that but after we are gonna need a library basically that can be only P tag Adder tag something related to text nothing else okay and I will save and it's here but this image is still here there is something wrong oh it's a user image I'm sorry it's gonna be this image if data dot image exists just like this okay but what about this user when we've hatched this post shoot with hatch also this user and pass it here you don't have to do that it's really easy to handle I'm just gonna come here and just say include user true I can do this because in our model we have user inside post there is a relationship between them so I can easily take my post with their user in this case I can update my user easily let's come here and I will just say item user and username oops not item data as you can see it's here and I can change my image it was here remember and I will say if user image exists okay it's not here let's see our users okay it's image and right now there's a problem because nexjs doesn't allow us to use this URL is an external URL to prevent this I will basically copy this URL and open up my settings next config and right here my option is going to be images domains and I will add my domain here if you make any changes in this config file you should restart your application as you can see it's not working anymore I will refresh okay it's because of this subdomain and perfect I should check for this can I use it like that or not I'm not sure I'm just gonna leave it like that and right now we can fetch our comments and add a new comment let's create our endpoint quickly I will copy this and create new endpoint it's going to be comments and I'm gonna paste it here get all comments of a post we don't need perms but we are going to need our post ID because we are going to fetch all these commands using this post slag so let's create search params new URL request.url and I'll say const Slack it's gonna be let's say post slack again basically we are going to pass this slack as a query and we are going to take it and search for our comments I will see command find mini where and inside I'm going to write my condition remember how we are doing this if there is a post Slack just use it and again we are going to take the user and finally we are going to send these comments like this remember in our schema we have posts like we are going to search for it I will close here okay let's do that I'm gonna close them and open up my commands component I'm gonna make here something different because it's going to be a client-side component use client we don't need here SEO or something and then we add new command we are going to see it here immediately so basically I'm gonna fetch my items on the client side to do that you can use use effect but I recommend you to use react query or SWR I really love SWR it's really easy to use and it's really lightweight I'll say yarn at SWR and let's call this hook I'll say import use SWR from SWR okay as you can see there is a temporary status here instead of this I can use use session hook this is the another reason why we are using use client because if you are not logged in we are not going to see this input and after I'm gonna fetch my data const data and is loading use SWR and here I'm going to write my endpoint API commands and remember we have to pass here post Slack and we are going to take this as a prop like that let's open up our single post page here and I'm gonna pass this Slack to my comments okay and we should write here any fetching method you can use axials you can use JavaScript fetch so let's define this here I'll say const Patcher is going to be an async function const response await I'm just gonna drag to use fetch methods and I'm gonna pass my URL here and after I'm gonna get my data await response dot Json and I will say if response is not okay draw an error and I'm gonna show my message so I will say const error remember we are sending a message here I can take it and throw that error data Dot message and just draw this and finally return data so I can use this fetcher here by the way I didn't close this backtick okay let's use it here we have many comments I'm just gonna delete all of them it's gonna be only one of them I'll say if it's looting right here loading if it's not mapped through this data and show this comment of course we don't have unique key it's going to be Item ID let's use this item here if you remember we are fetching this with our user item dot user dot name created at and description and user image foreign as you can see we don't have any comment yet let's create we are using this post I'm gonna come here open up comments add record first comment and I'm going to choose a user here we have only one user and I'm gonna choose my post five this one let's save I'm gonna refresh okay there's something wrong we couldn't pass this slack item in our single page we have pulse Slack we are passing this here and taking that slug okay it's gonna be post Slack okay inside our API we can't get this post slack it's undefined let's check this okay it's five but by the way SWR trying to refetch this that's because there's an error this is the other benefit of using SWR okay we are sending our post slack but let's console log this I'm gonna comment this out because it's really long I will refresh no because of this capital letter I think foreign I wasted your time and okay cool it works if I check other page as you can see it's empty by the way there is something wrong here we are logged in but we can't see our input here authenticated it should be of course this structured I can delete this okay right now I'm gonna store my text here and when I click here I'm gonna create a new comment and I'm gonna show it here immediately let's create our endpoint I will create one more and I'll say create a comment it's going to be a post method and firstly I have to verify my user of course we are hiding this but someone can use our API we cannot trust users we have to verify them on the server side so basically I'm gonna need the user session here if you are using next auth it's really easy if you remember we have an option here and also I can export one more thing and it's gonna be a server side sessions let's say get off session get server session function as you can see here and I'm gonna pass here my options auth options so I can use this function and I can reach to my user so firstly I will say const session import this and I will say if there is no user I mean if there is no session we are not allowed to create new comment in this case we are going to return an error and it's going to be 401. foreign ticated if there is a session it means we are authenticated in this case we can take our body and create a new comment let's do that I will delete this and I will say const body weight request and Json and after that I will say comment Prisma comment and create let's delete this and I'm gonna pass here my data I can drag to say body but I'm going to add some additional information so I will say take everything inside this body but additionally add here user email and we are going to take it from our session as you can see we are not taking our user from client-side we are doing everything in the back end and our application is really secure right now I will save and let's use it here firstly I'm gonna store my description let's write it here const description set description use statehook at the beginning it's going to be empty and when I change here on change event it's gonna set my state event Target value let me close this sidebar okay and finally when I click on this button I'm going to call handle submit const handle submit is going to be async function we are going to make a request and I will say oh wait fetch API commands and I'm gonna write here my method is going to be a post method and inside body I'm gonna send my description to do that I will say Json stringify and I will pass my description but I'm gonna pass one more thing so let's say description and also post Slack because when we create any comment we have to pass this post Slack okay this is the single page I will close this and finally when we add our new comment I want to see it here to do that we are going to revalidate this data it's really easy I will just come here and say mutate and after the successful operation I'm gonna call this function let's see I hope everything is okay I will say second sent if I refresh the page okay let's open up this error and let's see what's going on oh there is something wrong here oh I forgot here await it's an async function let's try again and it's here okay perfect so what else we have only writing function by the way it redirects me to the home page there is something wrong let me close everything and open up right page oh I said authenticated it's going to be unauthenticated okay right now I'm gonna store my title this text and also my file so let's create some new States so firstly I'm gonna create my endpoint I will do exactly the same thing I can copy this and paste for my post I will say create a post again I'm gonna check my session if it doesn't exist we are going to return this error and I will say post and here we are going to take Buddy user email again and that's all let's use it here firstly I'm gonna store my items of course it can't be conditional so I'm gonna move it here and firstly I will say file set file new state at the beginning it's going to be no basically when we add here any item I'm gonna update this file for these items I'm gonna create an input and its type will be file and I will give an ID let's say file or image and I will say on change event and I'm gonna set my file event Target files that I'm gonna take only one file single file is gonna be the first item like that but I don't want to see this input instead I'm gonna make this a label and when I click here it's gonna automatically choose this file input to do that I will say inner style and let's say display known okay it's not here anymore and I'm gonna create here a label and html4 will be our input ID which is image actually let's move this here and I click as you can see it's opening file if I choose edit icon here it's going to update my state and I will create here a user fact and I will basically say if file changes directly upload it to firestore to do that I'm going to open up firebase.google.com you can add here a new project that's right block I don't need any Analytics it's going to create our project and we are going to use the Firebase storage you can use any other uploading service but in this project I just preferred using Firebase and using Firebase doesn't mean we are going to use Firebase database or any other thing it's a huge platform that has a storage service database service so we are just using storage okay I'm going to come here let's say block again and let's install Firebase and add Firebase let's initialize our application inside utils I will see Firebase and paste it here of course we can hide our API key let's say process Envy Firebase okay let me close this and using this app we can use our storage let's come here build as you can see many services we are just going to use storage it's going to be test mode you can choose any location by the way let me close everything here I've opened too many tabs I hope it didn't affect my recording let me close here and let's create our user fact I will say if file changes call this function const upload and we are gonna upload our file here and I will say if file call this function because at the beginning is going to be null it's not going to fire this function if we choose any file it's gonna run this upload function see how we can do this I just open documentation and here there is an awesome example that includes everything we need here as you can see we can upload our file and we can listen its status we can show to user our progress if we cancel we can show it to User it's really useful of course I'm not gonna use all these features I'm just going to upload my image and take the URL let's copy this and paste here I'm gonna import them and I'm gonna initialize my storage let's do it somewhere here and if you remember we created our application where is our Firebase here okay I didn't export I can use this app perfect and I'm gonna delete those comments as you can see we are using our storage and here we are passing any file name in our case we can directly use our file.name but if we do this and if you try to upload exactly the same image it's going to have the same name to prevent this it should be unique I generally prefer creating here a new date let's say const name or unit name I'll say new date yeah time is going to give us a timestamp and finally file dot name I can use it here and if everything is okay it's gonna give us the download URL we can use it and update our state let's create one more state let's say media set media at the beginning it's going to be an empty string and we have our image we have our description and we are going to have our title okay we already set this description remember we are using this library and it's changing our value and also I can change my title on change events set title and finally when we upload this image I'm gonna set my media download URL and after that finally when I click on this button we are gonna publish our post on click handle submit is going to be async const response weight fetch method I will say API posts and the method will be post an inside body I will say Json stringify I'm gonna pass my title I'm gonna pass my description but remember its value I'm gonna send my image and its media and also I'm gonna need a slack and I can actually transform this title into a slack to do that I'm gonna create here a function and I'm going to use some regular expression basically if we have a title like llama Dev it's going to transform this to something like that and this is going to be our Slack so let's use our Title Here and let's see I will say console log response I will say by the way its color is black there is our input here I will say color text color okay description I can choose any image let's choose this one and if I submit okay there is a problem let's open up our console and let's see what's going on okay our session is not defined let's come here and import this there's something wrong with my eslint it's not showing my errors okay publish 200 but it says there is an error oh category is missing I forgot I think here category how can I add this without destroying my design maybe somewhere here anyway I'm just gonna create here an input and after this tutorial I'm gonna change it and you can find it in the GitHub repository I really forgot that I'm so sorry and I don't want to make any design right now so after this I can say input placeholder category of course we should fetch our categories and create here a select because I can give here any random category it shouldn't be like that but as I said I just forgot it can be like that for now or actually I can say to do at category I'm gonna make this later but for now temporary I will just say travel for example let's publish and this time it says user is missing we have user user email we are using user email let's check post okay user email foreign Studio I'm gonna start this again let's open up post okay it's not here let's actually delete this folder and restart our application I'm gonna refresh here let's select this image title description and publish and again user is missing why is that thank you user is here our image okay guys it was not about the user it was about this cat Slack by mistake I added here cat it's gonna be cat slack and also I forgot this function brackets right now it's working as we expected let's write here any title I'm gonna choose any image here if you open your console you're gonna see that your image is being uploaded and I can write here in the description if I publish you are gonna see that your item is here now as you can see title and this is our Slack description and image of course I should add this domain also otherwise it's gonna give us an error let's say posts and title as you can see I'm gonna add this URL just like that let's refresh of course if you are making any change here you should restart your application and that's all I can add any comments I can see my item by the way when you visit this page you can increase your post view remember we created here where is our post here we have views and at the beginning it's zero and when we visit this page we can increase that number let's open up our endpoint here if you remember we are directly fetching this item and instead I'm gonna update my item and I'm gonna add here my data so I'm Gonna Change views and I will write here increment one so whenever I visit this page it's gonna update this post and it's gonna increment this property let's save and see I will refresh as you can see it's still fetching the data but if we check our post here I'm gonna refresh you're gonna see that the views is one again and two it's that easy so what you can do here if you remember we have a component here that we show the most popular blog posts you can open that component you can do as we always do just fetch posts using get data function and right here another query just like popular true or if you are using something else for example there is another data here editors pick what you can do you can open up your schema and add here editor pick or is featured whatever you want but I think you understood how to create endpoints how to fetch data I'm not gonna do exactly the same thing again and again and that's all so right now we can deploy our application I'm going to open up my whole Stinger panel and if you remember I created a server at the beginning of the video and right now I'm gonna create my application to do that I'm gonna click on panel access and this is my login URL it's going to be admin and my password and as you can see in this server we don't have any website let me zoom in I'm gonna add a website as you can see there are many options but in our project we are using node.js so I'm gonna choose this one if you have any domain you can edit here in my case I'm going to be using test.lamato and our node.js application is going to run on this port and let's create and it's ready I will click here you can see your configurations and here I'm gonna install a free SSL certificate to do that I'm gonna click here let's encrypt certificate make sure that you add your IPA address as a DNS record and after that you are gonna be ready to install and that's all if you are using Cloud panel everything is easier so I'm gonna open up my code and my terminal and I'm gonna build my application but there's a problem here let me show you I will say yarn build as you can see inside right page we have a problem and the source of this problem is react quill because in next.js all components are server-side components by default even if we write here use client at the beginning it's a server side component and during this transformation we can encounter some problems if you remember we had the same problem when we used local storage so how we are going to fix this I'm gonna remove this from here instead I'm gonna import my library dynamically so let's write it somewhere here I will use Dynamic import and I will say SSR false let's save and try and right now as you can see there is no problem we are ready to deploy our application to do that you can directly connect to your server and upload your files using git but we are using this panel we can use it directly I'm gonna come here file manager I'm gonna find my domain name and this is the main folder of my application I can upload my files here let's open up our folder and I'm going to choose everything you don't have to use git next.js or even note modules because we are going to build our application inside our server I'm gonna come here and say compress and I'm going to take this file drag and drop into my server let's open up this file I'll say extract I'm going to choose the main folder okay they are here right now I'm gonna connect to my server and build my application let's get back to the hpanel let's open up settings and here SSH keys I'm going to open up my terminal and create an SSH key I'm going to save it here you can give any password and it's ready to copy our key I'm gonna use this command by the way you can find all these commands in the description below you don't have to memorize anything and I'm gonna take this key and paste inside my SSH keys let's see llama Dev and paste here it's going to take a while just 20 seconds or something like that and after that we are ready to connect our server okay it's ready let's come back here and we can connect to our server using this command I will say yes enter my password and it's ready if you remember we have created our application here and the username is llama test I'm gonna come here and say llama test right now I'm inside my application let's find out hddocs let's see what's inside as you can see this is our website let's get inside and let's see okay our files are here right now I'm gonna install my libraries and I'm going to activate the production mode and I will say npm run build okay let's start our application npm start and let's visit our website and as you can see our application is here it works as we expected because remember in mongodb we didn't add any specific IPA address this is how we can fetch data you can basically open up mongodb and add your IP address I'm going to come here and I'm Gonna Change here and the IP will be my server IP in this case only my server will be able to access this data and also you should go ahead and change your authentication provider URLs if you remember we are using Google cloud and GitHub authentication you should go there and change the website address and not us if you quit this terminal you won't be able to reach your application anymore to prevent this we are going to be using pm2 let's say npm install pm2 latest and I'm going to install globally basically it allows us to start our applications automatically even if we restart our server it's gonna run to do that I will say pm2 start npm you can give here any name I'll say next app and start I will say pm2 save and that's all let's see as you can see it's still working and it allows us to fetch our data perfect okay that's all guys I hope you liked it if you learned something new today please like the video you can support normal day by joining the channel or using the link in the description below don't forget to follow Lama dev's social media accounts I hope I'll see you in the next tutorial goodbye

Channel: Lama Dev

Views: 161,078

Keywords: next.js, next.js tutorial, next.js 13, next.js app router, next.js project, next.js full stack app, next.js fullstack project, next.js mongo db, prisma, mongodb, auth.js, next auth, react, learn react, react next project, fullstack blog application, blog app tutorial, blog app design, html css, lama dev, react website, web design, context api, next js dark mode, next.js course

Id: DpYE5zPDRVQ

Length: 245min 53sec (14753 seconds)

Published: Mon Sep 04 2023