Build a Nuxt 3, Tailwind CSS Blog with WordPress Rest API | Deployed on Vercel

what is up people this is jahid welcome to the first official video of my channel I'm a big believer in projects project driven learning so that's the reason I'm starting this series and I hope uh you guys will uh love this series so this is the first video that's why I'm taking a little bit time to introduce myself and the introduction to the topic but from the next video one or you'll be just seeing me coding and doing the commentary so yeah if you are interested in this kind of stuff uh do uh subscribe this Channel and join me on my Discord server and there in that Community will be able to help each other and will be able to and grow together so let's see what we are going to build today so I have the deployed version of the blog that we are going to create today together so on the blog is basically our next three application and we are using Wordpress API to consume uh we are consuming WordPress API and and creating a static next application so first thing uh you can see we have the list of blogs and that these posts and this blog posts are coming from my of my blog API which is again an adjustable WordPress website I'm getting all the apis data and showing it using nox3 we have the all on blog page then if you click on here you'll have the single blog post and in their single blog post we have this kind of stuff we have images we have our our title date and all and then you have you'll have the category Pages inside category you will have the list of categories and so once you click on the project page we'll have the archive page inside archive page we'll have uh will show the category posts post which will be assigned to a particular category will show it in this page so yeah so that's pretty much it that's what we are going to build and we are going to also deploy it and if you are following with uh this tutorial I I don't want to say it a tutorial it's just a build Along video or code Along video uh you will be also able to uh deploy your own application and you can maybe add it to your resume so let's just uh open our code editor and see what are we going to build uh today in this video we're going to build a next JS blog from the scratch we'll be using Wordpress as a backend and for design we'll be using telu and CSS so the whole project is going to be our written in typescript so let's see what are the topics we are going to cover in this video first thing I'm going to give a brief introduction about nox3 then we'll be seeing what are the WordPress rest apis and points where you can access them we'll be creating the next three projects together and then we'll be seeing how to set up your WordPress projects as well once you're done with all those setup we are going to see the directory structure of nux 3. then we'll start the designing process in the designing process first we'll design the home page then we'll design the single post page after that we'll be creating the category page in that particular section will be creating our own utility function to do the visual changes after that we'll be uh we'll be offloading some of the pages section into a reusable components so that you can use that later in some different project or in this project in some different pages after that uh we'll be make will be making our code more reusable the whole business logic will write as a composable so that you can take that compressible file and put it some in in some different project and you can then start using it and at last uh will be deploying the project to the rehearsal we'll learn about environment variables we'll also learn what are the things you need to take care when are deploying a next three projects so all out of the way let's just see what next three is uh if you don't know I hope already you know about nax3 that's why you are watching this video so let's just uh open next free website and see what this thing is so basically nox3 is a view of framework for uh a view three framework you can say not view three actually uh Knox support V2 as well the previous version and it will also support the next version as well so yeah so nox3 next is a vgs framework which have some added features a more added features I would rather interpret it that way so it is basically a view just features it comes with uh the build pack it comes with inbuilt routing it also supports server side rendering and some of the other things uh that next has are Auto Import file waste routing API data fetching utility zero config typescript support and the build tool that is already included in that in in the framework itself other thing you can do you can create with next three you can create a standalone apis as well you can create the back end you can connect to the database from directly from from the server route so all of those a good thing you and do with an access if you want to know more about an exist head on to their website next.com and see the documentation so main part of our uh tutorial would be uh we'll be writing next uh JS using typescript but the thing is we need the the data right we need the data and where the data comes from the data comes from uh WordPress uh WordPress rest API so uh where you can find the WordPress pressed API if you uh have a WordPress website if you already have a WordPress website you would have something like this the posts are written as uh as as like this you will have a table inside that table will have all your posts right then you can maybe view the project view the post and it will show something like this so how will you how will you get access to the rest API so every WordPress website has a rest API routes so let me show you how you can tap into that uh rest API and how you can use that so just go through your uh WordPress website URL and then write WP Dash Json once you are into uh that Json route what you can see you can see uh some Json payload over there so what I can do I can see what are the end points available over the site name description all those things so what I will do I don't have a Json formatter in this browser but I do have it in Firefox so let's just open it and see what are the things we are getting from that particular uh endpoint so first thing we have the name of the blog which is obviously my name and then would be our site description these are all coming from where these are all coming from our WordPress website if you go to the settings inside settings you can see we have site title uh tagline we have the URL address and the email address as well so you can see all the things are about our website we have in this particular route so name we have description we have and then the Home Route the URL route and then we have something called namespaces so namespace is basically shows you all the namespaces of your API endpoint right so after that you will have a property called authentications inside authentication you would have uh the authorize URL I think it would be used to authorize and get the authentication token or something then after that the things we are most interested in in is the routes inside the routes you can see inside route object you'll have a whole bunch of uh different endpoint name okay so so you can see all the things like all the plugins you have installed all the uh all the post type you have all those things you can find literally all the things you can find here so if you see closely if you scroll down a little bit you can see uh endpoint named slash WP slash V2 slash posts so if you uh if you expand this one you can see we have some get method and post method so let's just go to that particular route and see what we get there so what I'm going to do I'm going to uh I'm going to open a new tab and I'm going to tap into that directory so let's see what we have here so here you can see we have a bunch of posts if you see we have a array of posts and these are basically your WordPress posts so what you can see you can see uh the title of your post the Slugs the content and then some other bunch of uh attribute that you might need so these are the things we are going to be using and we are going to be building our uh modern next application by consuming these apis so most of you uh already might have a WordPress website or your company might already have a website what you can do we can use those apis and create uh your very own a modern or next free applications so yeah so that would be our data source and this is how you know we are going to get the data so if you post something uh from here from the from the post itself we'll get the data in that API will build the website from there and then it will will deploy that onto the virtual server so enough talking let's just start uh the project itself will be starting the project so enough talking let's just close all this uh pages and let's just start the project itself so open your favorite code editor in my case it's obviously vs code I'm going to open my terminal inside my terminal I'm going to go One Directory up and here I want you to focus here so what we are going to be doing we are going to be installing next are three so in order to do that we have to write this command write a npm command which will uh create a scaffold of your nox3 project so the command goes like this npx official CLI of naxri in next to we had to use something different but in right now we are going to be using naxi because we are doing it in Knox 3 so the command is npx naxi in it and then your project name right so you have to give your project name so in our case we'll be calling it nox3 next three WP okay so that's what we're going to call it so next three dash um WordPress or WP and we're going to press enter once you press enter on naxi will start um next you will create our next three WP directory and you can go inside the directory using CD nox3 Dash WP so now you can see we are inside the project if I list out the things you can see we have uh four five files so let me just open it in vs code so we are inside vs code now so you can see we have one two three four five six files the first one is being Max free uh config then we have package.json which is which is responsible for managing the packages then we have a readme file we have a typescript config file and one view.js file which is app.view so the project is there now we have to install some dependencies so to do that you just run yarn install so if you don't have yarn installed in your computer what you can do you can use npm install or npm I like that you have to do so I'm going to just I have a Yarns so I'm just going to run yarn install and as you can see It'll create a node module directory and put all our dependency over there so all our dependencies have been installed now what I will do I'll organize my windows so that now I can just go back and forth between uh the browser and the code editors what I'll do I'll create a new window and then I will put my vs code over there so I can just go back and forth between the browser and the code editor so what I will do now I'll run yarn Dev so it will start our next instance of the applications and now if I go to my browser and try localhost 3000 you can see we have our next instance or next application so if you are following along congratulations you have successfully installed uh next JS kudos to you maybe take a break or just don't take a break we are just starting out we have a lot of a lot more things to cover so yeah so uh so let's talk about whether the files we have here so first thing uh we have is our directory called dot next so basically whenever you run uh whenever you run yarn Dev or yarn build what nuts do next basically create some supporting file for you and the all those fancy Auto Import stuff directory based routing stuff they write it here if you see here all you can see all the Auto Import configuration and the next Json all the things you you'll have here but uh don't worry about this directory you will never be you know using this directory because it is auto generated if you can delete it if you want you can delete it and then when you run the yarn build or yarn uh div it will generate it from your current project so you don't need to Tinker around it here and then we have the node modules we all know what node modules is so let's go to the git ignore inside git ignore we have these are the files I mean that will not be uploaded in your GitHub or the um on your or your git Repository then we have our app.view this is uh the starting point of our application and right now it is actually showing this component so they basically whatever you're seeing here now in this page is basically coming from this next welcome component we don't need it here so I'll just remove it and I'll say good old hello world or just say next hello next Okay so so yeah so we have hello next here so um basically uh for next three to work we just need a app Dot View file or if you are uh if you're coming from next to then you might uh remember Knox 2 used to have a whole lot of directory like Pages uh layouts component all those directory are still here in Knox tree but the thing is it's up to you if you want to use that you can use it if you don't want to use that then just just go and write your own view file and import it here and there we'll uh we'll we'll talk about that uh in a bit okay so don't stress about that so the next file we have is the next config so in this file will be uh doing uh the configuration of third-party modules or next modules will be setting up a Tailwind in this file as well so that are the file you will get when you install the next three applications so let's just get started with our uh designing part so what I will do first I will install uh tell wind uh CSS so what I'll do I'll add another instance of my terminal and I will install the television CSS so let me show you where you will get the Tailwind CSS installation guide so if you if you go to sorry not this tab if you go to our next.com our modules modules next if you search it on Google you'll get on Knox Js module list okay so our Tailwind CSS basically is nothing but our nox3 a module that they have created to install Telvin CSS inside your nux JS so what we will do we will go to modules and then we'll see this the first modules we have so this I can see our Tailwind CSS so uh something I would like to tell you is don't use this command because it will add it as a as a dependency but we want it as a Dev dependency because the whole element is we don't want it to be pushed to the uh to our deployment okay so what we will do we'll just add it as a Dev dependencies okay so basically uh what we are going to do we are going to go to our instance and then will run and add and then a d d defines it we want it as a Dev dependency and then our package name next JS slash tell wind CSS yeah so then I'll press enter it will add the dependency on my applications okay so the dependency is added if you go and refresh your page you can see nothing why because uh let's just go to that and let's just run the project again and let's go and refresh it so you can see you don't see any changes at all why although you have installed the package itself but you haven't uh used it anywhere so you need to use it inside next config inside the modules uh array we need to put it put the package name okay not axios copilot is messing with me I guess so yeah tell you in CSS right so once I do that what I'll do I will restart my server using yarndeb again and you can see there is something new here that was not there before right using default telephone CSS file from runtime telling CSS and you can also uh check a link which says Tailwind viewer what will happen if we go to that particular route on our application so let's go and check what is there so as you can see we have the Tailwind CSS installed on our project and now you can see a whole bunch of different colors the font Widget the all the utilities classes that you get all the things you can see here we are not interested in this so let's just get out of it and then see you can see the font has slightly changed to some uh different font that that it's not the default one right so yeah so Tailwind is installed right now so now what we'll do we'll set up some few more things inside Linux config itself so you can see we don't have any good um meta title so that's not a good thing so what you'll do will set up the titles uh for our applications and we'll also set up some meta tags as well so these are very important for in terms of SEO so let's just uh let's just start that start doing that so what I'll do there is uh inside next configure inside the app there will be a property called head inside head you can write your title all right I'm going to name it elon's blog maybe it's Jack's blog or maybe it's um moment's blog just whatever your name is just put it there or maybe whatever the title you want to show it there okay I don't care so that's uh I'm done now let's go and check I'll refresh it quickly and and it is taking some time yeah so you can see elon's blog is there so why so what we have done we have set the title uh from the next config file itself so now if you create any Pages uh sorry if you create any page inside the Pages directory it will take the title form here if you don't set the title from the page it will take the title form your next config but or we'll also see later you know how you can uh add a title like WordPress like what how WordPress used to have title right something like blog post and then your site name maybe something like that will also uh see okay so I want to uh set some uh or two three more uh meta tags basically I want character set okay character set to be UTF 16 not 18 Again copilot is messing with me if you guys don't know about copilot copilot is is a product from GitHub that helps you um code along and it will basically auto complete the stuff for you okay so nothing fancy yeah so then we need another important thing for viewport so yeah so we need these few things for like designing purposes so now once we are done with all those things we can all you can do we can use the Tailwind classes right in our app dot uh view file so what I'll do I'll just let's just play with it a little bit so I'm just going to give her uh uh let's make the text bigger text 5xl maybe and then the font I want to make it uh bold okay so let's just see what happens uh let me just uh yeah so you can see uh the our Tailwind CSS is working so so tell you in CSS is installed a great milestone guys now what we are going to do we are going to start creating uh the pages so first I will create some directory that's how I create a next project I first create directories like Pages component composable so I'll start creating the directories first so first directory I will create is pages so inside that we'll have uh all our pages so and another directory I would create is components components and after that I'll create another directory for our business logic reusability compo symbols where we'll write some composables for usability yeah composables okay so that those things are done now what is happening here we just have one file and this on file is actually causing uh is showing whatever it has to the page but we don't want that what we want we want uh next three to use our Pages uh folder to show the content so what we will do we will use a special component uh given by Next 3 inside our div so it's nothing I didn't create the component it is created by next so what uh next we'll do just like you use a route view uh inside uh normal vue.js project when you have the router it shows the content of the particular component so that's the basically what next page is going to do so what I am going to do I'm going to just give a component name next page so we have a next page inside our app now if I go inside the page and create a page called index.view and I give a script tag and I set the language to TS and obviously setup as well now if I create the template tag and write something maybe index file let's see what happens okay so we don't have anything in app.app page we didn't create any route or router so I'll just go to my browser I'll refresh it and you can see we have the index file which is coming from the pages so if you have ever used any next framework before version maybe next one next you can see uh inside Pages whatever the directory if you have the index variety that would be your home directory that would be your home component that would get rendered automatically so if you create another page uh maybe uh like um hello Dot View so what will happen inside that so if I just copy all the content from there and then paste it on hello.view and press and write hello so if you go there if you refresh it and then if you go to that particular route hello you can see the hello is coming up so basically the our next is uh directory based routing is on it is working perfectly so we'll quickly create a few pages for our blog so index is basically will be our home page then we'll need another page uh to show um a single blog posts we'll need a category page so other way other way how you can create a different pages basically create the directory for example I need a categories page okay so I'll create categories and then inside I put index Dot View so what uh what it will do basically uh is it will go to the categories and then show the index file so if I go inside like in my URL and then test something like categories it will show that index file so why you may ask why I am using a directory instead of just a file name categories because if you need a nested uh route inside categories maybe category slash the category ID all right something like this then you will have to create the directory otherwise there is no way you can like create you can go inside that directory and then use that particular route as well so basically that's what we'll do later so that's why I have created a category you can also like do like this Cate uh categories Dot View but then you you'll have you don't you will not have the option to go inside that particular directory and create sub pages so that's why I have used a directory so this is the best practice if you are creating maybe some other directory or other Pages for like for users then do like this users and then inside that create the index file this is same as writing uh just creating a file like um users Dot View okay so this is same so I'm just going to delete this one and I'm going to move to the designing part so we have the categories pages so let's just uh put out script and language is our typescript obviously and then we write the template okay so I'll just put some different arbitrary string just to recognize the file so category Index right category index we have the normal index file and now uh then now the next thing we need is a dynamic route so you may ask what a dynamic route is so if I take you to my website.dev you can see I have blog directory right that is the basically I what I have created a Blog directory and inside the index file which is causing this design right but when I go to uh the single Blog Page you can see blog slash I have something some different uh thing like this is the basically the slug of the blog so how this thing is um getting rendered in the page that's what we are going to see in Dynamic route so if you go to any page so basically what is constant here is this part and then we are uh we are catching this string and then we are fetching the data from the API and then we are showing it to the page so basically how will you do that so how will you do that is basically there is a way uh previously we used to do it using underscore and then the parameter name but right now what we do is uh with the braces third bracket and then inside the bracket put the name of your parameter in my case I'll just call it Slug and then slug Dot View so this log we can use it inside our view file we can take we can get the slug from uh from here to here as a variable value and then we can show it in our page and then we can do whatever we want with that particular slug so let's test it out line TS and then I'm going to do setup script is done now the template so what I want to do I want whatever the someone Visa whenever someone visits like this categories slash anything XYZ I want that XYZ to be printed here right that's why I have used uh that particular naming structure so using this next will uh next we'll get that value uh from that there and we can get the value here okay so what I will do I will use a composable given by next which is use route so I'll create a variable called route and inside that I will use use route okay so basically use route will give us instance of route and inside route we will we will have parameters so what I will do here I will uh example I'll write example of dynamic Dynamic route and then I will try to print the particular value we are getting so what I'll do route parents dot whatever the name you have given inside that brackets so slug okay so let's see what happens when you try to visit category slash something so I'll go to categories uh inside categories I think okay so the spelling is wrong here so I'll just correct this thing and use route as well I'll just do that again okay so now if I go to the category you can see the category index is there now if I go to that particular ABC you can see I am getting that value so what we'll do basically we'll get this value we'll talk to our WordPress API and we'll tell give me the category which have the slug ABC it will give us the data and will show the data right here okay so that's what we're basically are doing in the demo website if I able to pull up the demo website let me see next three WP DOT first so dot app so if you see the demo app which is already hosted you can see uh the categories and inside the if you go inside the category AWS so what it is doing uh it is uh taking this devops uh the value and then it is talking to my API and it is telling uh go and fetch me on the blog post which has the category devops okay we'll see how this will work okay we'll code it ourselves so don't worry about that so we have the pages now we need a page where we can show the blog post like this so if you go to my blog post you can see we have the our domain and slash if you go to any uh directory or any if you put a valid uh URL value Slug it will show you the blog post how this is happening so this is just like how we did inside categories we'll do it inside the pages itself so what we will do we will create another Dynamic route like this inside page is not categories slug Dot view right so this would be our single blog post so let's just write our script line is typescript and we are going to give setup and we will catch the patterns like this const using use route we'll get the patterns and you can take inside the template we can show all the parameters right so if I go right now right here and I put something maybe something something else you can see we are getting it as a object inside the object we have the obviously we have the key Slug and also we have our value which we are giving here so maybe here later on we'll have our blog Slug and with that slug we'll be able to fetch our blog from the our API when we start working with the API itself okay so that out of the way now we should start working on the design so yeah so this is how on the WordPress right and sorry not WordPress the next three directory works now we'll start on the designing process so first thing we'll do we'll start creating the navigation menu so let me show you how the navigation menu looks in the demo website it's nothing but just a simple bar inside the bar we have uh our title of the blog and we have some navigation menu which are clickable okay so let's just start on doing that so what I'll do I'll go I'll go inside components and I'll start uh coding the go on the menu so inside component I will create a folder and I'll tell you why I do this kind of stuff this is pretty much opinionated but this is how I like it okay so I'll write create a folder name menu inside that directory I will create top so basically what will happen when you are when you will use this particular component you will just write like this menu top so this is how uh next we'll register the component internally so you can just use the navi and the component like this so that's why I used to organize my uh code like this okay my component like this so what I'll do now I will quickly just scaffold the hmm I'll just quickly scaffold the menu structure so basically uh it is uh pretty much easy using Tailwind so that's what I'm going to use so let's start with the navigation tag so inside navigation uh what we will do will give um BG gray and 900 that is for background color a shade of gray that would be the background color then we're going to so we'll be busy gray a 900 and then we'll make the text White will give some padding from y-axis as 5. now let's uh let's add this thing uh in our uh you know app so inside app what I'll do I'll give just like I said menu top isn't it amazing like you just you don't even need to register the company you just I just calling it with the with the folder name and the and that and the component name so yeah so let's just see it in our here so you can see we have the uh top bar and now what we need we need a container which will take some width basically we will do that so let's create a class for container that will need everywhere right so we need that so let's create the container so I'll go to app.css and here I'll write Style and I'll create a variable I'll create a class not variable my bad and then I'll I can write like this so I apply will apply all the utility classes that we are going to use uh in and so this is basically coming from our telwyn telling you'll pass this and apply the utility classes to this particular container so what do you need we need it to be centered so we'll give margin from x-axis Auto we need to then uh make it a certain width so we'll give maximum width 5 XL so what 5xl means basically is if you can put your mouse you can see it is actually 1024 pixel so we need that container to be 1024 pixel uh in width and we also want to give a padding x-axis to 10 and we need it in only mobile devices so what I'll do I'll make that a zero the padding would be 0 inside bigger devices so if you put your mouse over it you can see in minimum width of 640 it will start making it uh the padding left and right zero so we have the container now what you can do we can go inside and top menu and use the container inside navigations so inside navigation I'll take a container I'll take R A which will be our on Logo or the title okay inside that I'm just going to write elon's blog okay now uh uh what I'll do again I'll make it text Excel font bold and so there's our logo so it should appear right here right now I think the container is not working so what I'll do I'll just take the container class from there and I'll put it here so the spelling was wrong okay so you can see our blog title is in the right place now I just need to create the navigation menu so to do that what I will do I'll create a unordered list inside another list I'll create Li and I'll create that three times okay and then what it will do it will create one two three uh unordered list item first one would be home second one would be our categories and we don't need the third one okay so now uh if I show you it is coming like this but what we want we want it to be uh side by side so what I will do will uh make this as a flex so what Flex we'll do Flex will put this uh two elements side by side okay so it is already side by side but the thing is uh these uh UL element is not Flex so we need to make that Flex as well so what we'll do we'll give it a class and we'll make it in line Flex okay so yeah it is fixed and now what I can do I can give a gap of two pixel okay so Gap is taken now what I will do I will make justify between so so go uh so what I'm basically giving a CSS property which is justify content space between so we want space we want all the available space between these two element so if I just go now you can see our blog navigation is looking pretty good isn't it so yeah so we have that now we need to replace our two thing which is we don't need a tag because for next to go from one route to another route we use something a component called Next link next link is like uh your router link okay so if you are confused about what this thing is coming from this is basically that okay now I will write another knocks to link then I'll give the two uh this and for categories I will give categories for the home also I'll gonna give the link like this and I'll set the two to like that okay so that is done I think our app broke I don't know what's the issue let's just refresh okay so there's something missing I guess let's see uh okay I think we might relearn it okay now let's check uh maybe we have written something uh different next link.2 let's check down file okay okay we don't need a sorry uh my my editor was like scrolled a little bit so that's why so we don't need this we'll just save it because next already Auto Import all the necessary component for us so yeah we'll go we'll refresh and bam we have the category page we have the home page now let's start on designing the home page itself okay so yeah so we'll start designing the home page uh where is our home page yeah so this is our home page so let's start designing it first thing we'll create we'll create a header so let's do that main tag inside that I will take a section I'll give it a Class of Hero uh and then inside that I'll take a container so what I'll do I'll give a BG gray 100 okay I'll give some padding as well poi 10 maybe then inside container I'll make the container as Flex I'll make it just if I between or do I need to make it better no I don't so I will do yeah then we need our image our image should be here and then the header text would be here okay I'll do well I'll make another div I'll take another div inside that I'll take H1 element I'll write whatever I want like just for design right so it doesn't matter Elon Musk I'll take another P I will write some shaded about Elon Musk here so I'll just copy from the demo website that you have created so p and okay it is coming along now I will change the style of it I'll give it a text for Excel which will make the text at 2.5 frame will make the font bold okay now I'm give I'll give some margin from bottom maybe two okay two is fine another thing I'll do I'll add a br tag okay vs coding missing me I guess okay so I'll just rename the app again and yeah so yeah I just need the photo uh here right here so what I'll do I'll add a IMG tag okay inside source SRC I'll give the image source and uh I'm just going to close the image tag like that image tag doesn't have a closing tag okay so now we are going to give the the image file path so there there are two way uh to add uh add assets or static assets to your next app what you can do you can create a folder called assets so basically you can import the static file from the assets so I'll create images inside images would be too long so let's just call it IMG inside IMG I'll just paste the Elon Musk photo I'll just save as and then I will I will put it here hold on guys I don't know why my folder is hold on documents inside projects inside what is my project yeah this one inside that there would be assets inside that there would be image and our Elon mask alone so I'll just save the photo and what I can do now I can basically add a tilde sign and then assets assets inside that I'll go inside image then Elon dot PNG once I do that you can see I have the image but it's not really looking like what I want it to look right so we'd have to change the design so there are two way you can change the size of image basically you can give a size like uh like with a utility class you can do like something like 200 pixel but the thing is uh I don't like this thing so what I do basically I create a placeholder for the image and then I make the image take up all the spaces around it and I make the so what it basically do it makes the aspect ratio of the image same right so that's what we're going to do we are going to create a div and inside that div we are going to place the image so basically yeah so it's simple so we're going to uh give a width of um 300 pixel and will make it relative because we'll make the image uh absolute because I I want the image to take all the space available in this div okay yeah I'm going to give a height of height of 300 as well and then inside that I'll put the image okay so what will happen now you can see if I uh add a border you can see what happens some butter powder red 50. make it 500 perhaps so you can see this is the available space and this is where our image is sitting so what will happen if I make our width full so it will take the full space what if I make our height full it will see this is not good this is looking like some some kindergartener created the website we don't own that we want the aspect ratio to be same but the image should take the full space as well right so what we'll do will make it absolute okay then what we will do we'll add another property called object cover so what it will do now see the image is not like the aspect ratio is saved and the image is looking good so you will remove the Border we don't need it anymore so yeah so our image is right there so I will just make the image a little bit smaller maybe 200 in width and 250 in height yeah and that is also very big so I'll just make it 200 by 200 okay it is looking good so what I'll do now uh I will make it uh vertically centered so how you do it basically it's not rocket science just make items Center then there you go okay now I'll make some uh space from the image I'll just give some space from the image on the right hand side so I'll give Mr and I'll give five so it will take some space from the right okay and also what I would like to do I would like to give some rounded corner I would like to make the images a little bit rounded but if I save it and if you can see the image it's still not rounded why is that you remember we have made that section and the image so we are giving the rounded to that particular section and the image is taking all this all the space are available inside that so that's why it's not rounded so what we have to do we need to tell the image that you should not exceed the sides of the of these divs so what we can do we can we can use another property called overflow hidden if we use that you can see we have slightly rounded corner on the sides Okay so so there's that I'd also like to give some shadow Shadow yeah Shadow MD maybe okay it is looking good now I need a button so I'll create a button right after the text so I'll add button not with button tag but with a tag and I'll give it a class BTN which will do nothing we'll just extract the icon later okay so let's connect this put something let's connect okay then we'll uh let's give some color BG a sky 500 text Sky 50 will give padding from Y2 padding from X4 and I guess we have a result yeah we have it okay now we'll need to make it rounded okay we'll need to make it in line block okay we have it there now I'm going to give some padding from the top class mb2 okay let's make it MP3 okay mb3 is looking good now I have it so I want I also want to add a hover effect on the button so what I'll do I'll add hover and in Hover State I want the background color to be Sky 600 just slightly darker same color but slightly darker and I also want to make the duration the transition duration just last at least 200 milliseconds so duration 200 so now if I put my mouse over it you can see it is slightly darker and that's what you need right so it is uh coming up uh really good now what I'll do will create the blog section but what I would like to do is I would like to uh extract this section into its own component and so that we can use the same component on category page on some other pages okay so I'll just create a component out of this section so I'll go inside components I'll write uh I'll write a directory called page inside page will create header you already understand what I why I'm creating a directory because when I import it it will be like page header or something like this yeah so let's just create the component Lang we'll go TS give TS and setup script and then we'll take template inside templates we'll put all our code so from this to this section we'll put this whole code inside header so now what we can do we can just call the page header section right so yeah so it's still there you can see so the problem right now is what if I want to use the page header in some different pages so let's just try to add it inside category index page and see what happens so page header okay uh let's see what happens so I'm going to go to category page and you see the same thing is there we want that the we want the component to be editable or maybe you can put some different information that should be editable right that's why we are creating component because we want it to be reusable with uh so that we can pass any information and it will show the same information with the same style right so what we'll do we'll add props okay so basically what we need we need R to Define some props so how do you define props in view three you remember Define props so this is how you define a props right like this inside you write title that then you give the type of the title like this since we are using typescript we will not use this I will not Define the prop this way right what we will do instead will give the generic type okay so what will happen uh if you don't pass the value variable uh inside the component wherever you are using it it will give you a error so that's why you're using a typescript right to get out all its Glory like type checking and all so I'll just write title and the title would be required and the type would be string so we have title right now and now see at the same time when we just change this thing and I'm getting an error now I have to give title you see property title is missing that's why you we are using uh typescript isn't it so that we get the error beforehand before deploying it right we don't want to scratch our head when the project is already deployed right so what we'll do we'll give some uh will give the title so title not like this title and I'll say category index okay so that's out of the way now let's see where we are showing this title so this title would be basically inside the container right somewhere here so I'll just write title and what we will do uh we will just remove this thing from here and I'll put it inside I will wrap it around with the component itself and I'll put it here right so the thing is the uh it is a little problematic because you can see uh we don't need Title everywhere we need the title for categories but for some pages we might need to some show some images or something else right so we'll make it optional this uh props will make it optional so how will we do that we'll just add a a question mark and it will make it optional okay so what will happen right now if I refresh the page you can see category index is already showing properly and now if I go to my blog you can see we we don't have those information to get uh to get access to show the information wrapped around with your component what you can do you can use the slot value the slot component so basically all this value would be taken from here and we can show it in our header component like this slot okay slot okay so this slot will show all our all our uh HTML mockup inside that particular uh component okay so now one more thing I need I need to give a style to that particular title so what I'll do I'll wrap it with H1 because it should be H1 and I will give class text for Excel font bold okay okay so that is good so what will happen if I go here okay so it is working right another thing I would like to do is if you go here if you inspect the element and then if you inspect the container you can see there is a MTH on which is not good for SEO right you cannot just left a tag empty so what we can do we can make it show only when the title is available so how do you do that you just add a few V if attribute so it will only show when the title is available right so now if I refresh the page you can see we don't have that empty tag anymore but if you go to categories and if you inspect the element you can see it is there okay so that's how you create reusable component inside view or next so our header is done our header is showing pretty much good in the pages now what we'll do we will start creating uh the blog sections so inside blog section I will create a new section but first I will add some comments so that uh blog grade starts blog grade ends so inside the section uh I'll start adding the content so first what I'll do I'll uh I'll make it as container because we want everything inside container then what I'll do I'll take a grid element side grid will give the will Define three columns because we want three columns on larger devices and on phone we just want one columns right and we'll also give gap of 5 which will be 20 pixel from all the sides and now we will create the blog item itself okay so yeah so do like this uh we'll have to give the call span of one so so in total if we have three elements it will take like three ah three uh column okay so then inside that uh what you need we need uh image basically so first this would be the blog image I will like to add some comments and then uh our blog contents okay uh so basically this would be the div for that so and this would be the div for our image so let's just uh add the blog content first H3 H3 would be our blog title I hate Emmett believe me it always messed up with my like markup and we'll give some low Ram Epsom okay we don't need this much we just need under this okay okay and after that we'll have our read more button which would be a next link so sometime my autocomplete is not working so let's just write next link and two we want to send it to uh like this okay ah so next link and we'll have to write read more so when someone clicks on read mode there will be uh there will be sent to this particular page okay so let's see how it looks oh it doesn't looks like the blog but anyway we are going to design it properly okay so first thing I will be doing uh let's just add a view for so that you can see how it will look once we have multiple uh grid elements so what I will do I'll write nine in sorry I in 9 that means it will iterate until it is like each element so it will this element would be shown nine time and I will have to give a key and the Q would be the index of the element okay and then I would also like to give like a I here yeah so so whenever you click you'll go to that particular index we'll change that later okay don't worry about that so first thing I'll do I will add some shadow box shadow so I'll do Shadow LG uh then I would also add the image as well so image not image IMG then I would give the path assets image Elon dot PNG I'll get the alt checks as thumbnail and let's see okay it is coming along but it's not uh what we want so what we'll do will give some padding from y-axis like 10 okay maybe 12 is looking pretty much good but I would like to have some more space okay so 16 it is yeah so yeah so we need to make the title a little bit bigger we need to give some spacing from here and for the image we have to make it uh the fixed aspect ratio just like we did with this one okay so how do we do that we basically wrap it with a div then we give like a width like I'd like to give with full and then I would like to give with uh only 200 pixel I'd like to make it relative and that's it pretty much now I need to give some more classes here the view full h full absolute object cover okay we have it here okay that's good let's make it 150 180 maybe 180 pixel okay good now inside the blog content I would give some padding from xXx x axis x-axis here okay it's a tongue twister so P I would like to give um P5 maybe 5 is how much 20 pixel yeah 20 pixel is good okay it's looking good now let's just give some text like Excel font semi bold okay it's looking good blog title is bigger than this so just to see the how it will look when we have more text and three was to make it be I'm just writing some random stuff okay so don't worry about that so now I'll give some a margin from bottom which would be three okay it's looking good and now I will make the text a little bit smaller like text SM so SM would be just one ram shorter than the normal text I would give some margin from bottom three okay so read more have some space now so now what I will do since the block grid is created I'll check the response C responsibility I mean how it will look on uh responsive screens Mobile screen okay it is looking pretty much good okay so that is out of the way now what we have to do we can create the category page but before that let's make uh this section this particular card as a as a component so how do you do that we'll go to component we'll create another folder we'll name it blog inside that we'll create a component called card so all the blog related component would be inside the blog directory so whenever we uh call that component we'd call it like blog card right so we will add the script lying typescript setup then let's define the component let's define the props not components okay how do we do that so we do something like this I don't want the auto completion it's always mess my code so what I'll do now I will add all the props that we we needed what do we need we need a image so image image would be a string we need a title title would be a string again and then we need our excerpt the the description of the block or press quality excerpt I don't know why okay so excerpt image and title what else do we need we need the slog as well so Slug and the slug would be string so let's write the markup so inside template I will copy this whole thing from here Ctrl command X and I'll paste it here I will remove the for Loop we don't need that and what will happen now uh I'll just put the slug here I'll put the title I'll make the title dynamic I'd make the excerpt Dynamic since some post doesn't have excerpts what we can do we can make it optional with a question mark symbol so we can check for except if Excel available only then show The X up we'll do the same for image as well so V if image only if image is available just show the image so now what we'll do we will uh just add the blog card here blog card hey we don't need this uh okay login three nine okay let's just render nine block I so we'll give the it's already messed my code okay so title would be some blog title random blog title I don't know let's just copy from my blog uh yeah then we would also need some excerpt why can you get the excerpt maybe from here okay it's not accept its title so let's see where can I get the excerpt okay so I got the excerpt what else do we need what else do we need we need uh we need excerpt we have title now we need an image so for image what I'll do I will give the image form here embedded uh okay let's go to my blog and then copy it from there copy image link and I'll put it right here okay what else does it need okay it needs slugs as well so I'll give the slug on okay so I think it would uh it should render the oh I forgot to add the image so I'll just make add the image here I'll bind the image with the variable I'll save and I would read on the code again so let's check okay it is coming okay so the block grid is working what else do we need I think we are pretty much set with the design now we need to design the single Blog Page this one this one we need to now design okay so we have uh two reusable component and it is looking pretty much good so I would like to you know congratulate you because this was like how how much time uh cut it down cut cut so let's uh design the single page now so I'll go inside the slog page I'll add another tag called main inside main I would like section this section would be the header but inside that header I need a container so all the component side would be all the content inside would be inside the container so I'm just going to write container or just make let's just put the container in here okay so what we need we need uh the title post title then we need post meta post meta means the author the date the post has been published and post image then we need the post content these are the things we we need to show here so let's start with the post on title itself so inside our div let's give it post content not post content post title inside that let's write H1 inside that let's give it a class text 5 Excel text um black text 5xl font bold on leading tight let's make it a little bit let's give some spaces in between text letting normal and here we will have our title like this okay so let's see how it looks okay not bad so what I'll do will give some spaces from Top maybe 24 okay 24 is looking good we'll make the title Center okay we'll remove the leading we don't need that yeah what else do we need we need uh post meta so let's write post meta div classed post meta so in this I'll just write span written by it would be the author name Elon Musk and then there would be another span which will be like published on the date the date so let's just put some arbitrary date maybe the recording date 28 11 20 22. like that okay okay so now let's make it Center let's give some padding MP3 uh looking good okay it is looking good now what I'll do I will just add some spacing from here okay so let's make it Flex item Center we don't need Flex because these are span elements we can just give some style like class M or three okay it's looking good now I would like to give some more spaces and before maybe mb5 would look good so we need to make the text size a little bit smaller in the phone so we'll do text 3XL in mobile phone this is how it will look okay good and we'll also make the padding from Top smaller py12 so this is how it will look on phone it's looking pretty much good will have the image post meta is done now let's do that image so for image we'll do the same approach will will wrap the image around the box so that we have the particular height so we'll do that basically we'll give full width then we'll give a height uh 300 pixels maybe then we'll make it relative and will give a large shadow inside that will take the image inside image let's just give the image we have assets image alone log thump okay give it a class absolute with full height full object cover make it rounded overflow hidden so that would pretty much make our image look good now we just need to give some spaces like mb5 would md8 maybe let's give md10 okay so we need to make the height a little bit bigger maybe 400 pixels okay 400 pixels looks good and okay now let's uh make the image a little bit uh less big in the phone so I'll just give 250 pixels on phone and on from the smaller devices if it goes to the bigger Viewpoint it would show 400 pixels so now if I resize the screen the image is a little uh smaller than the previous screen okay so now I'm going to give a margin from bottom would be 10 and there would be our post content be our post content I will just give a class post content inside that we will write a lot of lower emissions so yeah it is looking good so this should be our Blog Page okay single blog page so that is done now let's uh start designing the category index page so basically what we have there in the design will just show the category tags so if they click on that tag they will go to the particular category page okay a particular category select page so let's do that we'll do section I'll give class we'll give padding of 10 from top and bottom and then we'll add a container as well let's just keep the container at the top itself container inside that we will need a flex inside the flex will have many uh elements so we'll also add Flex wrap so what rap will do if the flex element exceeds the given width it will then show it into the next row so that is a good thing so we'll have multiple next link basically so next I'll link and we'll go where we'll go to the categories slash whatever the slug is and we'll give like hash category name something like that now let's make it like two three more add a view for I in 33 I don't know I just came up with the number I and let's just show the index here somewhere uh I okay let's see how it looks okay it's look good now we have to add some style to it so let's give some style we'll make it block block then we'll give some padding padding I would give two padding X would give four we would add some background color maybe BG Gray uh 300 maybe and then would also make it rounded okay and also we'll give some Gap like five okay it looks good we'll uh also need to add some hover effect BG Gray of 800 maybe 700 or 600 let's make it 400 okay and let's see how it looks okay it looks good in my eyes at least so here we'll already render all the categories so once you click on it you will be redirected to the category page and you will be by default on the home page you will go to the blog and if you go to categories from categories you can go to particular page so now uh what else do we have we have almost created all the designs so congratulations guys this is a very a big milestone that we have covered so far we have designed all the pages all the components and now we need to consume the API and just show the data uh to uh just keep you just need to give the data to a component and that's it uh we'll then call it a day so basically what we have learned so far let's just advise a little bit we have created the next project we have also talked about where you can get the apis where you can get the uh apis data how you can add cell wind what is what is the process for you know creating component what is the process for creating uh pages so all that we have covered so most of the interesting stuff are still are remaining that we'll discuss in this video itself so for example fetching the data piping it to the UI and and a lot of things a lot of small small Improvement that will do throughout the video so if you are still connected if you are still connected from the beginning then just it is a time to take a pause take a pause maybe um have a glass of tea or coffee and then you can continue it again so yeah just go just go have a glass of water I'm waiting okay I'm waiting for you it seems you're back already so let's just uh get along with the videos so now uh in this particular section what we are going to be doing we are going to be fetching the data from the WordPress API and then we'll show it to our uh user interface so let's uh start doing that but but before let me show you what are the ways you can fetch the data inside next to JS so let's go to that documentation we so you can find the documentation on next.com click on get started then from the left hand side from the menu we can see data fetching since I had data fetching you can see next provide of several data phasing technique use page use a lazy face use async data if you are coming from next to you might remember this async data all right but that async data is gone and this is totally different I will explain that in a separate video where I will only talk about data fetching and I'll go deeper into that okay for not on this video Let's just say these are the technique you can use to fetch the data and in this video we are going to be using the first one which is use fetch so use fetch is similar to the browser fish but with a lot of different features so basically how you can use fetch uh how you can use the use fish uh composable is you can use uh you can like use the face you can call it and then you can give your API URL so what it will do it will give you uh the data as well as if it got any error it will give the error and when you deploy it it will be all fetched on the server side itself so your UI doesn't have to wait for the server to give the data and then paint it on client side right that's the beauty of next.js right all the things are happening uh in the back on in the back end itself so let's uh do that let's use uh use Fetch and do that but the thing is uh later on we'll be creating our own composable on top of use page and I'll tell you why we're using that but let's just start and let's just try to fetch uh some blog content and try to paint it on the UI okay so let's go to our code editor so we will open the index page where is our index page it will be inside the page not on component inside the page we have the index page so now inside the script we can use our use face features so what I'll do I'll uh so basically what use face will give us use phage so inside your switch will give our URL and it will be a promise so I'll use a a weight it is expecting um expecting a parameter that's why it is giving us errors since we are using typescript so it will give us a data okay so we'll just give our WordPress URL this one so let's just put this and let's see if we are getting any results or not so I'm just going to console.log the data okay and now let's uh go to the browser make a refresh refresh the page and you will see the uh the data here you may ask because you are using like you are doing work on a front-end framework right so it should maybe probably show the data on Console why is it showing here because because the thing is this use page is getting called on the server on the node.js server itself and then it is getting hydrated on your UI it has a pretty pretty much complex structure I will explain that on another video let me know if you want to uh if you want to see that on that one okay so let's uh let's pipe this data into our uh component and let's see if it is uh we are getting what we uh wanted to get okay so we have the data Let's uh capture it as our posts okay posts so we'll capturing the data into posts now what we can do instead of like arbitrary number we can give like posts so post inside posts okay uh now what we can do we can give top post ID since we are using typescript it will give us an error because ID is not defined on uh on type post right so what you can do you can use a generic you can give your post a post type and you can maybe write a type for it but we'll do that we'll do that in the next section of the video right for now let's just give any okay so once you give any it'll uh it will not restrict you from using it okay it will give ID for title will give a post title I believe there is another field inside title which is rendered and for excerpt let's give post DOT type not title excerpt dot rendered okay now let's save it remove the we don't have to remove anything Also let's populate the slug as well so post dot slug let's save it let's rerun it again and go to browser and let's see let's see let's wait for it okay so we are getting all the posts from our form our API but we need the images as well but if we if you see closely in let's just expand one uh object you can see we don't have anything related to the thumbnail right you can see featured media we have a featured media ID so this is basically the ID and this image I guess it resides on some different table uh all together so to do to get the image to include the image with every object what you need to do you need to add another parameter called embed so we want the image and the other related data to be embedded with the response so now if you go to uh underscore embedded you can see WP feature media inside feature media indeed we have a source URL which should be our image if I open it up you can see we have the image so now we can go inside that and we can use this one so what we will do now we will make it the will take the image from the API itself so you can see post then we have inside post what do we have we have some field called embed so post inside embed uh inside embed we have another field called WP feature media and you can see WP feature media inside that will have it would be a array so inside that we need the source URL so for the safer side I'm just going to add a question mark just for null check if that is null we don't need to show anything okay so now let's go there and refresh and you may okay so WP feature media is not showing why because we haven't included the embed uh parameter in our uh in our uh in our URL right so let's save and refresh the page again and probably right now you can see all the images all the images from your blog is showing from your WordPress blog is showing here and if you uh take your mouse on top of read more you can see it is showing the slug the slug which you have added at the time of creating the post or not press right so if you go click here you will be redirected to this page and this page will fetch the single um blog and then we'll uh I'll show it here but before we do that I would like to make uh some changes here I don't want to write all my business logic like this because in some other pages also I might need to fetch the blogs and I don't want to write this code again and again so what I can do I can create a composable and inside that composable I can write I can call that composable function and it will give me the posts so I'll just do that right now so inside composables I'll create a new file I'll give it a name use WP API so yeah dot I script so this is how we you write composable it should return a function export default and inside that you basically write all your uh composition methods first thing I need I don't wanna hard code my website URL so what I'll do I will take this from environment variable next has pretty much uh uh uh a couple of helper function for that and it is already included you don't need to like you don't need to use any other package for that so what I'll do will create a EnV file and I will add another one EnV variable environment variable WP URI I would give my uh website WordPress website address jahid.dev like that okay now inside our next config we have to uh create a runtime config so that we can use that inside our composable so what we will do we'll go to inside next config will give some space from modules and then we will write runtime config inside runtime config we need public inside public we will basically use this one WP URI and will write out WP URI address URI so now we can use this anywhere inside our next application the scope is like Global you can use that anywhere okay so what I will do will uh take the config as like const will capture the config inside our config variable and we will use runtime config so this will give us the this thing inside that now what you can do we can create some utility functions so first we will do like get all posts okay another thing we will do is get all categories and get a single post and get a single category right so but before that I would also uh what I would do I would create another composable so that we can reuse that function everywhere because uh something like this uh just uh with the name get so we just rewrite the gate method right so let's just start uh using that but first uh let's uh get our WP URI this would be our URL of our blog of our blog backend this one okay so let's do that so let's uh create the function get equal to a sync a sync and point and I'll give the end point a string and it would return uh use fetch basically so I would just return use fetch and then I would give I would append it with my WP URI then WP Dash Json Dash wp-v2 and then our endpoint so basically what it is doing it is wrapping the function and we don't need to give the URL everywhere right we just need to keep the end point so if you have used axios before basically in axios you are you add the default Interceptor right inside Interceptor you give your uh base URL so basically that's what we are doing here so we'll just call get and we'll give the end point not the whole URL right this would make it a little bit easier to read so inside uh get all posts so let's uh create that get posts that would be a sync a function and this would take some variable I'll tell you why first thing I need a category because sometimes we need to fetch the blog post based on a category so category would be a number on number so it would be categories actually categories then we need the page this is for pagination that would be a number so page number I would like to set it to one and per page we need this parameter as well this would be also number and per page I want nine post okay so that's out of the way now what else uh we also now we just need to write the definitions so basically what are we going to do we are going to call the get right so but first I would like to check if first I will create a query field not field a variable this something is uh it's not good let me just check okay we need our Arrow function okay select query so inside query will give all the like a thing embed pop page and page and when we have the category specified in the function will append it will append it at the end of the query and what we'll do now will return and we'll call get this get and we'll just give are like this posts okay and we'll just give the query see how much easier it is when you are when you make your code smaller right so we just need to call get and then we'll pass the query and that query will be you know written the use page and from that usage will be accessing the data and all okay so that's done what else do we have will have the single post okay so let's do that counts get post not posts so async inside that function we need the slug the slug would be a string and would return this basically post and then slug equal to the slug whatever we have and then embed see how much easier it is to read right now so get post it will take a slug and then it will return the get function that we have already created on top of the file so that is done we have get posts get post so get post is to get all the posts get post is to get only a single post now let's do the same for the get categories and uh copilot is already writing for me he already understood how what I'm trying to do that's good so let's now get category uh is it and giving me the same thing okay uh I guess so let's check the API I don't think it is correct so let's just check the API inside API let's go to the routes and let's check for categories yeah so it is categories indeed and we'll be checking for the slug okay good so now we need to return all these functions so get post we have get post get categories then get category yeah good and we'll also expose the gate as well let's just expose in case if you need to use it somewhere else so our compostable is pretty much done now so now what we can do we can use this composable we can consume this composable and we can uh fetch the data right so how we can do that let's go to index let's remove all this thing we don't need that anymore uh so let's uh call that so basically const and we'll just directly call use on WP API will run it then we will call get posts so inside post we are not providing any categories okay so we will have to make the categories uh optional so we'll do that and we're pretty much good to go now it will give us the data and the data will be posts so there is a problem uh we have to make it a word because it's a it's it is returning a promise now you can see there is a problem and we can see it before running it because we are using typescript I'm telling it again and again so what I'm trying to do is I want you to use a typescript as well because this is awesome so you can see uh we have uh we don't have these fields right so previously what we did we have like given a generic Insight like use page so we need to do the same here but how will you do that so basically what are we going to do inside use get post we are going to accept a generic so like this we are going to accept a generic and then we will have to pass that generic to our get function and inside get also we need a generic and then we need to give the generic pass on to our fetch functions isn't that typescript amazing we are just passing some generic and then it would take form if I now send any here like this it would be it would be like it would it will not show error but what's the point you may ask what's the point of using typescript if I am giving any now that's the that's what I want you to do I don't want you to write any I want you to write an interface for post and then use that okay I'm saying again I don't want you to run uh I don't want you to write any create your interface and then use it okay so basically that's how you'll pass the type so hopefully if everything goes well it should work but let's see uh we'll refresh and we are already seeing some errors okay it is working okay it is working and we are um we are fetching the data with just one line of code we have offloaded all the code into our uh into our composables we are only using one line and it is giving us the post if we give the category ID it will then fetch all the data based on that category and then it will give us so that is pretty Sleek now let's uh move on to the single page single Blog Page how we can use that so let's consume our composable we'll have data uh we'll avoid for it use WP API then get post inside that we need the string so we'll pass params params is basically the use route from we are getting from the use route and we will use the slug and slug we are typecasting it to string okay so now I will probably get that data and we'll also get an array because that's how WordPress sends the data to us so now I probably let's create another variable uh not valuable let's just try to show it okay const equal to posts dot value and in zeroth index we need the value so there is a problem because that is unknown we need to Tire we need to give a generic type to get post as well so let's do that quickly so I'll give uh I'll take a t here a generic here and I'll pass it to our very old good friend get so that is done now I can what I can do I can give any I'm I'm saying this again don't put any see your API response and create the type and then put the type here okay don't write any I'm saying it again don't write any I want you to do that yourselves so let's show the post title post a title let's see what happens uh let's go to the okay we are getting the data but we need to show the rendered version of the title so rendered we are getting the title now we need the author name and the date so where can I find the author name let's check uh I will like WP post and I will check for the slog okay so where is our author name Auto name is not there so whatever we can do we can embed it like and embed and it will give us the embedded content as well now we would have the okay so embed is not there so let's check what have we missed and there is one we are we missing something hold on okay let's check our composable embed okay so it would be underscore embed not embed on okay so underscore embed is there is there so let's check yeah so embed is there now we have author we have the featured image we have the term storms are basically the category so you can see the categories as well so good so now let's uh take this thing and show it here on the slog so basically the author name would be would be uh where this here I guess yeah so Elon Musk would be replaced by post Dot uh embedded then inside embedded we would have something called author inside author we would have the author name right for the date what we can do we can take post Dot embedded no date I guess date would be a standalone variable itself okay so we have the date we have the we don't have the author so we have to do something uh author it's okay inside author we have multiple we can have multiple authors so just the zero uh zeroth index that would be take the first element and show the written by jahid and published on this particular date so don't worry about the timestamp we would convert it to a readable that using our DJs okay so yeah so we have that now let's just replace this image with the image from the server so what it will do we will change the source and we will like we bind it because we are going to give some Dynamic variable and we give like post embedded WP media this is uh again this is uh what we have inside the embedded because this is a related content uh this is actually a linked content not on the same level so we are just giving Source URL okay so now it will show you the value what I want to do I want the I want to make the height a little bit bigger because it's not looking good so I'll just make it 350 maybe and let's refresh oh it's not changed I don't know why let's refresh it again oh no it was like a height for this 300 maybe 300 would be good let's check no it's not make it 400 maybe perhaps 400 is also not gone maybe 450 would be better okay 450 looks better but I have to make it 500 sorry okay now it is very good and we have the content so let's uh render the content as well so what I would like to do I would like to take a a div inside div because oh we are getting the HTML content so we need to render the HTML content using the property uh V HTML so inside vhtml would give post content Dot rendered so what it will do it will take the HTML content and then it will render the HTML content it will not show the HTML content okay so yeah so we have our blog content we have the embedded things as well because we are rendering the HTML now we have home we are getting the blog from the home we are also getting the blog posts Dynamic images what else do we need we have this all these things coming from the server now that is done now we need to create the category page same way we did the home page so let's go to the category category index page we will tap into the script then we will get the data from our away use use WP I don't want the auto completion again then get categories and we'll get the data will capture it inside our categories variable we'll put the categories here uh and then we'll take it like this I'll take it like this okay category then I will give category dot ID but now you'll find the same problem so let's just go and add the generic here as well so I'll take the generic like this I'll put it I'll pass into the get let's do the same for this one because I know I'm going to get that error and I'm telling you again do the typing okay don't just be lazy and write any like me then there is no point of writing it in a typescript just do the normal JavaScript I'm again uh telling you don't write any type type it using like interface and then give the interface here so basically that's uh category category dot name and here we would like to write category dot slog so string interpolation has to be done like this and we need to bind it properly so it should probably work let's check let's check what happens okay we are getting all the categories that's awesome now we have the dynamic categories we have a dynamic post we have Dynamic single post page that is all done now let's uh let's let's uh let's do the category uh page category archive page as well so when someone click on it it will show the uh post that is related to jumpstart category okay so let's go to slog page inside categories let's tap into that let's get the post it is quick isn't it once we write uh once we upload the business logic it is really easy to you know implement the features so use WP API inside that will get post see where you're using the same variable will give any but again I'm telling you don't give any and then here what what it will do we'll just route params and slug as a string we are giving the um we're giving the categories uh name okay we'll wait for it what's the problem here okay so I guess there is a there is a problem oh yeah so first thing uh it is not as easy as it looked like so first thing what we have to do we need to uh have the category ID but right now we don't have any way to uh fetch the category ID we just have the category uh slug right that's all you have we have the Slugs only so we need to make two uh API call I know that is not a optimal solution but right now we just need to work with that so first we'll um we will get the category ID with the category slug and then we would get the blogs from the from the category ID so first thing I will do so let's just write the round write down the step get a category ID then get post related to category ID okay so these are the two things we have to do so first let's let's fetch the category data we would get the categories yes equal to avoid use WP API get categories and now uh here we have to uh okay so I think we didn't have uh mentioned that that Fields so what we can do instead of using this we can use the get uh variable and we'll just past categories and what would be our slog so categories and then the slog would be our route params and then slog okay so right now we'll get the categories so once you get the categories what we will do if uh okay in any way next is going to handle the error first so if something goes Southward next will give us the error so we don't need to handle the error ourselves so next thing what we are going to do we are going to get the data we'll call Post and then we'll avoid for it and then we'll use API we'll get post and make it any and for the categories let's just put any here as well so basically what we are doing we are first getting the category ID using the category API category endpoint using our slog and then once you get the category ID we are just passing it to get post and we are getting the post so that's the beauty of uh reusing uh the re composable you can like reuse this thing everywhere in your next uh application so if you have a very large project then you you can write these kind of composable for each resources and then you can use that uh throughout your project so so now what we need we need to show the blogs so we have a reusable page header page hello so inside that I'll give just a title and let's just store the first post inside post or value 0 and let's post Dot title oh not like that we need the category title right so categories zero we know we are only going to get a one category so that's why we are hardcoding it right so we'll get the title and we'll show it here maybe we're gonna We Are Gonna prepend that with something like this um like like archive archive and then colon that's what uh WordPress does by default right so that's what we are also doing so we have the page header and it should work properly let's see okay it is undefined that sounds expected let's refresh it again okay there's some problem so basically categories and slog so let's try to console.log the categories what happens let's see what happens inspect console okay we are getting an array okay so um I remembered uh categories doesn't have the field called title it has a name okay so once you give name and see bam we have our Dynamic title so if you go categories categories list will be there you just need to click on the category itself and you will get the category page okay that's cool now let's render the blog section the blog grid so what I'll do container by12 and inside that we will have a grid um we'll have three columns grid calls three and that would be when we are on the bigger screen on tablet size to bigger screens inside that we will render our blog card component so blog blog see uh copilot is already doing this stuff for me okay so yeah so first thing we took a Blog card we are looping through the posts we are binding the key to ID we are giving the title we're giving the excerpt we are giving the image and the slog so that will basically render our post related to that particular category now if I refresh and I go to like for example devops I only need to see the devop now the devops post so you can see we have the devops uh post so yeah so that's working uh right right so let's click on laravel and you can see there is already two posts now there is a issue you can see the cards are stacking with each other so what I'll do I'll just give some Gap like five and there you go we have some really nice cards uh and the content as well congratulations guys so I guess uh you have already uh we are done with uh the business logic part the integration part and showing the API data to our uipath also we are completed now what we'll do we'll do some finishing touch the project and then we'll call it a day okay and we'll also do some little fixes so what uh what are the fixes uh is needed so let's talk about that so if you go to the single blog post you can see although uh there are some heading there are some like paragraph but you can see uh the the spacing is not there right the spacing is I'm missing and it is looking very odd so if I inspect it you can see uh there's no spacing there are like a lot of heading element as well but the heading is not showing properly it is as it is looking like it it is normal page uh on a normal text so what we'll do we'll add some style I'll and we'll make it uh beautiful so what we'll do let's go to the slog page inside slog Let's uh add the styles tag inside stall tag uh what let's just give our post content class it's already given so I'll just take reference it here and what I'll do I'll take H1 H2 H3 H4 H5 until H6 oh it's not work like that so what I'll do guys I'm not provide CSS okay so don't judge my CSS skill I just walk with a tailwind and call it a day right I'm not a pro so just don't judge my CSS go okay so what we'll do will apply mb2 okay so what this will do this will give some spacing from the bottom uh maybe rmb3 okay so that is looking pretty good now what I'll do I'll do some I'll give some spacing from The Paddy uh from from the P tag as well so mb2 it is okay so that is looking good and I'll also give some padding from top and bottom from the image so from the image tag I'll give like four because I need some like spaces around images right so now that is gone what else is there to do so we'll give we'll make the heading bold by default so font bold this will make the heading bold and now for for H1 h21 H3 let's give them a content H1 so apply text 3XL for post 2XL for 3xo for H4 LGC how copilot is helping me writing CSS thing okay we are pretty much done with that design I guess so let's refresh it again and there you go I don't think that it it took the uh H2 Styles but anyway let's check some other posts Maybe devops not devops let's check this one okay so let's just so guys the point is uh you can do like whatever you want right so that's what I wanted to show you actually there would be some okay so there is a t missing inside uh content okay so I'll just fix this quickly and save it and show it to you okay it's now looking much better than before and uh and the other things are also working correctly the images are not showing because it is lazy loaded so there is a lot of space for improvement and that's what I want you to do I want you to do those Improvement I'll tell you what to do and uh post it on uh our Discord Channel and let's discuss okay let's discuss what have you improved and what uh what the things you have improved and make me look bad okay so just uh join so the main thing I wanted to say just join our Discord server so yeah so the page is looking good so one thing I want you to improve is add some hover effect add some hover effect on read more as well make the design responsive I guess it's not responsive on all the devices uh yeah it is responsive but there are still some issues okay so fix that in encoding Pages add some maybe add the code highlight features and all and you can also uh make a pull request on the GitHub okay so yeah so that's pretty much it that's pretty much all about uh this project and I will maybe uh not maybe for surely I'll meet you in the next video with another Banger project so make sure you subscribe the channel make sure you uh join us on our Discord Channel and also you can find me on Twitter with the handle.dev and I'm also available on Instagram although I don't post anything so you just you don't need to follow me on Instagram okay just go and follow me on Twitter or uh and join our Discord Channel that's the main thing okay we'll build together we'll build a lot of things together and will obviously make you a better developer so yeah so that's out of the way uh we have already done all these things so let's just revise quickly what have we done so far let's go to the GitHub repo on GitHub jacket and then next three WP blog okay so this is the official repository you can see the demo as well you can pull uh you can make a pull request if you have any updates so in this uh see in this video what have we discussed so far we have uh you know we have seen what Knox tree is we have given a brief description about nox3 we have seen how you can use wordpressed API we have seen how you can escape fold an ox3 project from scratch we have we we have seen how WordPress project works then we have talked about the direct structure of the nox project then we have started the designing project designing part using telu in CSS and then we have designed post Pages category Pages we have created a reusable component which you can use uh on any other nox project or or the same project itself then we have uh created our own composable uh functions and use it throughout the pages and the only part is missing is the deployment part so let's just deploy it I already forgot to deploy it so let's just deploy it right now in front of you and okay so deploy it to deploy this um thing what you need to do you need to uh you need to upload this project to the GitHub so let's do that so go to GitHub and let's sign in sign in to your GitHub create a new project then give it a name knocks I'm just giving the nox3 demo with WP then select public and then click on create Repository as that is done now let's add the repository to your project click on get not click on just write git init it will initialize the get now uh what you can do you can add the remote Repository how can you do that get remote add origin and give the your GitHub URL which we have got from the creating the repository itself so once that is done click enter now uh comment now add all your changes now what you can do you can comment but I will show you how you can do that from the UI just write the comment message initial comment boom and uh click on comic okay once that is done you can either click on publish Branch or what you can do you can just click uh just write get push origin main okay and then you can give also the U flag okay and it will upload your code to your GitHub repository now if you go and refresh you can see all your code here now you can share it with your friends and you can brag about your project right yes too much uh lame joke I'm making I know guys but this is uh how I am okay so just bear with me it's almost ending so now go to your reversal so uh to get started with reversal what you need to do you can go to Virtual and then sign up it is free just to sign up with your GitHub or gitlab whatever the Git Version management you have or you can just continue with uh email once that is done connect create on click on add new project then select a provider in our case we have added it in GitHub so I'll just click on GitHub now I'll be able to find my nox3 demo app I'll click on import and here inside root directory I'll keep it as it is inside build an output I would change it a little bit I'll make it nox generate because we want the static version of our website to be generated whenever we make a change to our repository it will automatically uh take the change build the project and deploy it on their CDN we need to override the output directory as well and that's what we need and then for the environment variable we need uh to give the environment variable in our case I'm just go uh we just have one infinite variable which is uh this EnV file and inside that I only have one variable so I'll just copy this key and I'll just paste it so when you are doing it make sure you put your website URL not mine okay I wouldn't mind but don't add my okay so edit and now click on deploy so now it will start building our project you can see what it is doing inside the log building logs so you can see it is installing uh yarn it is installing uh the node.js all of the thing it is doing for yourself so you don't have to do it so just wait 10-15 seconds until it loads Amino while you are doing that just make sure you have subscribed our little Channel and also you'll find the Discord link somewhere here or maybe inside the description so go there and join okay and if you have any question you can ask me directly on Discord or Twitter so my Twitter would be Twitter slash dot Dev go here make sure you're following I post some like funny stuff or or what I think is funny okay and also coding stuff as well so just go and follow me there and let's check uh the status of our project ma'am our project is already deployed hail Elon Musk our project is deployed right now I can if I click on it I can see my project has been deployed awesome if I go to categories jump stock devops I can see the project I can see the content wow awesome so that's it guys I hope you have liked on this project video I'll uh come back again maybe next week with another next JS and strappy video okay so for that for the updates please uh follow me on Twitter and also make sure to subscribe the channel and join us on Discord so meet you in the next video it's uh until then stay blessed and stay happy and keep coding keep rocking bye

Channel: Jahid Anowar

Views: 16,171

Keywords: Nuxt, Nuxt.js, nuxt 3, wordpress rest api, tailwindcss, nuxt.js 3, nuxt js project, vercel, nuxt 3 project, nuxt blog, nuxt js blog, nuxt 3 crash course, nuxt 3 tutorial, nuxt 3 course

Id: fY2sfrV2zho

Length: 142min 26sec (8546 seconds)

Published: Mon Nov 28 2022