Create Blog Application using React and JSON Server

1. Introduction: Hello my friends. Welcome to this course in which we are going to learn. We can clear the blogging website of the hair bulb. And Jason said, my name is Tony traditional and I will be your restricted in this course. In this course, we are going to see how we can create this beautiful blogging website with the help of objects, reactants, AND gates instead of a, there is no back-end involved in this application. So this code is broadly design part, but aren't any developer for dorm type, any kind of background knowledge. So let's have a quick demo of this blogging application, which we are going to build in this course with the Health Bot reactant defense side of it. So currently we're throwing five block benefit. And if you scroll down, you can see that we have a page emission per click or negative. You will see next five block. But at the moment we have a nine blocks in the duplication. So it's showing only for the blog on this click on Preview, you will back to the homepage. We ever looked at both section. Where do we explain life for your blog? We have a cardiac live load, so we have a Carnegie like drive certain that his board. And if you click on any critically, this will get filtered out, particularly in order. But you can see that for this particular, we don't have any blog is for do we have to block or you have to look. This way also, you can finish out audio block, okay? Now, this one, we will get out all blocks that we have not yet tenth silver. Now let's see the correct region of this blogging application. But first I'm going to add a blog yet, and I'm going to give it that delay. Blog, the demo. I'm going to paste them long description. I'm going to add the immediate. You can see that regard methods image of loaded statistically. We are going to select a category like fashion. And let's click on Add. This blog is detected fully. You can see that we've got here like decorative block demo. You can see there under letter for section. And in order to proceed, It's blogging this guard component. Then you have to click on Next. You can see that this blogging and getting it over here. We have our creative block. Now, we can also delete a block. Let us perform the delete operation. Click on this icon. This blog will get diluted. We have board method block diluted technically. You can also update the different block. So let's update this one. Let's start with the board blog update. You cannot update the image here. You can update description and particularly so let's update this one. You can see that our blog is also getting updated typically. And we have a third functionality as well in this application. You can also set it the blocks. I'm going to set it to blog with tactic keyword. And if you click on set, you will get out, that is block with this given. And if you click on this cross, you'll get a backhaul block that we have in our AND gates instead of a we have a Timperley board feet as well. We have also not form fit if it is not mating. Also going to learn that if the data is normal route match. We have a detail bit as well on this application, click on Read Mode. You will never get to the detail page of this particular block. And if it's cooled down, you can see that we have a description. We have also related to this particular blog as well. From here also, you can navigate dirt is the detailed block bit. So if you click on this card component, you will navigate to this new delegate of that particular block. If you click on go back, usually navigate back to the homepage. The overall application that we're going to build in this course with the helper and different server application. There is no back-end involved. We are going to be used only in GitHub. Server will implement all these features. You can tell that this code is designed for a content developer. Don't have any non-lethal back-end. Because we are going to implement all these kids like 13 degeneration, filter adding, creating, deleting and uploading with j sine Theta. But only in this React application over the application that we're going to build this code with React n GSM, fix that. But now let's talk about the basic requirements before you enroll into discord. This course is designed in fact, of a deck. Anyone can join this course, warden character to learn how to create a website with the Health property again AND gates, you just need to have basic understanding of HTML, CSS, JavaScript, as well as React basic knowledge. Then doctors quotes, you will have Poland regarding how to create a blogging website with the help of JSON. So what are you waiting for and run this code in order to learn how to clear developing reflect with the head prof, reactant side. And if you have any query bar suggestion, then you can always reach out to me. I will try my level best to solve your all query. From my end, I will see you in the course section. 2. Environment Set-Up: In this video, I'm going to discuss what are the tools and software required to work on this project. In this project, I am going to use Visual Studio Code editor to write our code. So make sure to call this cognitive origin so you can download this motive origin. I have already downloaded this one. And the next thing that we need to install the node j as well in order to have a development server for reactants here. And also along with note there, you will get a npm package manager to install the dependency and make sure to install the node? Yes. Let us do one. I think that's it. That's all required for this project. Now, I hope you have installed both node j and Visual Studio Code editor in your system. And you can verify whether the node JS it installed or not on your system. So you can go to the CMD, open, opening my AMD, and you can run one command here, node hyphen v. You will get the node of origin that node JS told on page term. Now, let's move on to the Visual Studio code will need to toss in our Visual Studio Code to make our development DG. Whoa guys, I have opened my visually if you do code and we need to install thermic tension. That tension will be like first unit to install this bracket air. Basically it will colorize your opening and closing bracket. And I have already installed going you to install this actins and so you can hurt the dissections and like here, bracket here. This way you can install this one. Directed sunlight unit to install this. This is snippet, a snippet on. So mythically help us to generate a reactance is snippet like if you want to write a functional component, then you have to just write RAF's. It will be weekly agenda functional, a component. It's very useful to generate some reactants lipid with the help of this attention. The other thing that we need to install like this quote, permitted is required. You can install this one as well in order to meet our board. That's it. Only this much that transient required in our Visual Studio Code. I will see you in the next video where I will start set up the React JS project. 3. Set-up React Project: Guys, now I'm in this directory and I'm going to open a command prompt here. Let's open a command prompt. I'm going to create a React application using the command and picks Create, React app and the app React JSON block. This will be our app name. Let's hit Enter. It will take around two to three minutes to install all the necessary dependency. I'll be back once all the dependency. So guys, our project setup got completed. Now, let's first go into this directory that is react, JSON, blob. Now we are in this introductory before we do npm start when IT to install some packages. We are going to work with the react router dom. Let us install this package. React router down axis we are going to use. Then we're going to use React to certify or displaying the toast notification. Then when it too tall, IMDB react UI. That because we are also going to work with the material design both trapped in this project to build our component. Let us install these packages. And meanwhile, I have already opened this project in my Visual Studio Code. Let's go into the VS Code. So as you can see that this project is open in my Visual Studio Code. Let us remove all the unwanted content that we have in our app.js file. I'm just going to give here one heading. Blog. Lets remove this 1 first. And we don't need this text file. Let's remove this one as well. Let's remove this logo dot as SVG file as well. Now, let's check whether our package coordinate told or not. Our package button. Let's do and demonstrate and wait for the application load into the browser. Application load into the browser without any issue. 4. Set up JSON Server: So the next thing what we have to do, so I'm going to set up our JSON server here. So I'm going to create one file in the root, that is db.json file. And here we are going to have one blogs because we're going to have all blogging. Let's just, let's put either in particular now, this era, because we are going to store all this blog inside this array. Now, we have to write one is cribbed to start our JSON server. So I'm going to page 20 script to start this. And JSON server. I have just pasted this is script. To start JSON server. We have got our axial MDB, react UI Create, React router, diamond reactor. Only this four packages are required to work on our blog application. 5. Folder Structure: Now the next thing, what we have to do, I'm going to create some folder here. First for little gonna be components are all component will be placed inside this folder. The second folder, we are going to have pages. I'm going to create some file inside this PDF folder. We're going to have like our homepage, home dot gs. Then we're gonna have our blog page. So we are going to use the same page, but adding the new block or updating the adjective block. The next file we are going to have life blog.js. So we can also view the single blog in a separate page. The files you're gonna have not formed. So we're also going to not fund method if the URL is not match. The other files we are going to have one more like about. It will just contain some basic information about this application. 6. Configure MDB in our App: Now the next thing what we have to do, so first, I'm going to configure our material is add Bootstrap in this application. So let's go to the official website of the material design Bootstrap. Let's click on Get started. What do we have to do here? Let's just come down. First. We need to import this CSS file to apply the styling of material boat trip in our application. So when it took page That's important statement inside this index dot js file. Here we have to pay. Now, the next thing what we have to do, we are also going to use this Font Awesome icon. Let's just copy this one. And let's paste it here inside this index.html. And we're also going to work with this rover font styling. Let's copy this one as well. Let's just paste it here. In third is public folder. I'm going to put my images. Okay? I'm going to bring the images in. Third is public folder. So I have just paste our images folder inside this public folder. And you don't have to worry about all these images because I will provide that ethers. So you don't need to worry about this all images. So till now, we have just completed our basic setup. 7. Enable Routing: Now the next thing what I'm going to do, I'm going to register all this route. So first I'm going to generate a snippet here. Let's just give a title for now, like about. Now, let's read this in a bit here as well, using the RFC. Let us give the title. You did. Let's center this in a bit here as well. It will be single blog in which we can view the detail about the specific blog. Now, this will be the title. We are going to have not formed as well. Let's keep for now, not formed. Now. What do we have to do? Let's go to the app.js file. And here we need to bring component react router down. We are going to bring routes, browser router, route. Let us remove this one. Let's say remove this one. At the top level, we are going to have browser router. Let's paste this content. Inside of this. Now, we're going to have all routes, so we're going to register our old route inside this route. React router dom got updated version six. So sweet is not available in the react router Dharma vergence six. So we have to use route. This route. If you wanted to rigid 35th figured out, then you have to return this route. Here. We are going to provide a path to five times went to register our homepage element we have to provide here. We are going to register our route like this way. If VS code automatically import this component and with routes we don't have to provide the exact keyword. Now, let's copy this one and the next slide we're going to have our blog. For this, we are going to use component added it block. The third route we are going to have, you did blog and we're going to edit blog based on the ID. Here we have to provide the ID. And for that also, we are going to use the same component to update the existing blog. Now another route light single block V. Okay? So user can also view the single blog that will be also based on the ID. Now, this time we're going to render the page like Blob only. The next route we are going to have simple About page. For now, let's just copy. It will be about that. R will be about. We're going to enter the about page. Url is not match. So in that case we are going to solve not font. Let's bring the NADH form component. Let's first check whether this all routers working or not. Let's go into the browser. Read this one. So home is already working. Now. Let's go to the blog. This is also working. Blog. Blog. We have to provide ID, but it is also working because we are entering the same component for adding the new block, editing the exiting block. The other routes we have like about this is also working. We have single blog, blog, dot block. You have to provide the ID here as well. So this is also working if URLS not match. So let's keep some random URL. This is also working. It's look, okay. We have successfully able to register our all drought that we have in our digit folder. The next thing I'm going to configure the reactive T phi in this application. I'm going to paste to import IF statement here. This blue imported treatment is required to configure, react with active in our obligation. So let's give you a container. That will work. We have also configured reactor. Let also is start our JSON server as well. So this is our directory where we have created our React project. Let's go and status folder and let's open one TMD. And let's do npm run. This is for k. So at the moment, we don't have any content to test this one. 8. Working on Header: The next thing we wanted to basically create a header component so we can easily navigate in our obligation. Let's go to the VS Code. And in status components folder, I'm going to create a file called header dot js. Let's find generate a snippet here. For now. Now, let's go to the official website of material design Bootstrap. Here, I'm going to use navigation component. I'm going to use navbar. And I'm going to use this number. So let's crawl down. I'm going to copy this code up to here. Let us go to the VS code and let's paste it over here. We also need to copy the component that required when IT to bring that component from our from our MDB react UIKit. So let's copy all this import. Let's put it here. We also need to bring huge state. Here. Couple of things I need to address. We are going to define one state. So const user state false. Here it will be shipped, it will be set. So we are just toggling here, so it will be. And here also we have to just put it. So we're going to create a blog. If i application, I'm going to put here our logo, what our obligation here. So here I'm going to remove this one and we're going to navigate to the homepage. It will be laterally. Here. I'm going to have my image. I can use here, image there. And sort I can give you our image for later than fade-out public folder. So images, and we have a logo, logo dot JPG. Alternate we have to provide so it will be low only. We have to give some inline styling here. It will be like height. This, and handle background color. And we also need to change the background color. I need to give here 5411 b. It will be light. That is fine. I think that's it. When it to change other stuff here. So it will be like only slice here because we never get to the homepage. The next chart we're going to have like ad block. Here we can specify that outlet ad block. The next block we're going to have about. So we can specify about. This will be about. We have to also give some inline style color. I'm going to give you a triple F. Let's copy this one because we need to use here as well. Let's use here as well. And let's remove this one, but don't need this one. We also need to add that as tally here as well in the NaBr toddler. I think for now we're done with this header component. Let us use the theta component inside this app.js file. Inside this app.js file, I'm going to bring our header here, will automatically import this component. Let us see whether this header is displaying or not. You can see that we have got our nice header yet. And if you click on Add block, we will have a good toward the added it is. Here. You might have noticed like it's, it reloading here whenever I click on the theta. Because with width the material design Bootstrap component you cannot use here to keyword. Okay? So two is not working with this MDB nav links. If you do too, Let's say if you give two here, it won't work. You can see that it's not working. You have to use yet, etc. There is an alternative way to use two. So basically you have to bring the nibbling from React router down. And then you can use yet naturally instead of MDB NAB Berlin. But in that case, you will get some warning in your console. So it's up to you if you wanted to use Nearpod link from reactor AutoDock, you can use instead of this MDB never linked. So it's up to you. Now. Now we're done with this header component in our application. 9. Configure Cloudinary in React: The next thing, first we are going to work on our Add Edit blocks. So first I'm going to enable operation to add blogs. In order to add block for expanded to do some configuration in our Cloudinary because we are going to hurt our limit in that Cloudinary. Then we will get the image link come or clouded from our Cloudinary. That image link we are told in our JSON server. Let's fight configured Cloudinary. So guys, I'm in my ordinary account. I hope you have an account on Cloudinary. What do you have to do? You have to go to your settings. So you have to click on this setting icon. And you have to click on this Upload. Let us scroll down. Here. You have to set your upload preset. You can do so. Just click on this Add upload preset. It will generate some random preferred name. And here you have to use unsigned. And let's click on Save. You can see that our upload 3 third is created here. You can just copy this one and you can paint it here in V, as in VS code. We are done with this basic configuration of Cloudinary. 10. Form Component: So the next thing we are going to work on our this added it blog page. We need to bring some component from our material design work to build a form component. Let's bring those components first. We need MDB validation. We are also going to do client-side validation from our end only, MDB input, IMDB, btn. And the next thing what we have to do, we are also going to bring you just tape. I also need axial. Let's bring that one as well from our phi. Let's print toast. Now, let's define our initial state. Initial state. We are going to have our pattern block. Then we are going to have a description. But our blog. Then we're going to have category image you saw come Cloudinary. We are going to get immediate atoms. So we are going to be stored that you already, it gets instead of. Now, we are going to have a different, different category. In our dropdown options. We're going to have a category like Ravel. Then we are going to have category Life Fitness, Sports. Then we're going to have food. Then we have a sixth category to create blog. Now, here we are going to have on value. So form value, set value. You just did. Here. We are going to pass initial state. After they're going to have one editor method for category we bought or dropdown. We're not willing to use there an MDB React component. So we're going to use a normal HTML drop-down to create a category dropdown so far that we have to also manage a separate method in GitHub. So we are going to handle in a separate state, the state contemporary methods. This will be null. Now, we are going to destructure all this value, Ahmad form value. We are going to distract it like title, description and image URL. Okay? Now, let's work on our own components. We can remove all this thing. Here. We're going to use IMDB validation. Inside that. We're going to give it a class name. So here we are using both grep plus nib. And after that, we can have some inline style like margin, top pixel. You have to give no validate. We're passing this novalidate props. And we're going to have on some met handle submit. Let us define this function. Otherwise, we will get it out. Okay? So let's define this one for now. We will add the logic later. In third this and we're going to have one p tag here. We can give light blob here that we can give some class name to style this, to style this heading. So FS, F, bold. Let's first see this one. Look like. Let's close this one. It's not required. Let's click on this Add block. We have got our heading ad block. After that, we have to work on our input file. So div inside this I'm going to have. I'm styling. I'm going to pick some styling over here. This is tiling. I have just pasted over yet. We're going to have our IMDB input. We can give you a value. Then we are going to have like name, title. Then type will be the externally. Then we are going to have our onChange method. Basically track the state of each input field on each gif prop. We're going, we're going to have one on input change. Then it wouldn't be required only. Then we are going to have level. So it will be title. Then validation method you have to give in case if input field is in poverty. So we can give them method. Let's provide a title. We have to give it invalid. Now. We are going to have a break here. And after that I'm going to copy this in portfolio cupola. That for description files N category. I'm going to copy this input a couple of time. Let's copy this one. The second one is description. Description. Name will be Description. Dipole protect on change will be our input chain. It will be required. Level will be the description. Here we can give leg. Please provide a description. Description. We are going to use a text area. We can split failure detector area and we can give rows of two part file. We are not going to use type equal to this. It will be phi located in PSF file. Value is not supported, so we have to remove this one. For this, we are not going to work with the oninput J. For this, we are going to use a separate function that will be Upload Image. So on Upload image, this will be on Upload Image. And here we can delay dot target. Now, after that, we're going to have drop-downs. So we're not going to work with the material within bootstrap drop-down. We are going to use the STM earlier. Select I'm going to use here. And here I'm going to use the class name. So category. We need to define the styling in our index dot CSS file. Let's give first class linear drop-down category dropdown. We're going to have on tint. For this also, we are going to handle in a separate method, okay, so on category value we are going to have available with the category only. Inside this, we are going to have our first option. So fact options available the depart of sunlight. Please select category. Please select category. After that, we have already defined our options here. You can see there at the top. We are going to map all this option. Here. We can use options dot map. We are going to get single option. We are going to have index. Here. I'm going to use Option. And in fact this, I'm going to have option inside this value will be the option. You can also give this in particularly in GitHub populating the existing value. Let us give it now. We're going to give you an index. Otherwise, we will get a warning. Let's provide this in other input field as well. So here also we can give detailed with Italy helpful to popular the existing value on each input field. In case of getting the distinct blog. We will use this in particular. If you don't use, you will get a warning in a console. We have created this drop-down. Now. We have to work on our button. Let's give a couple of break here. Here. I'm going to use MDB in btn dipole with some width. And I'm going to use some inline styling. I'm going to give here margin. And it will be ten pixel. Here. I'm just going to give and let's copy one more time because we are going to have one Go Back button. It will go back. We are going to use here color, danger. Let us remove type submit. We don't need. Here. We are going to have our onclick method. But typically if you click on go back, so you will never get towards the homepage. So we need to bring navigate from R. We need to bring US navigate thumb or React router down. Let's bring this react router down. To bring us navigate. And pulse we have pushed toward that parental. Use navigate into it, navigate variable. Now, let us use this navigate variable here. Now, we have to define all this function that is oninput change and on Upload image. Let us define this one. Outside this return. This will receive an e-mail. Everyone. So both function will be given event X bars here, event current uploading, uploading, it will get pile here. Let's first check whether we are able to see our form component or not. So let's go into the browser. So on category. So we have to define const on equity change. Let us define this one as well. Let's go into the browser. This one. In GitHub input type file. We don't need to provide the name. Okay, let me get rid of this one as well. Level also, we don't need to provide. So let's get rid of this one as well. Now let us go into the browser. So our form looks fine here. Now we have a little bit work on, on this drop-down category, okay, because we are using our plain HTML drop down here. I have added the class name here. You can see that category dropdown. So we are going to, we are going to use the index.js, CSS, failure to apply our styling. Here I'm going to pay some styling. So I have this vector, some secret code for this class name. Now let's go into the browser. But now you can see that our category dropdown, it almost looked like material design component only. So I have just try my best to make equivalent to the material design Bootstrap component. Our format completed over here. 11. Upload Image: So the next thing we have to basically add the block. So before we perform this adding block, so first let's work on this pilot. Okay, let's go to the added it blog.js. Let's go to the Upload image. And yet we are receiving file. So let's first console log console log over here, File by local. This is a little bit challenging. So let's first go to the console. Let's open our console. So I'm going to put this console side only. Here. I'm going to upload one image. So let's upload an image. Now you can see that we have got our BY earlier and it's contained in a single area of object. We can do something like this. It will be always a single array of objects, so we can pass like this. Now, let's return to the browser. Refresh it, upload this one, again, this image. Now you can see that we have got one object here which contained name size, type, all contain five time going to work on this on Upload Image function. Here. I'm going to particularly good here, like const data. New data, form data basically contract a set of key-value pair representing form pill. Here basically we are creating a key-value pair for our Farmville that we can interact with our Cloudinary API because we are going to hold our limit on Cloudinary. We have to make an API request and form data is basically, we can easily make HTTP requests with the help of form data. We can make a periodic rate and we can upload our image on Cloudinary. So that's why we are using here from data. Now after that we have to basically append. So form data dot append. And here we have to give key and value. This will be value data, dot append. And here we have to define our upload preset. So it will be upload preset. Here we have to pass our upload preset value. So we have already copied this upload preset during the configuration of Cloudinary. Let's put it over here. Now. We have to make an HTTP request. So we are going to use x's and we are going to make an API request with our Cloudinary TP, APA dot, Cloudinary dot. Then one underscore one. Here. We have put out DB, nine, Q, C, D. So if you are wondering what is this? So if you are wondering what is this? This is the API key. Once you create an account on Cloudinary, so you will get your API key. So let's go to the Cloudinary, and now I'm in my dashboard. And here you can see that I have cloud name. I have used this Cloud negative. Once you create the economy, you will get your own Cloud-native. So don't use this clade name because I'm going to do in this clade name. After uploading this video, I want to work with this cloud name. I have just copied this one. Let's put it here. So I don't make any mistake. Now that we have to give image upload. After this, the EU already be the image upload. Here we can pass our data. Now. We will get our response so we are going to dissolve in it. Then method. Let's first put your console, console dot log response, response. It will be it as bond. So let's response sort form of response. First, let's upload an image. We are going to check what we are getting. Promote. Refer this one. Let's upload this image. Here will be bought response. In data. You can see there we got our URL. If you copy this URL, and let's paste it here. Now you can see that with this URL, we've got our image that we have uploaded. So we're going to store this image. You are linked in our JSON server. I have used Cloudinary for this project because in GSM Theta, but you cannot upload an image directly. The reason I'm using Cloudinary for this application. The next thing what we have to do, Let's blow this one. Let's go to the VS code so we can remove this console log. We can give some kind of information to use it, whether image got uploaded or not. So torch dot info. After that, we can give image uploaded successfully. And after this, we have to do we are going to set out form value. I'm going to spread out our own value. And I just need to update the image URL so the URL and how we can get the image URL. Though, we have to go to this response dot data, dot URL. Okay? We have produced something like this over here. Dot delta dot URL. Let's handle that guide as well. So if you've got any kind of data, let's say some kind of notification. And we can give our own method like something went wrong. Upload the myth and done. 12. Add Blog: Now let's work on this on input change. We are receiving the event and first name and value from the target name. Value, set value. I'm going to spread out on value. Here. It will be like name, value. And let's also work on this on category. This category change will also receive even II. After that palm value. It will be like form value. Here we're just concerned about our competitive field category. Target value. Let's go into the browser. Let's close this one and let's see whether we are able to type anything or not into it inputField. So we are able to type upload already we saw, let's select category. We are also able to select this category. After that, we are going to work on our handle submit. Handle submit. First, let's do les dot event. Here basically, we are preventing the default behavior of a browser on submission. Form in pity. If you just click on it without providing the value into each input field, we will get an error message. And for this category, we will not get an error message because we are not using the material design components. We are going to provide our own method here so far that we have already defined the state. You can see that over here. After that, what we have to do handle submit. You can take your life. If you don't have category. Then we can set the category method. And the method will be like list, select the category. The moment user, select the category from the drop-down. Then I'm going to set this category to null. So let's do that here. Only set category error methods to null. Let's display this error method. Below this select. Okay, I'll put this select. What do we have to do? We're going to first check if you have the category error method. Then we're going to display that on. And here I am using one class name here. So that will be late Caltech three. Corteva, my face. This glass name I'm going to use with div. Here I'm going to category edit method and I'm going to pick the styling for this category editor methods. In third, this index dot CSS file. I'm going to have my category at atmospherics class name and I'm going to pick the CSF code for this class. This is telling I'm going to apply the category error method. But let's go into the browser. Now let's click on Add. Now you can see that we have got the item message for category dropdown as well. And the moment you select a category, it will disappear. And the same thing we'll use for every edit and put fill. And I'm not uploading the image for this file because it will again upload the image on Cloudinary. So I'm not going to upload the unnecessary. Leave it there. Now, we're going to add our blog in JSON server. We have to work on this handle submit. Let's go to the Edit blog.js file. Inside this handle, submit. Where we have our handle Somewhere. Here. We have a hundred, two hundred. So inside this handle somewhere, first, I'm going to take we have the title. If you have the description, if you got the image URL from our Cloudinary, and it is. And if it's electric category, then only you are allowed to create a blog. This is our first tick. After that, we are also going to date while creating a blog. So we need a data as well. So cost. It's cool to have to define this. Did we have to define this in great depth function which are responsible for getting the current debt at the time of creating the blog. Yet I'm just going to paste some code. Okay? I'm just expecting a code over here. In this code is required to get the current debt at the time of creating the new blog. Here, we got our current debt. Now. After that, we have produce our form field. We need to update our form value with this current date. Updated blog, delta object. And I'm going to spread out our form value like title, description and image URL and category. I'm going to add one more property that is dead. Yet I'm going to pass here. Current debt. After that. This handles numbered will be a thing because we are going to deal with the APA here. Corresponds to a weight. Yes. It will be post requests because we are adding a new block, http localhost. And our JSON server is running on five thousand. Five thousand. Then we have already defined this blocks you can see there in our db.json file. So are all block is going to be stored inside of this blocks at it. After that, we're going to pass this updated block data. Now, we will get a response. So if let us fonts dot status square root to two, not one. While making a poor frequency v always greater to naught one status from our AND gates and server. That's why I am taking here do not want to state it. So I figured this misstated. Then. We have to source access method like blog it created successfully. Taught success. Here we are late. Blog created successfully. And in case if you have some kind of better. So we can give method like Bush, not error material. We like something went wrong. After this. What we are going to do in our project, we are going to be totally clear out each input field. We can do form value. And the title will get temporary. The title input field, description will get empathy, and category will get input D. Let's also in the image you added, obviously, you will not see this image URL, the UA. Let's temperature this one as well. After submitting the blog, we wanted to navigate towards the homepage so we can use this navigate. Okay, we are done with the logic of adding a new block. Let's go into the browser and create our first blog. I wanted to create a 4D block. So woodblock, we can give you a teddy let food blog. I'm just going to finish some load arm. If some content description. I'm just paste here. Let's select one file yet, I'm creating a 4D block, so let's select this image. We've got here method like image uploaded successfully. We got this information from our Cloudinary and it is a four block. So let's select the category for dn, and let's click on Add. Regard the method like block created successfully. Let's verify this one in our db.json file. Let's put a db.json file. And here you can see that we have got our title, description, category, image, URL, dead, and ID. We have successfully created our five blog in this application. 13. Working on Badge: The next thing we are going to work on our this batch component. So basically in this category I wanted to show in a batch, one batch component, batch gender this in a bit here. I'm going to receive children. Dial four. I'm going to define some color key based on the category B object. So for this fashion, then it will be parameter travel. And then we'll put this access efforts fits net fitness. Then it will be the injured. If it's food, then it will be warning. Then it will be the info. Sports. Now, we are going to have this style for info. We're going to use here F5. F5. After this, I'm going to use MDB. And in third this I'm going to decide based on the category, okay? So this embed color will get J and based on that category, color is calendrical to color. Here we can pass the children. Here it will be the children. Now, let's use this batch component inside this blog.js file. We use P tags so we can use batch component VS code automatically import that bass component. Now let's go to the browser. You can see that we have got our nice bed for this food blog. The next thing I wanted to perform the delete operation. We can delete it belongs. So for deleting the blog, Let's add one blog here. I'm going to add on blog test. I'm going to give some description here. I'm going to upload an image. Let's upload this one. Regarding my image uploaded successfully. Let's upload inside this fashion. Okay, let's click on add. Our blog is created successfully. You can see that we are able to see on our homepage. 14. Delete Blog: Now we want it to perform the delete operation. We have already defined the function in our home dot js file. Let's go to the home dot js file. Here we are receiving the ID from our this blog.js file. And this will be the eighth thing because we are going to make a request here. Inside this. I'm going to want the user, like, Are you sure you want it to delete that blog? I'm kind of message to use it before they delete this report. So our issue, you wanted delete that blog. Something like this method I wanted to show to the user. Once the user click on the block will get diluted. You can just copy this one. Everything, because it will be the similar only only the request will want to be changed. So deliver that delete. We're going to do it a blog based on the ID. So I'm going to use here backpack so that we can pass the ID. Once you get that response, which Theta is like 200. That means that means our blog is deleted successfully. We can give them toes towards success. Blogs deleted. That says fully, okay. I wanted to finish the latex data for mode yet and terrible. I can execute this function. Well for fetching the block from order and JSON server and an L, the method will be the same. Let's perform whether we are able to dilute a blog or not. Let's go into the browser. Let's click on this and delete icon. Regard this method like Audi showed that you wanted to delete that blog. And if you click Okay, you can see that we have gotten method like blog, deleted successfully. Delete operation. We have also perform. 15. Update Blog: So now we have to pop on the irritating the adjective block. So if you click on this edit icon, it will be ethically navigate towards the added it with five, we are going to populate all the existing value into each respective input field. We have to update filtering mode, like the title will be the update, block, button value will be the update. And in case of update, we're not going to update the image as well because it is not possible to populate the file value with in HTML input tag. So populating the value of our file, it's not allowed with the input type file located. In case of updates, we're not going to allow the user to update the image. Let's first work on populating the ejecting value on respective input fill. You can see that in the URL, we're getting the ID. We need this ID now added it blog dot js file. To get that added, we're going to use use param from our reactor down. You spatter. We can use LED display. Use items. We can detector the ID that we have in. Now. We have to do some more thing yet. We have to write one, use effect first. And here we have predefined one state will determine whether we are in immediate mode or not. The mode. More. It will be. Now if we have the ID, this huge effect on later on, once we have the ID, we have the ID. That means users updating the existing block. In that case, what I wanted to do, I wanted to set the edit mode to proof. We wanted to fetch the single blog based on the ID. So that way we will able to populate the value into each respective input field. Single block. So this function we will redefine, get thinner block. And here we are going to pass the ID. Else marked. We have to do modelling with a false obviously. Firm value also going to adjust. It will be like initial state. Now let's define this gets singular blog to face the single blog based on the single blog ID. And it will be the thing because we are going to make a periodic list. We will get single block. We will get, we will get a single block in object only. Cs dot get. Here. We can just copy this to you that we have in our handle submit. We can paste it here. And after this, we can basically set value. It will be single blob dot data. Let's go into the browser. Now you can see that we are able to populate all the adjective value into it. Let's productive and portfolio for this blog ID. You can also do one small modification here so in case API get filled, so a single blog dot status, Two 100. Then only you wanted to set the form value. You can just solve that notification to the user. Like something went wrong. Now, it will be a verdict at it is. You can go to the homepage. Now let's click on this Edit icon. Now you can see that we are able to populate the each value into its respective input field. Now we have to restrict this uploading, filing GitHub, updating the existing blog. Record it not possible with the input type file. And we have to change this heading. Now, I add a block to update vlog. The button will be the also GitHub at it from add to update. Let's do all these changes. Then we will update the existing block. Inside return. We can determine if he hadn't made it more than it will be the update block. It will be the Add button. Also, we can do the same thing like if we're in a bit more, that user is operating the existing blog, else that is adding the new block. And after that, what we have to do, we have to restrict this uploading the image file. Here. We can check like if we are not in edit mode that month you, that is that when you use it is adding a new block. So in that case, I wanted to show this. Let's cut this one, paste it here. Here you can use, I think fragment. Let's cut out or less thing to appear. Now let's go into the browser. Now you can see that in GitHub updating blogs, you cannot update the image. So you can only update the title, description, and category. The button value also got changed and heading also got change. Now let us click on this Add Blocks. We are getting this input file, upload the image. This is working. Let's continue working on our updating the existing blog. We have to work now on handled somewhat. So in the handle submit, what we have to do. We need to determine whether we are in edit mode or not. So if you're not in edit mode that when user is adding a new block, we can cut out all this piece of code and we can paste it here. And this will also get cut out part. We are going to basically update our rejecting blog. Yet. We can just copy this one. Here. We are not going to pass this data one day. It will be applicable for only adding the new block. Here we can just pass our form value because form value will already contain e-mails, title, description, category, did all these things. We have to also determine whether we are in edit mode or not. So image validation will only take care in GitHub adding the new block. So we have to also adjust this one. So cons, image validation. If you're taking like if you are not in edit mode, than we have to do a validation of the image. Whether it's uploaded or not. It will be the row. That means we are not doing an image validation in case of updating the existing blog. Here we are going to update the blog based on the ID. So here I'm going to use vector. And I'm going to update a blog based on the ID. Here I'm passing formed by the regression will be the status. We're getting 200 and get up a building the adjective blog. And the message will get from block related to blog updated successfully. In both gates like adding the new block Albert interjecting blog. We wanted to, we wanted to clear out heat input field. And after that, I wanted to navigate towards the homepage. Let's see whether they are able to update the existing blog or not. So let's go into the browser. Faster. Let's go to the homepage. Let's click on Edit icon. Let's update the title. Food blog updated. Let's click on Update. Now you can see that we have got our notification that's saying there, block updated successfully and we have got our tight and our title got updated from code block to woodblock updated. We have also perform the update operation. 16. Blog Detail Page: Now the next thing we're going to work on our single block page, so it should click on Read Mode. Then you will be ethically navigate towards the single block bit where you can read more about this particular blog. Now, we are going to work on this single blog page. That is, let's work on this singlet block paste. So I'm going to enter my VS Code it to bring some component from our material design bootstrap. From a derivative N bootstrap, we need to bring a component. I'm going to pick all those component here. This component is required in this file. Problem Material Design, move trip. And we also need here use parametric link from our reacted after dome because we are going to show the single blog detail with the help of ID. We need use param. Let's also bring the link. After that. Let's bring x here. X here is because we are going to make API request and let them bring our batch component as well here. Now, we need to bring hooks as well, where you just did use effect. Define one state, set blog. We need to define this as third here. Let it be in pity. And after that, we need, we need to wait to grab the ID that is coming here in URL. This ID, we need that purpose. I have bring that, use params. We have added here. Now, what we have to do, we can write one US effect. This user will only run once we have ID in the URL. Here, we can check we have the ID, then the single block. This function I'm going to define now, single block. This will be the think of it. Let's make it a thing. Because Seville, because we will be making an API request, the response is equal to x naught post. And here I'm going to copy the URL from our added it block file. Okay, so let's copy this one. Come to blog.js file and paste it here. After that. What we have to do, so you will get the response in a single object because we're fetching the single object based on the ID. Here. We can do set, blog and response dot data. And here also you can do one more thing. If the response dot status. If we got 200, this request will be the good not post. Because we are fetching the data from our JSON server. In that case, we are just going to set the block, despondent our data. And we can get some notification to use that. Something went wrong. We can give method like something went wrong. Now after that, so let's format this one. Now after that, we have to design one style in four per hour badge dial in for. Here. It will be display inline. Why I'm doing this and because there will be a different This tiling we have to provide for our batch component in our single block because we're utilizing the same batch component for our homepage as well as single blog page. We need to address some styling. So from this component, I'm passing all this styling. Margin left five pixel, gonna be right. Margin, top. I'm going to give you seven pixels. Now, what do we need to do here? Here we can remove all this thing. We can use here, MDB container. And inside this I'm going to pass them in line styling. It will be like border, border around our blog, one pixel. So I'll let, I'm going to give this color EB. After that, I'm going to give you a link because we are going to have a go backward and link to it wouldn't let me get back to the homepage. Here I'm going to use strong tag with the class name, empty hyphen three. And it will be like go back here also, I'm going to provide tiling. Tell you I'm going to give you a float. It will be left. I'm going to give you a traditional black color over. Now after this link. What do we have to do? So MDB topography. Here, I'm going to show the blog title. Blog. We have to write like this blog, blog dot title. You will get an error. Let us see whether we are able to display this in block title or not. Let us go to the browser. We got our block title, that is for blog updated. Now we need to style this one as well. Mdb topography. Here, I'm going to give tag, class name. I'm going to give here will be Bootcamp like pneumonia or text, muted, md, hyphen to style. I'm going to give some language tile that will be display inline block, block. Now let us go to the browser. This is looking good. Now after this MDB topography, what we have to do, so I'm going to have an image here, so we're going to display image after our title. Here. Are all the types present in a block and it is a single object. So we can write like this way, a blog, blog and blog dot image URL to look at. And we can give some class name here like image fluid, rounded. Okay. We can give you L. We can give that title only. So let's copy this one. Paste it here. And we can give somebody a tile. This image tag. Width will be a 100% and max height will be 600 pixels. Let's see how our images look like. Looking good. Now, let's go back to VS code. After this. I'm going to have div. I'm going to provide some tiling margin, top. I'm going to provide some inland settling margin top. Let us turn to pixels. I'm going to have one more div. This tile height, 43 pixel background. I can give here F6, F6, F6. And then I'm going to use MDB. Mdb. I'm going to have a style, so it will be float, left. Class name. I'm going to give you md hyphen three icon. I'm going to use icon here like Calendar, Arab. So basically we are displaying the data. Blogs. Calendar icon will be there live. So I am giving you energy. After that. We are going to have a strong peg in which I'm going to sort the data blog, blog, blog. In third, this, I'm going to provide some tiling again. I'm going to give float left margin, top. Margin, top will be 12 pixel margin left pixel. After this, I'm going to use our bad component. I have already imported that one. Inside this. I'm going to provide blog and blog dot category. Here we need to pass our tile style Info. Tile info. We can check this one. Looked like. Looking good. Now below this I'm going to do Dale up this block content. After this bed. I put this in do we are going to have MDB typography. I'm going to use your class name, class name lead, md, hyphen. Here. I'm going to give blog. Blog. Dot description is failing it in correct, so it will be description. Let's go into the browser. Scroll down. Now we have got our the description for this block. We have completed this single block that as well. 17. Show Related Blog: Now we have to also display the related posts to this category. Let's do that one. So far that I'm going to create a couple of blog. I'm going to create one more block like test for dogs. And I'm going to pick the content here. So I'm going to select one file here. So I'm going to select this one, this time. Regard method like image uploaded successfully. Let us select category like food. Now let's add this is getting air. And I'm going to add one more block with a different category. So let's add that one as well. So I'm going to upload a blood relative to take blog, I'm going to upload, Let's paste the description, select the image. I'm going to use this one. Now let us select the category. It will be tagged. Let's click on. Details are also getting at. Now. I'm going to solder related with this block category, that is food. So far that we also need to make one more API call. So let's do that 1. First. What we need to do here, I'm going to find one that will be like related, blog related. Anything you're going to set related post here. Usually stated will be there and it will be input data. Now after that, what do we have to do? While getting the single block? We're going to filter related post as well. So cost related post. Here. We can give it like relative for data, okay? It won't make any confusion. Hand yet. You can do like await. X here is not good. We can just use this URL. And instead of using RD, we're going to use light response dot, dot data dot category. This response to particular containing a single object in which we will have title description, category image URL. We can access the category light this way. And we will make another ABI liquid with Italy fit all the board related to the Ford category. So basically here it will face the both poems that we have in our homepage. Here you can see that we have a blog related to the food category. And if you click on Read mode, so here, basically you are making an API request to get the single blog. And at the same time we are also making the API requests to get the related both to that food category. But typically it will fill the board blog. What we can do here, related post here if we can do like related data, dot data. Now in the related port we have two, so only one blog. We don't want it to display block, so let us read this one. Something is not working, right? Is not working. We need to make a year or condition. And we can also take late related both data. Dot is theta 200. Then we can set that. Let's go to the browser. Refresh this one. So we're not getting anything. So it will be category. We are making one small error here. Category is called do like this. Then only you will get your blog related to, related to this fourth category. And we only wanted to sort three blog in the head-related fourth area, we can use the ampersand start go to 0% n is equal to three. We will only fill the three-part related to that particular category. Now, let's go into the browser. It is working as expected. Now we are going to display the related both below what we have to check. If elected and dot length greater than 0. Then only we have two related post. Here. I'm going to use H1 tag. It will be like related post heading. I'm going to paste them Theta h tightly related to this tag inside this index dot CSS file styling. I'm going to turn it over here for one tag. You can copy all this styling by pausing this video. I hope you have copy all this which tiling. If you go to the browser, not reflecting our changes. Let's save this file. We haven't saved this file. Let's go to the browser. And now here you can start it. We got our related port heading. But when this horizontal line, after that, we have to show out related post. Yet I'm going to use MDB row with the class name. So I'm going to use class name row. Call, fun one. Then draw calls D three, D four. Here. Let's use fragment. Otherwise, we will keep getting this error. Let cut out this one. And here we are going to have our deleted both port map. We can have item index. We can use here MDB call that, that we can use. Mdb can use your link. Here. What we have to do from here also, you can never go to a single blob base. So I'm specifying that you already. Yes. So here we can give it ID item dot ID below this link that I can use MDB, MDB card image. We can have source, item dot image, URL. We can give you a like term dot title, position. We're going to give top. By clicking on e-mail. You will never get towards the single block. But only we can have some content IMDB card body. Inside that I can use MDB card title, like item dot title. Then you can have MDB card. This will be the text with the text. And here we can use description. Here again, I'm going to use x. We will bring that method home dot js file, etc. We need here. And let's copy this logic. Let anything go to blog page. Let's go into the browser. So now you can see that we're getting our related, or you have might notice that we are getting this blog as well. Under this related we don't want it, this blog here because we are already on this face. We don't want it to display this blog under the related both. What we can do here. We can create excerpt. Let's give you a captive. Let's go to the browser. We can give safety around. That will be good. Okay. We don't want it to display this blog under the related because we are already on this blog. What do we can do? We can apply one filter. After this. We can use filter. We can take here item, item dot ID. If it's not met, then we wanted to. So all that blog ID is not met. It will automatically filter out that blog. You can see that now we are not able to see that blog. We have filtered out. And if you go to homepage, if you click on this one, read more. Now, here we don't have related for, so we don't want it to display this heading adult. If you don't have any related port to this category, take if you don't have any blog related to this category tag, then, then this ABA will always return the single area of object. We can write one logic here. Let's cut this one, cut this part. We can check again if related for dot length greater than one. That means we have more blog related to that category. Then in that case, we wanted to show those block under the related posts. Here, you can give like a related post. Let's go into the browser. Now you can see that we are not able to that heading because, because we don't have any blog related to this category. And if you go to the homepage, if you click on this, this is working as expected. We are getting a related point for this food category. And if you click on this block, you will navigate to this single block pay that is Ford blog updated. Now you are in food blog upgrade. You can see the title here. You can also switch between this blog through this way. This is working now. We have completed this functionality as well on our single blog page. 18. Search Blog: Now we have to work on our strategy. Components. User can also able to start it blob. Let's do that. One part that I'm going to create one file under the component. That will be the search. Yes. It is in a bit. To bring button component from our material then both trip. Let's bring that one MDB video. We are going to receive some drops from home component. That will be light. Value on input, change, status value on input chain. These three prompts, if we are going to receive from our third component. Here, we are going to have div with the class name. And after that I'm going to use form component. We don't need action. We can give a class name like d hyphen flex. We can have on some MIT. Mit, we can give you handle sales, which we will get from this form. We're going to have an input with a class name will be the form control. Please order we can give you a first blog. We can have values. I'm going to pick this value, which we will be maintaining parent component that is home. Let's format this one. Now we are going to have on change. I'm going to use this method yet on input change, I'm going to have a button MDB median will be the third, will be the Primary. Primary. We don't need to specify the color. There, it will be somewhere. Now, I'm going to pick the styling for this class in index dot CSS file. I'm going to bet that styling for that class name, that is search form. This hit telling it to give out satisfying class name. Now let's go to the home dot js file. We're going to display our touch input here. Let's bring that satisfy component. Now let's go to the browser. Looking good. Now, we have to work on this prop that we are passing to our third component, fashion. I'm going to define one state 13 portfolio. Let us set its value. Set. Value uses third method in beauty. And here we have prespecified length value. It will be satisfied only. Then on and put ten. So which year to be defined? We have handles service disease also. Does it also need to define input? Input, change. It will receive an event. We can detect leg set, that is value dot, dot value. After that, path is one. Define a handler. I told you think. Do you prevent default? Prevent default. The default be able to browser. We're going to make a request, yes, so const bonds and I can just copy this one. Smaller determinant of a is required. So let's copy this one. User tier. I'd move all this thing minute to path. And yet we have to pass queue. If we got the response status with 200, then we're done. Then we're going to set the data. Set data. We are going to use the second data, response data. So I didn't use like something went wrong. Okay, let's copy this one. Let's use it here. Now. Let us go to the browser. We have some missing here. We have to provide here a little bit. This will also receive an event. Now, let us go to the browser. The Fed is one. Now let's set the block so we're not getting cross mark here literally at our input first. So what we can do, we can give you a third eternally. Now let's go into the browser. Refresh this one. Now let us start with dictate again. We are getting this one and if you click on this cross, it will get cleared out. So once it gets cleared out, then we want it to load all the data that we have in our JSON server. That what we can do, Let's go to the VS Code. And here what we have to do, we can check if you don't have value. So E dot target dot value. In that case we wanted to just load or Lovelock data. Now let us see, this is working or not. So let's set it with this time like this. So we're getting this block that is related to tasty. And if you click on this, cross, will get cleared out and we will get our block downward and the turn server is working. 19. Show Category Blog: Now, the next thing I wanted to basically get the blog where conduct category. I want a category over here. Let's do that one. I'm going to create one file and head is component for that category. Dot js. Let's center it isn't a bit. And this was basically receive some prompts from our homepage. So handles category one over t of n options from Material Design booked up on it to bring some component from MDB that you'd like it. To bring MDB, MDB, list group, MDB, lift group item. Here instead of div, we're going to have MDB card with some learning style. The style, I'm going to give you a bit tint ramp margin. I'm going to give typic cell here and I'm going to have tags, categories. And then I'm going to use MDB list group. I'm going to pass a plush. Going to map are all option. Option dot map. We're going to get item. After this, we are going to have our MDB LET group item in which we are going to show all the category. We can give you an item. Let's provide the key index style. Let's give you credit, sir. Onclick. Onclick. Onclick. I'm going to use this method that is handled category. And I'm going to pass the item. Here we have this one. So let's remove this one. Farmer this one. Now, let's go to the home dot js file. Here. When it took part the option. We have already defined here. Let's copy this one. Let's go to home dot js file. Here. We can use this category component here and below this column. Oh, we can have one more column. With the size three. Here we can use category component, look at every code automatically important component. And here we can pass our options that we have defined. A huge state. You can see that here. Crawdaddy component is automatically import from VS Code. Let's first go into the browser. You can see that we have got our category. Okay? This category will be fatally get down with, because here we are going to have our fourth component. Let's mark on this categories component. We wanted to get the port based on the different category. Next thing what we can do here is we need to define one method. Here. We are passing this one as well, handle category. Let's define this one. Thirds is return. It could be anything. Here. We can make an API call, so called response. We have already used this API related to categories. So let us go to the blog.js file and we can use this one. Let's copy this. Paste it over here. Let's go to the homework. Yes. I'm going to use a weird x ts here. Let us see them move all this thing. And we are going to receive a category category component. We can pack category here. Now here, we didn't tick response dot status 100. Then we're going to set the data, set delta bonds dot data. We are going to solve the same methods like something went wrong. Something something went. Now, let's see whether it's working or not. Now, let's get the block based on the category. So we are getting only food blog. If you click on, we are getting only tech blog. Now what I'm going to do, so five, I'm going to add some more blog here so that we can implement the functionality, like let it pour that vasodilation. So we need to add some more blog yet. Also working. And you can see that we have got the friend of color per hour. We have created overall six block. Let's add one more block. On circuiting. 20. Show Latest Blog: Now the next thing we wanted to show the block featured in our application. Whenever the user add a new block. So it will appear on this side and we will only display only for, let us Bloc created by the user. Because later we're going to have a pagination. So during the pagination, only five blog will get displayed. That will be displaying the order. You will not able to see the large blog. And in order to Theta large block, we have to basically take the Hale-Bopp page in essence. You can also do with that pagination if you wanted to go to the blog. But Last block also we can show here in our block component. So let's implement that one. Let's go to the VS code. I'm going to have competent light. Blog dot js. First, less than gender it is in a bit. Here. We need to bring component. I'm DVD actuated from MDB. Reject the UI thread when IT to bring some component related to card, MDB, MDB row, MDB column, MDB, MDB card body. We also wanted to bring the link import from Dr. down. We need to bring that link. Here. We are going to receive proxy image. You added tidal ID category. After that, I'm going to use link. We also wanted to navigate toward the singer block paid based on the ID. I'm our blog section, blog. And we have Fitbits failure ID. After that, I'm going to use card components, so MDB card. I'm going to use them in line styling here. Max verte. I'm going to give you 300 pixel. I'm going to give here a typical I'm going to give you a bootstrap class name that will be empty. Happen to that as marketing. After that, I'm going to use MDB row with the platinum G 0. I'm going to be used here MDB column. I'm going to give you an MD. And here I'm going to use MDB guard image. Here. I'm going to give source that is immediately inherited. We can use title. We can give you a class name, we can give you a rounded to make the image around. We can give some inline styling here as well. Let us give the height. It depicts a lonely. Okay? After this MDB, MDB column, we can give MD nine. We can use here MDB cardboard, in which I can have a p tag with the class name. Then let us title. Let us title. And it will be like title only, which we are getting from our homepage. We are predefined the tiling. But this class maybe in our index dot CSS file. Let's go to the index dot CSS file. I'm going to pitch some styling over here. I'm going to give this tiling. After that. Let's go to the home dot js file. What we can do. So first I'm going to define one state here. Which will be the glue holding the latest blog. Blog. Let us blob here. In third, use vector. We can have unfunctional like fetch latest, blog. Now we have to define this function. Let's define only. Let, let us blog this a little bit of a thing. Here. We literally what we wanted to do, we wanted to finish the last four record. We wanted to create an API status, whether it will fit all of its light for blogs. Whenever user add a new block, it will fit the light for blog that we're going to display here. Okay, so far that we have to basically do some adjustment in our server APA. So first we need the total block. Total block how we can get we can just copy this one. This is responsible for getting the portal blog. Now, we uplift with Feather star ten and start like portal blog dot data, dot length minus four will be nothing but it will be the total blog dot length only. We have to specify width and data. Now we have got our start and end. We have to write API responses. So again, we're going to use this one only. But this time we're going to modify this API. So I'm going to use your back. After that. I'm going to start in and start. The same concept we are going to use for our patient needs. And as well. Let's specify your end as well and value. Let's put here dollar. Now. We can just copy this one. We can just split it here. We wanted to set this data into a blog. Now this let us, let us see what is it receiving. Receiving IV is URL id and categories. So category we don't need here. So let's remove this one. Let's go to the home dot js file. And after this, what we have to do, Let's come down. In third, this column tag. We're going to have R, Let us poked our blog. Going to use as for tag. And it will be the latest post class. Then I'm going to give you a text. To start. Here. We can have light. Let us, let us plug dot map. I'm going to have an index. Here. I can bring out, let us plot component, the Vietnam War automatically important component. Here we can use key. Here we can just spread out are all item. We can D structure in our block component this way. So here we need only image, URL, the title and ID. You can also, you can also dig texture, other category and this category and description, but for this post is not required. Let's go into the browser. Now here you can see that we have got our let us post. Okay? And if you click on this one, this one also, you can navigate towards a single block. This is working look like we have implemented the widget as well in our application. 21. Pagination - Part 1: So the last feature is left leg. To implement the pagination. In pagination, we wanted to display only the five blog, but let us see how are we going to implement this one. Let's go to the VS Code. Five. I'm going to create a component in today's component for that is pagination originates and dot js. Let's let a snippet here for pagination. Here the window to bring some component from our active I could to implement the pagination from MDB, MDB, MDB, MDB, Basie, nation link, and MDB butene. We can do some prof that we are going to receive from our parent component. That is, it will receive current page limit. Then it cannot receive a load blocks delta, okay? Data and total blog. Here. I'm going to define one function and that this render. I'm going to check like if we have the current page that is on 0, then we have the Next button to navigate towards the different page. Here. I'm going to write like IMDB page. It's going to have a center. I'm going to use mb hyphen 0. We are going to have MDB pagination item. Then MDB pagination link. Let's remove this extra. It will be below. Here, it will be one. Now, we're going to have one more pagination item. Let's pump it. Inside that. We are going to have our button. Inside this. We are going to have our button here. I'm going to use the MDB and btn button will be rounded. I'm going to have onclick. Onclick. This will be the loads blocks data. The value of our button will be the next. Now, we have to check a condition like if else-if we are going to check a condition like currently latent period limit minus one delta dot length limit. I wanted to, so the previous lecture button, so both button I wanted to display. In that case, we can just copy this one. We can just take over here. Here we have to do some adjustment. Here, the value will become back. Okay? Here I'm MDB pagination link is not required. So first let's move this one. Here. We also need to increase the page so we can cut this out and we can use here from here also. We don't need page pagination link, so let's remove this one. Here. Whatever the current pay will be there, it'll get ingredient. And the button value will be the previous. Again, we're going to have one more. Paging action item. I'm just going to copy this one. I'm going to paste it below this pagination button. We'll get close here. Let's copy this one. I'm going to cut this one over here. This regeneration. But then and this pagination item. We'll get close here so we can remove this one. Here, it will be there. And I think that's it. And we are going to have an else condition in which there is reach to the large grid. Then in that case I wanted to show the page number and the previous button. So we can just copy this one entire thing again. Before we copy, we have to put in return, otherwise it won't vertical. So let's copy this entire thing and put it in return. Now inside this else, we wanted to sort the previous button along with that page number. We can copy this one. We can pay two tier will be IMDB patient. So we need to provide that closing bracket when IT to provide that closing tag. And we also need to put in Thaddeus return, otherwise it won't show to you. Let's copy. Let's cut this one. We can simply do render pagination. In October with the P generation. We have to do some adjustment in our existing APA. We wanted to sort the blog five per page. Okay, So from here we are going to provide them default value 05. This is n and this detail in greater degree value. By default, we are fetching the five block per page on the homepage. Now we cannot use it like this way. So we have to do like differ. We can provide our start and end value. Here it will be the end. We are receiving while this value from here, 0 and increase. Okay? After this, what we have to do, we have to do current, Okay? We have to first define this third far setting. The current will be current page. This will be the g. We are going to have unmonitored for page limit. Limit. We wanted to display the five block per page. And we are also going to have one more state setting the total block length. Okay, so let's put this one. This will be total blog. Blog. This could be null initially. Now, we have to set the current page. We can give you a current bits plus increase. Now, let's first go to the browser. Now you can see that we are able to see only five block, but it pays. Now we have to work on our pagination. So anything we have already created. Now what we can do here, so fast, Let's go to the written part. After the db column. Md Bureau, we are going to have one more div with the class name empty hyphen three. And instead this class, now, let's bring the pagination. Let's see. Business and it's showing or not, we got the business and then currently we are not providing any value. So let's provide those value. Current page load blocks, data, load and blocks and data. You have to provide. Then limit data also we need to provide we are called to provide the total block network. How much blood we have in our db.json file though, are that what we can do? So here we are getting are all the blocks. So here we can say the total blog. Here we can hear, we can do total blog dot data, dot length. This function will always execute it because we have put inside this use effect this way. But hopefully we can get the length of the quarter blog that we have in our db.json file. Now we can pass this one as well. Total blog. So let's go to the browser, refresh it. Now this natural will not work as expected because we need to do some adjustment as well. In our pagination component. Let us go to the pagination component. Here what we have to do, we have to provide some default value again from this load block theta because this API got modify here, you can see that we have to provide it in 3D. For this scenario. We have to pass next five block. We are going to get by clicking on the Next button. And we are going to increase the pH. For this scenario. We have to pass this way. Here with ugly, we're going backward. So here we can give Current Page minus 15. We have two paths like this, current bid and B25. We are going backward, so we have to do in decrement. So we have to do a decrement minus one. Now here, what we have to provide, so let's copy this one. Paste it here. Here we typically we're going again. Next. We have some more blog. Here what we can do. So let's remove this extra rapid, and here it will be the current plus one into five plus to put this one in bracket as well. And do five. And this time we have doing for this scenario or this scenario we can do, we can pass this on glue because it will work in the same manner. Now, let's go to the browser. For this one. We got page one and we got Next button. And we have guard page h2. And we don't have more blog. We are getting here previous button and we have to blog yet, okay. 22. Pagination - Part 2: And we have to also do some more objects in this pagination component. So here we are taking like if I didn't current page, that is 0 and the data length is less than three, is less than five, then we don't want it to. So the visualization components put in, let's put one more bracket because we are going to have one motor, our condition, our deceit, the one condition, that means if we are in current period, that is 5-bit, we have the blog lengthen file. Then in that case, I don't want it to the pagination component. And for the second condition, what we are going to change. So we are getting portal blog, so total blog, but they didn't nothing but it's there go the length of block that we have in our db.json file. So at the moment we have seven blocks. You can see that by block on this space and to block. And then next, we have Steven blog. We can check if total blog is less than d dt limit, sorry, blog is equal to the limit. That means what I'm trying to do here. So suppose we have only five blog in our db.json file. So in that case also, I don't want it to sort the page in a sense because if you click on Next, you will get a blank. In that case also, I wanted to avoid to solder vasodilation component. That's why I am taking this scenario. As we approach our subject, we are taking further 5-bit only, not other base. In that case, I wanted to just get it done. None. Let's go to a browser. You don't get changed it here until you delete any blog. Example, if I delete the two blocks, and if I delete this one, blogger getting deleted. But we are getting some issue. Why we are getting this issue because diluting the data from our home dot js file. We are also creating the blog with this load blocked it and say Here also we have to pass the argument. So what do we have to do? So we're going to provide, again default value. So we wanted to start from 5050 and we have to also provide yet one more additional operations like delete. Okay? So with the help of this argument, we're going to set the current way to the initial value. So we need this one. Let us go to the loads block data function. Here. What we have to do here with ugly, we can pass the argument Lake operation. Inside this. What we have to do. So after setting this data, we can check, like if you have the operation, This will work on Lynne case. I'll delete. That gets set current to 0. It will already increase the base scenario. Let's try this one and this one. Let's go to next. Here we have only one block. Let's delete this one. Now, our blogging getting deleted here. We have only five block. This should not be displaying. Something is not updating properly because the total blog is basically is used here inside this Fitch, this blog. We have to use this logic here actually not in fit the text block. We have to do this logic here. We have to alter your DCPA here. Getting the total block length. I'm going to add couple of blog in this application. So guys, I have added two more blocks before we perform a delete operation again with the pagination. Let's click on Next. You can see that we have also this scenario as well. This else-if condition also we have the third and we have one more block at the third pill. Now, I wanted to write one more condition in 30s LCF in case if you don't have blocked at art, then I don't want it to display this previous and next potential support. What all we have a ten block in our db.json file. In that case, I don't want it to display this in both button that is Previous and Next. I wanted to show a little Previous button. So we need to write one more condition. So before we perform the delete operation, Let's write that condition. Here. What I'm going to take, portal blog minus theta dot length is not equal to page limit. Then only it will get display. Okay, let's fight. Go into the browser, refresh it. Let's click on Next. We got this pretty good because we have more blog on the topic. Now let's delete this one. Click. Okay, So blog deleted successfully. Now we are under five-page. Now let's click on Next. Now here you can see that we don't have that next button because, because we have a ten block in our db.json file, we're saying five block, but we have also fact that it's small issue in our pagination. If you go back previous, this is working. Let's delete one more. Again, it will get detached from the five-page. Let's click on Next. We got this previous button only. This is working. So guys pay the next thing. It also completed in our application. 23. Fix Bug: Now we have an issue in our application. So if you search a blog, let's suppose you have since tinker block, we are getting this 30-year-old with this keyword tape, okay? And if you clear out this one input field, now we are getting no block form. What is happening over here? So we need to go to the VS Code and in home dot js file, why it's happening. So here, oninput change on Input chain with ugly handling the 13 portfolio. So here we are not passing the default initial value for our start and an increased value. So here we have to also pass towards default value like 050. The way we have passed IN OUT use. If you remember, here. Here we have our start and then increase value. Likewise, we have to also pass the value here as well. Let's go into the browser, refresh this one. Now let's search again blog with the tech. Now let's click on this cross. Now we're getting back our all the blog data that we have in our JSON file. So we have fixed this issue. 24. 404 and About Page: Okay, so now we are going to work on other pages that is not found and about paid. So I'm going to start with the not found page first. Give some random URLs. You'll get not fun, but I wanted to solve an image here. Let's do that one. Let's go do not found dot js file here. What do we have to do? Here? I'm just pasting one line of code. Now let us go browser. Now here we are getting one beautifully. Well, if the URL is not match NET, we have in our app.js file. Now we have to also work on this About page I'm just going to look at the content in there about dot js file. So I'm just predicting the content for this About dot js file. When IT to bring some confidence from MDB, MDB container. I'm DB typographic. Let's give some margin, top margin, top 100 pixel. You can give any content inside this About dot js file. Let's go into the browser. So we are getting this one line of description about this application. 25. Thank You: If you're watching this video that went, you have statistically completed this course. I'm sure you have enjoyed building this React blog application with me. I hope this course will help you to create your own blogging website with react and different set of that from my head. If you have any query or suggestion, you can always reach out to me. Thank you so much guys for enrolling into this course. I will see you in some other course. Till then, go to buy and take care. And don't forget to review my code as well.