React, Tailwind, & Firebase: Building a Modern Blog site

1. Course Intro: Hey, guys, my name is Joel D Muller, and I will be to top for this course, creating a simple block site which reacts steeling css and fire base. In this course, we are going to run through different processes of creating a block site, creating our blog, uploading it to our database and retrieving it from our database and. We're going to be using for our database, we're going to be using Pier base and for our style instead of normal CSS or the vanilla CSS that we know before, we're going to be using te cases in which you need a little bit of idea in it for the style this course. And also, we all know the efficiency of react in which we're going to be using for this cost to be precise. And after the course, if there's on there is clear to you, after the glow course upload we put the To link in the description below. You can check it and click and check the code on your own, and even copy it, if you like, trust me, this course you're going to let me note and you're going to enjoy the course without further I do as they started. 2. Setting up environment: So to start, I'll need to run my environment, damage to start my Damages I'm going to create a foi new folder and I'm going to call it I can call it name, but I'm going to call this block. Then I'm going to open it in my visual studio code. So after this, I need to install my react and start everything properly. I need to install my react and my t css. We're going to install firebase later because that will be towards the end of the tutorial before we can start implementing the fire base. So for me to create my react, there's this default way of creating reactors MPM create create react, but I'm not going to use that to because it takes a little bit of time evi are using MPM create react. So there's there's an alternative for it. That makes it more easier. You make your react up lighter and make it faster. So I'm going to be using T. So Fortunately, I can install my VT also together with my tailing sensor. So this is the command, you can go to your tail.com guide. So go to this framework guide. So go to because we are going to be using VT. So you can just copy this particular. Don't copy everything. Don't need everything. Just copy this MPM create Tartest because we need the latest version of react or the latest version of t to be installed. Put it on your termina your brother, so it's going to act for the name of the project. So let's call it blog or I can call it my name, J Blog. You can use the name for it. Joel Blog click enter So it's going to have for the package name blog. So you must take note when you're selecting the bananas view or we are using react react. We are not using type script. We are using no jo script for it. So why you click on it act to CD to J blog and then MPM install to install the dependency needed for this app. So after the installation, you can now do MPM run to run the app and S is working properly. So you can click on this control audio control and click. So we're going to see the app popping up. So we have been able to set up our environmental react app easily, but it still we need to install our tailwind package. So copy this and then you can open a different terminal for that. So you have to see it to your blog or whatever name you call it, and control. So this will install the CSS for t win after that, you need to install the P t winds it. Then you paste this on also. So after that, we have our CSS conflict file and we have our if you check this place, your source moda you have your index CSS and other things inside. So after that, Inside our tailing config js, we need to copy this and paste the inside our content. We need to copy this and paste d. This one simply symbolize that any food any file that has this index index HTML, or at or do Tx we'll be able to work on it. If this is not in put the TCS we'll not be able to work on our property. And also in our index CSS, we need to copy this on past index CSS. So you can just past it on top and and after that, I think we are good to go. So furthermore for this tutoria, I need to import some fonts that I'll be using for this Tutoria, there are some specific fonts that I'll be using for this storia. So I'll import this Google font. You can copy it also and do the same open San inter barbers and amar these are the formdal font that I'll be using. So for me to implement this frontal I need to add it to my Tv.cc file. So don't worry. Inside the config. I've added a lot of things. So inside the team, know your team is kind of empty before, but I've added the extended the extenders font family. So for each font, these are the fund that I needed. So I can call this font anytime in my react, in my page or anything. So this color, so I don't want to be adding color every time that maybe anytime I want to use primary color. I just have to be added this A 535 every time. So they will make it easy that if I add it here, I can just call maybe background color to be primary. So if I change the color here, it is going to change for every other page that I need, either I use this primary color instead of me going from one page to another to change the color. So after this, I need to chrism folder. First of all, my page folder and then my component folder. So inside the page folder, that's where we have all the pages that are needed for this app or maybe, maybe the politics page or the football page or any other page. And component, you know, component react is like a reusable code instead of me rewriting it for each page, I can just collate use it in that particular page. So there are some others also needed to be done. So inside my app.s6 We don't need all this. Okay, let's check maybe our react our tail senses is working. So inside this please. Let me see. So for you to use your tailwind, you have to say class name. Yeah, this class name. Let me see the background should be read. G six. Let me see maybe this is going to work is not working. Probably, let me restart my this thing. Oh, can you see now. So after after installing your ten sass, you have to close the running server and restart it again. So you can see that our t ss is working fine now. But we don't need this on our server. We don't need this page. So we need a different page entirely. So for me to do that, I already have some code What we'll explain it, I'll just copy and paste it and then explain it later. So what I simply does it now is to install my route so that I can rate through different pages in my distin but it's not going to work now because I have no install my react router doom. So to install that, you can just copy this and paste it on your dist check PPG sell to install it on your browser to your app. So just copy this command and come here to your So after installing, can go back to your plan. So definitely it's going to be plan because I'm not loaded page on it. So these are what we are going to be using later. These are the pages that we are going to be creating. We need the home page, the contact page, the different blog page. Then we need the blog details and create blog. So first of all, we need our nav and our footer. If you check the here Okay. Sorry. So if we check the up here, we have our our nu have the search and the name of the logo and the other things, and we have our footer. That's the one that we'll be under. So all other page we'll be rendering inside these two components. So there are two components that we need to create now, the d Nerva and the foot. 3. Navbar and Footer: So after installing can go back to your p. So definitely it's going to be plan because I'm not loaded any page on it. So these are the what we are going to be using later. These are the pages that we are going to be creating. We need the home page, the contact page, the different blog page. Then we need the blog details and create blog. So first of all, we need our Nerva and our footer. If we check there. So if we check there, we have our our nub have the search and the name of the logo and the other things, and we have our footer. That's the one that we'll be under. So all other page we'll be rendering inside these two components. So there are two components that we need to create now, the headers Nerva and the footer. So to start with that. So I rather everything together in the display, firstly, will be in a relative display isolate and when the screen is kind of large, the peak the p dam is horizontal vertically the padding would be zero. If the screening small. The padding will be eight for all the side and the background should be white and other things like that. So I also display flex also. So flex minus one and other things. These are just basic them sass of less move on. So I need to create my final there's nerve.sx, and my photo GSX. So I react, if you're using react you have to import everything out to be able to call these functions outside this particular preserve, you have your index index dot. This will allow you to call this two component or any other component that is inside please any time. So basically export every two component out now. So inside my number, you can type this command. If you have installed, there's an ins station that you need to restore for react spent. So I'll be able to do what I'm about to do now. That's sorry, RSC. So this will This will help you to create the page for you to do that. You can also do the same thing here also in your potters maybe can work in our. Let's see our components. We are interning these two components now, nerve and the router. Sorry. Okay. So Nava, So these two let's say maybe they are going to be showing. Can you see the two components that are already showing in our react page. So in our main we need to wrap this main together in a router so that we will be able to route through different pages. So I just added this browser router from the react that we install the time and we put it together so that every time we are routing through pages, we'll be able to When we click a particular page, we're able to rush to that page and go to that page without any error. So now we can see that our bar is working futile work. So we just need to implement some design on it. So to start to get started. I'm just going to run through some codes. I believe you have some idea on it. I don't just follow along the very simple code that I'm going to go writing some complex code, simple gamma script the act. I'm going to be driving some explanation if necessary. I need to create an object to have a the links in it to call cation. So I'm basically declaring the name of a particular link and the routing. That is the page I wanted to route to. For example, I wanted to route to the page spot. I wanted to route to blog spot. So that's how it's basically going to be over there. So I'm just going to copy this. So that's what I'm just going to do for. That's also. So I just added others like spot this way she. I've now created the routing of the pitch side, but this is how I want it to route to different pitch. So don't worry. I'm going to show how we are going to route to a different page. So next, I need to create a function for responsive design so that when they are piece. For example, now, check this on. When the app is in a smaller size, I want you to show this button and can rupthrough these pages. So I need to create a function for that so that when it get to that particular state, we show that. So I need to add the. I need to input it so that I can use it. So inside this I need a d the bad of the So this link needs to be imported from the if you have some symptos on it, you're able to import this thing directly by the tab you have to import have to put in cycle brass. From the attic So this one will be the logo, the logo for the app, this particular logo. The way I'm wrapping it in links so that when I click the logo from any page, can route back to the page also. So let me just put styling on each of them. I'm making fix so that it will be the Na will always be on top, even when I'm scling Naver, we just exist on the page. So for the link to means that when they click it, where do I want to so I want to to hop. So let me just give it some styling also. And for the image class name the I should be the and the logo itself, the logo itself. I need to import. This is the logo I want to use and have export it here so I can call it from any place. So I just need to export it. Let me call it logo here. So can you see automatically import That's visual stud imports for me. So let's check maybe this is actually working our app. Can you see we have the logo here. So it's remain the n the sag bar and the other links. So So I need to create the button also so that when they up using a mobile form, so the button will apply. So that's what I want to create now. So I need the icon, that's de dot icon, you know. Uh this D icon. So basically, it's going to be in, you can check ero icons. There are many icons that you can you see this so you can copy it and just import it to your app. But first of all, before you import it, you have to install it to your project. That means this zero icon first, copy it and paste it on this thing. You are going to see this one. So you have to import it first through your terminar before you can assess or use it. So I have to import import and the second one is X M for counsel. So I can study it also. What this simply means that when it is large, that the screen is large. These icon should be heating. Particular should be heating. But when the screen is smaller than large, this both one Let me just study click, I want to perform a function set mobile to true. So it's as simple as that so let's check. Let's check why this is not showing. Sorry, there's a mis so it's past. Yeah, that's the issue. So can you see that the button is showing up. So when the screen is small, the button is showing when the screen is large, the button is not showing. That's mainly one want to achieve with that. So nest off, we need to create our. So initially, I want the search should be heating from anything less than medium. So from medium upward, the screen issue that's the search shoe. So I don't want it to show when the screen is small. So that's mainly what I want to achieve. So let's check when we show and this our search on the smaller screen is not to show but on the larger ones to show. That's mainly what damage. So now we need to create our links. So our So we were able to achieve these days, what we mean our our links. So that's what we are going to achieve now with that. So another d. So from the d we are going to map the navigation object that we create the other time. So for each of you want a link. So definitely you need to put the key, which is the items. That is when they click connects the item dot H You need to style it also. So the text should be small form should be c should be semi bold, leading. So if you don't understand some of this thing, you can just put this thing on it, your cursor on it, is going to show what it's meeting C. So for leading six simply means line at that's vertically. That's 1.5. That's how it is in CS. When I over over over I want the primary color. I want the color to be primary. So these are the names I want to be it's to be showing maybes working well. They're already showing what's pied up together. Let's see what we can do by styling the default. Class name, A thefts should be catamaran. No remember thefts that are input at time. Tracking, wide. So this tracking white simply means a letter spacing. So when the screen is large, I wanted to show. So when the screen is large show's showing this link color. So let's see the text color initial But remember, why we click on this. This one is not showing the list of this thing like this one. Why we click on this, showing the list of functions like the list of pages that we can route to. To achieve that to achieve that after our, we need to create a dialogue. So for us to use this dialogue, we have to input it. So we can access this dialogue from is also in a react. Birth of the gird the sir bad the the bread of the birth of the gir So this, we have been able to achieve creating our numbers successfully. So you see by changing to a small one. So the nest is just us to work on the footer. So our destiny is working. So our footer, we need to work on it. So for our footer, we just need the very simple process, we don't need to import it in special. A section that is running up everything, this div with the name imputes for subscribe and some other things there. So without let's just get started. I'm going to be using you can leave it as D but you can use section instead. Section inside the section, we have D. Let's say daily news letter. So after that, we have a form. So let's style it so that everything we do makes sense. Let's look at it. So this is let's style it and see how we're going to look. So let's check out the actual little out on the on the W. S actually from what we want it to be. But just bring some little ad is not. It's not full like these other ones, so we just need to work connected to some little touch and it's going to be exactly what we want it to be. Yeah, so let's check again why this is showing up in sort of fool and let's check our index or CC probably is this or this one that we didn't remove the other time. So probably they are the one that is crossing the with our page. So let's let them and label this one that is t is working. So we have been able to achieve our nerve bar and our potter. So the next thing is just our page That's the page now. So the slider, we can nest and see different pictures, the social media icons and the different blog post, the latest post and engages the contact form and the. This will be achieving the next video, state. 4. Component and Home Page (a): So we come back guys. So on this next part, we're going to be working with our own page and some other components that need to be created or to work properly. I've created my own five my file, and I've exported out a sentinpting your component, sino pages so that I can call it in my over here. So I can use that I've called home from pages and I'm able to route through it. So if we check the, you see it can you see is already there. So we just need to add a little code to it and make it work. So let's check the previous works. You see here over there on page of the one we want to follow. It has a slider. This slider is the component on its own, the standalone. It has this code, it has different blog. It has a different blog section. We have the politics, the business, the technology, the sport, the entertainment, and each of them has their own different cards. We have the and the read more button. So this card is also a component that we can call from different. We don't need to write copy and paste in everything. You just need to create it as a component and repeat it for others. So we need this contact page. This contact page also is a component. I'll explain why it is a component. It is a component because I'm calling it inside his home page, and I also have a section called contact, which is the same thing. So I don't want to have maybe after writing the code for contact. I will now go back to this lager and write another code for contact. So I'll just create this form as a component, and we call it inside two of them. I think that should work fine. So that should be for our contact page, our own page that we're going to work on. So to get started, let me just start by creating our slider component. I'm going to give you the name called my slider. It's my work in it. So for it, I need to install the slider component that we're going to be using in react. There's a particular slider that we're going to be using in react for us not to be writing our own slide our own because this is just a man not like an enterprise or a strong blog. Want to the basics about how blog so be important I need to put the link also because we are going to be having these icons there. So I want to click on it, it routes to a particular the social media page of the block. Okay. Also, we need to import a particular CSS that follow the slider and different icons. That's our Facebook icon, stagram icon, icon, in in icon and Twitter icon. So it is the old Twitter icon. There's a new ones X. So you are just going to be using the old one just for this. These are the CCs that are needed. Like that needed to be used with this slider component. So next on we need to have an object or an array an array that contain the object of each button that we are going to have, you know, like an array is an aria buttons or it has two major components inside the object. So the area have different objects. So each object of the name and the HR. The HF means the link to each of it. So if I click on this Facebook now, it should take me to a particular Facebook page. So after clicking on it. So it should have a name. So the name will contain the icon that I needed and the link will be under the H. So it's going to be I'm going to call it cost Okay. So I'm using the icon. I'm not using an error icon now I'm using the icon there have different icon that you can use. Icon also is a very great library that you can check. And you can search different icon that you need. And after searching it like Facebook, You can just click on it and copy the code out. So after copying it out after placing it inside this space. The other way you can call it out is to come here and call it out that's Phase F. So these are I want to call it initially before calling it inside the main. So I'm not going to be putting any any link. But just for purpose of practice. Let me just put let me see it defaults to put maybe google dot. So I want anytime I click on this. I'm just going to copy and paste it. I'm just going to copy and paste like for others and I'm just going to change the So I'm going for Twitter YouTube Insta grammar and Linden. So what I instead of putting WW in u google.com put web dot Facebook, twitter.com, tube.com. Instagram.com and link in.com is not relatan to a particular account just for default Tuk in account. The next thing that remain is the data that our slider will process. You see now this picture, the first picture here is showing breaking news and then it has the details. This is just like default and this so far. I don't have beatle to put there. So I just put this IP something there to shocate something be there something will be there shortly. So it does for sports a star to be moving from one angle to the other for each of them. So we want to put these details inside an object so an array of objects. So the name will be let's call it slider slider data. I think that's that's okay. So it's going to contain URL of the particular image and also the description. The description, you're just simply showing that, okay, this image he's talking about maybe breaking news or he's talking about the latest sports news, maybe Chelsea between Mao and Chelsea, anything any football favorite football club or between technology, maybe this is the latest technology that that is out now. So that's what this one simply means. It's just going to be like a pointer to So to put something there. I'm just going to find a random link on the Internet. So you can just check the one that can perfectly fit what you want to do. Maybe breaking news, define picture on sports, fine picture on breaking news, picture on technology, picture on entertainment, and so on and so forth. So I'm just going to copy a piece of I have already. So after this, I the pictures and the details inside it. So the next use this slider component now. So I'm just going to delete this component brackets and call the slider component the biggest. So the slider components inside the slider component, I'm going to have the slider data. I'm going to look through the slider data slider data map. So I'm going to have a tip the dev will contain the key. I go to have image. So for the image to be slide D dot image. To start with this So the star we need a class name. That's now. We need to be saturated. That means we are changing the quality a little bit to bring out some beauty, not just normal bringing directly from the Internet. Wanted to be a little bit deep saturated by 150, so we can check that normal CSS. This is what is start point C. So the object should cover So we have another div inside. We have our H one tag. So the H one will contain the description of the up that's our slider data dot description. So after that following that will be our another that will contain the icon for each of each of the app for each of the social media stuff we want to t to. So we have to mark icon also icons it does icon inside. So the icon will be in link format. So it we have a key target blank so that by we click on it, it will open to a different page entirely. Not that is going to be opening inside that the same distance. And that's where we want to do icon. So it also have the name that icon dots. That's where the logo going to show. So the logo is going to show inside this place. So we need to style some of our work. Let's style this H one. Oh. So probably the issue with this that we open another def with another div. You're supposed to open this inside this particular de that we have opened. So that's what is really causing the issue. So the next thing that we need to start is this particular style. The style for the link. So we need to start this particular de also So for us to check out this turnout, we have to call it inside our own page because if we go to this page now, obviously, nothing is going to show. So we have to call it inside our own page for you to show. So before we call it, we need to work on this on page, so, you know, this text is hiding under the nerve. So we need to work on it and make it a little bit large. And the screen should be large should cover the screen. So after this, let's see if we can call the nerve directly be the slider from this place. So you see what we call it, it shows directly but there's an issue you see our terminus showing that there's an issue. So the issue will probably be inside this place with no ports this out. So I think this should resolve it and let's see. Okay. Okay. So we need to install this right? Remember, P I using the MPN link to download it. Right icon. The other one we are using the other time was error icon. So I just introduced this one also that you can see how you can use various icons. You can use er. I can decide to use one. When you're working on the main projects, just decide to use one for the story consider that you can use varios icon. There's er, there's fonts I. There's a lot of them that can use. So it just depends on which one you want to use exactly. So this should definitely solve all the error. Glare. The issue is because this is now inside the co blockt could be annoying some time. Now we have our icon there. Let's notice something. This is not showing the icon and showing the name that we put there. Our pictures are not showing. You can't see the image. It's not loading. Let's see what is crossing that First of all, this is supposed to be equally brise definitely work. What's delaying our pictures from showing we call it URL EMG. Let's see that should work now. 5. Component and Home Page (b): But not something, we're able to we're not seeing the next button. Those are the these buttons on there. So what we can do then is to import the particular settings that we can use over here. To have to introduce some settings. So we call it come settings or you can call it slider setting or anything. So it's going to be an array of settings. So the tens needs to be introduced to pas The next thing is this and the card. This is definitely inside our home page. Let's just write a little bit of code in our own page and then we move on that. Inside the section, section we have one Let's check this out. So what's the next thing that we need to do. So we need to create this different section of the block. So after the section, we need to create another di. Separate one. The first one is politics politics as first one. So we need to create a separate de that case all these dis, like all these cards inside so that even when they are more than this, it will know. That div is still part of V one. That's politics but separate from others. Inside this place that's where we are going to have this block that we're going to create a component later. Let me just stay this now. Okay. So after this, we have a botin bot that read more bot. So just read bot is going to be inside a link that. So for us to use that, I guess, we have to import it. So let me say definitely is going to be to blog we're going to work with our n. For politics, this is the link for politics. We've created this is definitely what is going to be later. So if we notice we have a an arrow. Arrow need to be import from arrow icon or icon. So you can choose anyone that you want. We need to style this also plus We'll style our button also and give you some So the icon that we are going to be using we are going to be using So you can start the icon also say margin left. We don't want you to stick together with the name, some part. So emerging tops that rm together. Sree 0.5. So let's check it out. Can you see? We already have it. But due to that there's no card in between it that's where everything is locked up together. So then we have a particular card, the card that were supposed to have that is not going to look together. Is going to be in a separate place. So I need to repeat this also for. That's for business, technology sport and entertainment, which I'm going to do now. So I repeat same thing for others. These ideas just simply mean identify it separate ID book ID book. Any ID book that damage is a separate section on its own. S that we have different sections now. We need to create the card that would be used. That's this card. We need to create this card. The first thing that we need to do is to create a component for the card that we import it to this place. So the card component will be using props props in react Probably is just passing some values inside inside a component in a separate page. So that's what we are just going to be using. I need to create a another file called blog card. So as Judge. So we need to declare that the component is going to be a certain props. So what are the props that we need it to be accepted? We need the heading. The tied to know if we check here. We have the image, this is the adding the title two, the description. The adding and the types that's a different. The title can be the title is technology. So the adding is out to navigate customer during a business sure description is the data and the time. So that's mainly what we need tit two description in our image, UR Auto. Okay. Click. When they click it, we need to perform a specific action. So under click also and time. These are the seven major props that we'll be using. So you can neglig error message gin missing the prop validation. So we don't really need to date that's another issue entirely. So we need to create our de inside. We need to create image tag. So the C will be this image UR. After that, we need another de. We need another de talking about the Tyson Okay. After that, we need another there's a paragraph talking about the description. After that dive inside the div, you need a paragraph two paragraph. One talking about the auto. And the second one talking about time. Okay. And was noted that time format. You have to work on it so that when you are getting the time, you're not getting wrong it's not going to be showing invalid data because you have to format the time. You have to format it to how it's supposed to show. But mainly we are using a default data. We are not really getting a time from the database now. So we just leave it like this for now. So inside inside this paragraph, we need the span. So it's inside this span that we have the time. So we need to style it obviously. Because if we check we can't see it now because we've put it out. So plan we need it to be flexible to to be precise. What? So at this side, you can just import it together with this. So inside one of our t, you can just it out. The one is that if coin it might narrow this is the card is showing the card, but it's not showing appropriately because we need to pass some values into it. You need to sparse some props into it. And for us to pass some props to it damage we must have some data to test with this. That's why I have this data do GSX already. So this is the data we're just using to test it. T example of different blog. It's the same repetition, but I just like use it to test pending return that we're going to link to the fire bills and just test appropriately. So I need to import this data into my reactor up here. So I import everything from the better side. So I have to map through it inside this place. So I will call the first there is the politics news polwsp inside it, I'm going to past this. So I'm going to pass I'm going to map through it and call it post the index. So inside this place, key will be index. Then I'm going to pass the data. Those are all the necessary information needed to be passed this call post. Yeah. Then the click under click for now is just going to be empty. Let me say not perform any action. Let's say this maybe actually work in our P. Wow. Can you see I was working perfectly. So we testing with our forced data. We need to test for business technology. So it's mainly the same thing you're going to do copy this. This right. Go to politics. Go to business base and changes politics to business. Okay. Can you see. Now we have a nice block for like a nice blog page. So now, we notice if you check some block sites, you don't display all the blocks at tons. You don't display all the news at tons. So after displaying a few of them, we just put this button so that when we clear this button into a route to the proper page that we needed to be. So for us to do that, we have to slice the data. There's a function in the javascripts that are permitted to slice the data. So where you slice you can slide it zero to 30 to four from no zero to five s the speaking five data. That's mainly what it is. So let's see. So basically, we're just going to be picking first three or first four datas. So for this one, just says slice. 04. Sta I put instead of st Let's check now instead of all the six datas just showing four can reduce it to the Yeah. So let's just story. So you can copy this and pasters also. So that repeat all of them. So the next thing is the counter page, which we are going to deal with together with some mother function in the next video. 6. Contact Page, Blog Details: Welcome by guys. In this section of the course, we'll be creating this contact form which is going to be a component that we're going to call in this part of this home page and also in the contact page. After that, we'll deal with view details. That is when we click on this place, we want it to view the details of the blog and we'll be able to press back to move back. So in it, we are going to be having the topic, the published data, and some information about it and the auto that person published it. So after that, we'll be working with friends, very different pages of each section. So we'll be having the spot page, the politics page, the business page, and the technology and the entertainment page. So first of all, let's work with our contact four to get started, you have to create a contact GSX file inside your component folder. So after typing the RF CU. Sting you have this on your system. So then we have to create our Dpcpris everything. What we need now is this heading and different text box with the bot in with other information consigning the inside the text box, we have inside this deep, we have another deep inside. So that's deep that we comprise this orange box. So inside our H one, H one that says engage. After that, we have the form So inside the form, we have a di di, another di. Then we have a label that will be the first name. First name. After the label, we have the impute that will be the text area. Inside the input, we have the and placed on it. So this imputes is going to be inside the also. So after this, I just need to style everything because u one is just going to be copy and paste to other aspects. I'm just going to be copy and paste in it, copy and paste in it to the other ones because we have similar structure and similar design. Okay. So after creating this, the main thing is just to copy this and paste and duplicate it. As mainly the same thing that is going to be there. So last simply recreating this and we are putting this two so that you can sion like this. So then we have this e mail one and message one. So we change on to last name. So you can say this. After that, we need our ma section that ma box. But email we can copy and paste this one and just change something on our design. So we can copy this and paste it, so it's not going to be in this me it's going to be outside. Need a separate one. Yeah, sir, it's supposed to be they're supposed to be. Yeah. So we change this onto e mail. Yes. So we need to edit this place and put some styling on it. I need to study d so just to follow up on what is going on here. We can import this to our how page and then we follow up maybe and see what we're doing. So before the last type, we can see contact contact. Okay. Let's assume that our browser repos pots. Yeah browser Let's check our to maybe. Yeah. Can you see. So we already have the engages the text box, the tag and the m. So the next one is just the message box. That's the tea Then we have porting on some details on it. So for the text for the message is similar to This e mail does that instead of input changes to text area. So that is going to be kind of large. So when the ID and the other things are similar. We just have the rule so that it will be let me show you. So we have the rule so that this place will be larger than others for the message. So that is. The next one is we need the button we need the send button and these two details. So for the bottom, we need the DV after the folding we need the TVA the net side is, we need a button and that send. We need to style it with substances. Let's check this. And so we have a button here. You don't you just need the remaining two cards under. That will be after the fall that we go another dive under it. D another d. It's two different dips now. Inside this dip we have two different dips. So we're just going to do the first one first. Inside the first dip, we need an SVG, SVG. I'm just going to copy an SG part inside it. And after the SVG, we need another de I'll give you some details. A H six says. And we have the P tag that's a number plus. I'm just going to put this because I don't want to put a certain number there. Let me just copy and paste the deep inside this place. So this is SVG. So we need to style this place. So for the second dive also Then dive that carries the SVG. This G is mainly a phone, let me just show that we already have it. The SG SVG part that we import is this phone icon. You can use a number of icon. I think that's what I so have used before but. Let's just continue instead of G can just import a phone icon from maybe icon or anyone for this So the next thing is just to copy this and just replicate it again, so far. So it's going to have a different SVG does for e mail. So again, instead of using this SVG, we can use a different can use icon instead of SVG. The SVG clip, then I don't even know I use it. But I think a icon is more advisable than G. So when you're watching this, don't bother out for copy and just go directly to icon I just and put it inside this place. So for this one, I can just use contact. I think that should do everything that we need to do here. So let's check it. Yeah. That's typically we need to do. Instead of visit just put a random number. It's looking somehow to me. Electrically random number. I think we are done with the contact page. So we just need to te this also in our contact page. We are done with the contact form, need to put this in our contact page so. Same thing. As we call it inside our own pages that we're going to call it inside the contact page. So we come to our pages and click create new file and call it contact page six. As usual, you have to export it out in the index to G inside this please So inside this place, just call the contacts from the component. After this, we come to our x and exports it out here that the link whenever we click the contacts link contact is going to open this page. That's. This one output. So that should do is, let's see, maybe it's going to work. So these are page. Let's click on contact. We already have contact page. So we don't need to be creating the form again in our contact page, just need to call the component. So the next time is just the click function of the z. So remember in our card, we already have a function called open on click. So we just need to go back to our home anywhere we have this on click that we pass no, we have to pass a function there. So the function that we just need to pass there is navigate. We have to use loose navigate inside a react component or a react function, it's called us navigate. So let's just do that in within a second. Okay. So let me just explain it vividly again, what we need to do. So what we intend you to do is that when we want to use state as a function cost. So that's why we click on this So be using use location, that is a react components, use location and use navigate. So that was simplement a hook returns that's current location objects. This can be used. This can be useful if you did like to perform another slide effect whenever the current page change location. So that means we can pass the data in a current page to another page I use this use location. I can from this page when I click another link inside it, I can pass some datas from this place to another page. So That my notes seems clear now, but when we start writing the pods be more clear. First of all, we need our page that is called blog detail. That will be blog detail. That would be a page. We are creating this so that we'll not be creating new new page for each details that we want to view. We just have to create a single one and then we can route through it for others to use. So inside these view details, s for the gardens is dine at my side currently at time at this point point, so we need to import some things. So as I said earlier, we are going to be using use navigate, use location and state. So it's just to pass data from one page to another. So first of all, we need to inside this place cost equal to use that the functioning inputs in s over the self over there. So it was the we navigate and also we need cost that used location. So these are the two mains that we'll be using. So they use navigates to when I click the back button to navigate to the previous page and use location is like the data that I passed from another page so that I'll be able to distru I'm able to use it inside this place. So I inside this page, I would decide, I want this to look. So that any time I click on data is just going to pass the value inside which does just simples me. So inside the block details, I'm going to design the zones. I go to say the image via the title and the other t. So first thing, I need to create this tip, this will always be there. Then inside I need another image an image tug then another dip to H one I will comprise the title. This one I just have to pass that state dot Can you see. So we need to check this data and see the variable that we use that we can convince ourselves. So we use image. So when we come back and say image as there for the art you can put anything that image or anything. This will be the state tie so we can bring this to the sites we can follow up what we are doing. So the second time we need is a p tags a paragraph tag that we mentioned the date at which this was published to say published on then we have our tag let's say softer that we need another tag as state description. That's a short paragraph about the blog. We need the P tag again that we show the details. That's the details about the You remember, Mr. Is supposed to be in the poly bracket the fun is like a variable. So you cannot just p like that, 2000 to be inside the poly bracket sstate the next will be there's details. I'll show you the full details about it. After that, after this pgm after this, we need a span we need a button like this button to say go back so that we can navigate to the previous page. See if I click a blog, I click go back, going back to the page, going back to the p page that I'm coming from. So that's what we want to achieve. So we can close this one right now and say span, let's put it in inside a span. So inside a span we have go back. So we need a pacular butting. That's this dis cart butting. So we can simply get that from our act on. So let's see left. It's pointing towards left, right? So let's look for the one that is see this use this. So just copy this carry the names. We need to put a function here that on click click. So when I just click whatshpF now, you put a that's no function should be. Then after that, we need another leave that we show the name of the auto. That's the auto of this for us we need this line. Then we need the name of the auto. So for the line, we can just simply say HR, put instead of that one, let me just put a deep then that deep I'll now say der up, that's border up, then I'll put a particular testing inside the style. So inside this need another. So this one just simply need to do is navigate minus one. So Sp a function, we need to do this navigate minus one. So to now use this now, we have to go to our wherever we are pulling these cards. So on top of it, we need to do navigate. You have to und the navigation. So we need a function, a function called navigate equal to post. So we need a recall again an argument to be passed inside it. So it's not the argument that we described. So we say navigate. So this repos to manipulate the URL. If if we check this, if I go back to one page now, and technical this I click on this, it's blog blog details then, there are some values that is taken from this how navigate customer, so how to navigate customer so you can see. So it doesn't have to put this inside. So we say slash blog. So these blog details that I'm writing must correlate with whatever when I come here must correlate with whatever I'm putting inside this place. So when I bring this one out now, blog details, and I call it out. This that I'm saying he simply means, I want to navigate through block the block detail. This ID, this column ID that I put means is not a static pages a dynamic one that any value that this ID represents can be destructed, and then we can use the value. So that's what we are using here. So the value that is passed through the ID is what we can destruct through the state and we can use inside this place. So I just continue and So details slash this. You know, if you're using this, you must use this bent the heading of the post. And after that, you now call the state us same selling column, you say comma I open the coolly bracket and say state. So this is the main thing that we need now. State date cculum post. That means the value that was pass you pass it into the states. Whenever we call state, we can easily check all the values that is inside this post. I think that's clear up. Now, you just need to call this Function in every aspect that we use null. So display that we are saying no, we have to change it. So I just select everything at once and say, supp is the function, we have to pass it like this. So when I select this and I check that they are all five anders, correct. I use control shift L. So control shift when we select anything that is null inside this code, and then I can edit everything at the same time. So if I cancel this, I can edit everything at the same time. This function actually need a post argument. Remember what we are passing side as post, so you can just a post. For each of them, each of them have their own particular post. Let's check it now and see maybe it's working. Yeah, the arrow is from here. There's nothing like navigate. So we have to firstly do this equal to navigation, aviation. Let's see. Say this does not provide tail you have to put it that the problem. Sorry, I use navigate. Exactly. That's the issue. There's nothing like use navigation use navigate. So let's see if I click on this, I have this my display button, you notice the URL also change. And if I click on go back to go back to the previous page. So we just need to style it with some CSS like our wind. So let's check it now. We should have a more fashion we design. Is looking to expand like this one. So let's see other things that we can add add to the. Yeah, I think the mistake is exactly we have a fancy one or more cos showing our description. Let's see. That was good. 7. Blog Section and Create-Blog Page: Hey, welcome back, guys. So the next part of the story, we're just going to be dealing with the different block section page, and we are going to be creating our create block page. This one is not part of the button we explain may not put any button outside because when creating blog is only the admin that have the poisal to create blog or somebody that have been giving access to create blog is not just anybody that will just go there and just paste anything online. That's why this link is heading. For only the people that need to see it. The next part we're going to do now is creating different section of blog and create blog page. What we are mainly going to do here is this other one that we have done that we have a general code for it. That we now be routing through different pages or different data. We'll be passing different datas to it to display. So this is a simple is a single code that is running for both sports, politics, business, that we are changing is based we are changing the picture of the name and the datas that may be passed into it based on the category at which they belong to. So without further Dugg started and run that a simple line of code and then we're done with that. So I've created my block section page, is it block section page, and also my create block page also, I've port it out here and I've created a link for it over here. So after creating the section page also, we still need to link it to our read more button. So if we check now, if I click this politics read more button. So it has to go to the politics page. So we're going to do that one also. So after creating the page and linking it out, so let's get started and start writing our code. So the maintenance that we need is a normal de that's comprising everything, a dip that comprised the picture, the text in it, and this block card. No, we already have a block card already, we're just going to call it. So now on our page sections the generative that we need. So we need another de this div is one that we carry the image. This is one that we carry the text. That's the black shade black brand or little faded black bragd that carry the text, this text et. Let me go We are still coming back to this why I have to comment out like this. So this category now, we let up a function or a variable that's click spot. It is a test spot news, click on business is a test business news. So for now, I've not grader functions, so that's why I just put it in a I don't need to a string. So rather we need a six. This one's a You can rely on our missing news, stay informed and stay inspired. You go to source for latest news in sites so that is that on that. After that, we now need the deep that will comprise the blog detail. That's a blog card. So inside, you need another also. So we need to call the function blodard have some that's key equal to index. I'm going to pass posting to it and click be equal. So this one will be the function that we did the last time. So why they click on a particular block card, if you open the details we pass posting to it. So we are going to come these ones out because we not create the function that is needed. So that is all about this. So the next thing is just to style it and make it look nice. Okay. So for this one, I'm going to put this in this type of string. Dan I want to pass it variable inside. So this deep will be the one that will carry the image. So I'm still going to work on the image function under. So it's going to carry the image that I can pass the image inside this place. So it's going to be So this is a little bit transparent. So if you take note of this please, I pass in the category. Like the one I explain the time about block details. I pass this ID into it. So way I'm calling it. The ID is the category. The one I click will be the one that the details that will be shown lipo be the one that we showed. So go back to your I think we not put this slash one. I put this last there because it's not I don't want the leg be something that I visual guess design. You might not put this slash on there, but I s can put slash on this place we just need to put one slash everything. Why we click it over here. The category that we're passing will be the one that we display. So I talk I mentioned something about the image the time. So yeah, I want the technical of this place, if we see for politics is showing the politics image, click sports is showing a sports image, click business is showing business related image. So that same to replicate that same time to replicate. I don't just wants the same image for everything. So that means I'm going to create, a function here call GG BG means background image, right? So it's going to receive he's going to receive an argument co category, So there's going to be a switch function, should be familiar with switch in Java Script, switch if the case is politics, if the category is politics bclion politics. So a particular image. It's return a particular image. I'll just copy. So it is business, clic on business, there's a return a particular image, cliconspot already have the link. If you go back to our home page, It's the same link that we are still going to use the same to our slider, sorry. It's still the same image that we have used or this image that we have used and that we are still going to use. Just copy the one for the one for politics for policies, the one for business for business. After that, you return a default. 84 damage. If it's not part of all the things, we should return an empty distance. So we're not going to call this image now. So we're going to call this image in this place that we call put and then we are going to pass the data of category. So we cannot pass category now because we no creative function. So let's go ahead and create the functions needed for this place. So to continue, we need to import all our datas. So this is where we are going to get the details that we need. We need to import use per also, we need to import use navigate. That's when we use when we click a particular block card to view the details. So what do we need now for us not just to repeat those things. We can just copy this one. The next thing is we need another variable that is called part. Equal to use per use per doses if you check this place I'm passing category. So this use per simply check the links and check the particular value that I passed as a category and then input to this one and then get the data for it. So the next thing is just a use effect function. So this one, we have a function in size that says selected News. So this one we store the value of the selected new CA inside an R. So then we have a switch. Switch the value category. So like this other one that we have here I deputies. So except for the links, I'm going to check change the links. So if it's politics, I want to select news. I be selected news equal to politics news damage this politics news. So it's a array, so I can get the values there. Then break. So the next time contain for business. So if it is default, damages if there's nothing there you pass an empty array. So after that, we'll be dealing with spot, so I think we had S. So we need to remove this. So after that after this switch case, so we need to set our blog. Damage you have to create a state co set block So state course this one will be set. So set blog, the value of the set blog will just be what is inside the selected us. States if you're using vector, you have to pass a particular so that it just start reload based on when the category changed. So now after this, we can now use our category Yeah. You can now remove the column and use this successfully, then inside this please. So what we need to do here is to mark two different blog that he's giving. So here, we can see blog mark So I think our block should work. So we need to pass this function also inside this place. So this is also be name the second. I think this should make our app work and when we click a particular blog, we should have our view. So let's go back to and see. Let me try click spot. It's showing little spot news and can you see the link here, click on politics, showing the one for politics. If I click on technology, and if I click on any one of them, it's going to view the d. If I click back, showing this on, but what happened, our image is not showing. So let's check why our image is not showing. So for the image that is not showing, can just come back and change the CSS to this. So open the style style, right? So I will star equal to this. So we'll be able to write the per ground image, per grand size and the distance. So if we go back to your page, you can see for spots, business, despots business. The next thing is So the next thing is our block page this page that I've created already. Cs block page is similar to our contact page, the form and everything. Those actually are different. So we are just going to follow the sentence of our contact page like this one. Those go there and copy from here, the return also. Priest. Yeah. So for us to follow up on that, we can just go to our our link and follow the link that we use re blog. You can copy can see if we go back to our So if we come to our normal, we see res blog, block I two. We have a list of category, we have the description details and the image link. Then we have some bots seat up set all those things we need to correct So instead of the two is supposed to be one and some other things. So let's get started with that. So the first one is a blog details. So we go back to our thing so where we are first name and last name, right? Your so we have our blog destiny. So we need to remove this that is under the phone and change this onto. Yes. So this category, we need to work on it. So for that for the category, we need our list of categories, and then we pass it inside our files. So for the category instead of the number one that we have time, we're going to change this So what we have now is a select function does t and we have our CSS tile for it, is similar to the one in that we've been using before. So it doesn't change new categorical to. Set coral damage, you have to create our state for both the tile two from the beginning to the end. Then we have our various options there. The next thing is to create our state. I just need to be installed. So come to our say So now you have our usage for title two for all categories, full blog. Full blog is also the details, the details, the image, and also the description. So we need to work on our own change. So when the values change up. So for our change is very simple. Come here change on change event. So reverse an event that we created for the variable does uti cot to event dot target value. So we target the values that when you write a particular and enbrit down, so it doesn't change the master. So let's just copy and piece this one fors and change the necessary to change. So for So you come here, you can change all those things. The category is there, you can click on the category of the plug to submit and also our image. So the next thing is to work on this solving button. That's when the serving button is clicked, what so Dame to pass the value to the database. So that will lead us to the next. So probably it will lead us to our last or second to the last part of the stye that's creating our fire account and setting up our database, and then linking it to this base, and then replacing this data with the one from the database. So state 8. Firebase implementation (a): Hey, guys, welcome back guys. The next important thing after this is supposed to work on our submitting. I'll try to click on the submit. What this data that we go to our fire base. So this as right now, we have to set up our fire base. And to retrieve data from our fire is to send data to it and to retrieve data from the fire ies. So to do that, you have to set up a fire ese first. So just go to counsel do firebase click. I go to have this page. So after signing some I've already signed my account after signing and other things. So you have this page to a project. So these others firebase for before. So you have options to art projects. So you want to click on art project. You put the project name. So I say the project name should be log, log. Then click on continue. I don't have google analytics dt there's another ten that I don't offing it just wait for it to finish preparing. When it's done, you have something like this. You firebase pro is ready. You click on continue. You have this. So this where the main work started. The app that we are bidding, get ready by adding firebase to your app. The app we are building is not an was not an rod, it is a web app. You click on web the web name. I'll put blog. I can say block Also set up fire hosting for your app. I don't want to host it on fire bee, but if you want to host it on fire be, you can just lick the option and do some other things that you need to do there. So register app, then you have to copy this copy this and go to your termina termina. Since hosting, you are running the app with 11 termina you can open ramina open another one. Remember, we're now in the correct directory, you have to go to the current directory then you paste it do MPM install firebase, and you click Enter. So it's going to install firebase for you. After the installation, let's go back to our P. So they said then initiationalz, firebase and begin using the SDK for the product you'd like to use. So just copy this dis and go to your source fader. That's your source bader source fader and click click on it and create for you call it firebase. Firebase. Yeah inside is based the code copy. You don't need to copy the one I have the PIK, the dooming the domain. This will be unique to your own site personally. If you copy this is more likely delist this domain or APIC after this project because it's something that is personal. It's not something that you put outside or something that everybody can see. So the next thing after this is to create our database. The other thing you can use fire base for it's very wide. You can use it for checking, using authentication, connection of some other things. There are amenities you can use firebase. You can just really up the documentation and watch more video on it that we really help you to know more about firebase. So what we want to do now is for our fire storage database, fire st database, and click on. So you have this. So when you have this, you can go directly to create database. There are some things to do before creating database. So you slick to How do I get started. That's from regular. Read all these things. When you get there, you see setting up set up document environments. We are now using this. I think we are using some sides and you've already installed firebase into our app already. The next thing for us to do is to copy this. Let's go back to our app. So we have initial last day before. Let's just copy this. Let's copy this And place it medially under this one. So the next thing to do after that is to have this. Since and some other things that you can do is that you can hide all these things when you are posting it on line by using dot EMV. Where you want to post it on line git thing can see dot EMV. So you can past PIK and call it from this place inside your fire piece. That will make it secure and you can put gitigno when he's pushing to fire piece, just eclde dots. Do EMV should not be pushed to go. So that's another attempt to make it secure. I'm not for the sake of the story, I'm not doing that. So after that first to assess this, we have to export this DP out. So we can use it anywhere. So this DP is what we'll be calling often when we are working with the app. First now call it just come here and do export. So you can now assess this from anywhere. So we can still go back to your app. If you see this outward data to your app. Add data to your firebase, import this and this collection user. We screen that later. So this is the small code we have to run to export to push data to this firebase. You want to read data, from the database, you want to reach the particular data that we are going to be doing, is the code you follow to read data from the database to secure data to delete and so on and so forth. Now let's create our data ese Let's go back as it creates database, slickness. So don't worry we sping back to this base. So now our data collection we have collection, we put an collection like sports, next, document ID and some other things. So I have a connection. This connection collection supplement is like a particular section of the blog we're creating out. I can put it in different collection. So sports a sports, I can have politics, I can have entertainment here. I can have a single section here and have different documents, but it will not be good when I want to code data and filter it. So it's good for me to have different collection here. So each collection have its own file, its own document. There's each data inside the collection here. So I can have multiple data inside this place. There's multiple blog inside the sports division inside the sports collection then I can view each block in this place. So I take of like a file in your system. You have different folder at three folders or three different things inside each folder. Maybe one for movie, you have all your movie day, one is for music, and one is for documents. So you say that they have different things they are doing and they have different things inside. So same thing acquired to this T of this as the folder. Then the file inside is then you can assess the file inside is. So let's just get started and go back to our create blog. Let's come back or create blog. Let's work on how to make this boxing work. What we want to do now is that when they click this submit boxing, you want to add blog. Add blogs pans want to do this. That means we want to send data to our database. Simply doing this. What we are going to do is import collection, and add blog. After collection, remember the time this thing that we export. We have to call it because it's very important when we want to do anything here on database because we need all these values so to be fast. So import or I think it's to recall here. So DB firebase. So we need the function here that we send data that we recall whenever whenever we want to send data to the firebase. So cost like something that we already have here no c or anything. So you can follow this and can still follow me on what I want to do here. So cost a blog. Okay So first thing is that I want to prevent I want to prevent default that default load and some other things that default. So the main reason why I'm calling this prevents default. There are some default action Java script that I need to stop. So imagine I want to send the form and I want to validate it before sending it. So I want to stop the default action of the Javascript from submitting the form before validating to use this prevent default because the default of javascripts when I c defaulting to send it directly for even validating. After that, I want an if condition. So I want to check each textbox, maybe you have something inside. So if this title is empty, it will not allow you to send if this tutor is empty category full blog, all of these things. Even of them is empty, is not going to allow them to go. So for this image, let's see because there's a particular name we have been calling out, so image so that's nice. So that we not after calling from the API we don't want any issue that our image will not be showing if the name is no different image. After that, after checking this, even if it is true. So we should call at. I don't want to stress too much a lot. So I just want to prompt to use that at a one of these is empty. After that Lama evil of them is true. I want to check the image link. No, some people if you go to the. Some people want to put jack on here. I think the app is better accepted. So I want to check maybe the link is actually true. Maybe the link is actually working, or the link is a valid link. So for me to do that, I have to come to my source for the and create fall UT. So inside it. Inside this will have some index. Inside the indigo X, I will write a simple code to check maybe the PR or the link is true or not. So export can call it any other place. Check check if the image is true or not or valid or not, the UR and the cob function. So that is that that's just all we need to do. So we just need to come back into our blog. So plus the heck image, we have to go to an import imported that. So I can all the function here and say, and I will pass heck image, and I will pass this image into it, it image R. So after checking, it has to check maybe the image or is true or not. If it's not true, it went to straw error. So it has to check maybe this UR is true. Remember, the two things that the UR saves, the UR save and the cba function. A coa function will be sync and we have a function here inside is common. I inside is now, we have another function, another conditional statements that say I exist if this is actually true. Is true now set is disabled to true first. So this is that when they click the button, submit, remember when I pass it here, when they click it here. So when the disabled button is true, they will not be able to click click this button again. Some people can just click on the button many times. So to avoid the action for recurrence or repetitive sting you have to block it. So after that, you have to a weight, no this is a scronos technically davi weight. So a weight do we have to time at dock this do we have here. Open rockets collection, are you saying where we are using it. If you go back to our fire see they have their own DB also. So DB is not in our app that's why we export it DB after DDB, then we need the collection itself, where we want to stall it. If we check this place, this user now is a collection place or let me go back and show you something. If you over on this one, you see a Fire storage. That's your fire stores in com part that string is the stresting this pass now is where you want to store that's your collection name. So my collection name, I want different collection name because I want one for sports for sports, for politics, for business and so on and so forth. So instead of me passing a single string here, S sports. So if I pass for Dam is all of that, the story data will be saving beyond that sport and I don't want that. So I need to pass category there. So category if the category switch to sports to save the data point to sport. Are you getting me. So if the category says politics, the category is the category. So if I select sport, it saved this data that I'm writing under sport. I I select politics, save the data under politics when I keep devoting and so on and so forth. That there's logic behind it. So after that, we have the coli bracket. Okay. Then I will not pass all the data. That's type two. If you notice is when they are passing all the data inside. So I have my type two to type. So I'm so so the category also the the full blog, the URL and time. Time is something that there's not option for you don't need to put time with yours. The time you click the service button is going to be registered. If you notice in our app here, you see something that says four that's apri 2000 2024 at this time, is the time that this blog was created. So it's just register the particular time you are clicking the button then. So that's what the time starts for. So if that's successful is to bring out another alert that says, We might want to reload our app, may want to reload everything. So after the blog the blog have been created successfully. I will read. Now else means if this one does not exist, if the image link doesn't exist. So what should analy says, I'm using aer. There's a better way to do it. There's another I can create a component for my notification instead of using alert. That will be part of the assessment. You want to expand it, so you just call it instead of using an alert or you can design your own Aart model. I can say image URL. Image URL so we can now we remove the invalid. That's all we need to do. Test it now. Let's come back here and go back to we need to deli this zone. This will be fresh listing. So imagine now I want to create blog on. Let me just pose something a blog one, the auto, my name, Joel is a sports sting. So the description, closing down business, follow the geost. So for the details. Okay. Let me just find a random dx. I'll come back to my ab and paste. So the image link, I need an image link, so I paste. So now, I want to test maybe this image URL is actually working. Maybe if I put a wrong UR then maybe it's going to work. So instead of pasting this, I'm going to remove this back and just write rubbish. So let's take a los now. Let's click submit. Yes, there's a mistake. We've not yet called this function out. So we can't assess this function. That's the mistake. See that's when we click on submit, everything justap call the function that I come out time. The calling out the function. Let's go back to it and try and see maybe we're going to retrieve the previous one. Let me see this is not a valid URL. Let me see maybe it's going to work or not. Can you see provide a valid URL link. I click. I need to go back and copy the correct URL link now. And let me place this past table right then let me click submit. So click submit already. It's supposed to be load button let's take note of it. So we are receiving to party block hookie blocked or something like that missing or inst permission. So we do not have the permission to post on this garb yet on the sorry on the fire base 9. Firebase implementation (b): Hokie will be blocked or something like that missing or ins grant permission. So we do not have the permission to post on this gb yet on the sorry, on the fire base yet. So, you know, when we're creating it, I show you something that if you come back to the rules, go to your rules. There's something that we're showing I think that's for third party, blah, blah, blah, blah. I say, I'm going to explain later. You can move the video back a little bit. So this is the place. We need to rewrite this one so that everybody can write post can have access to write posts. So what we just need to do is change this one to true. This one to true. So now we already have different collection for each of them, and some of them have two data, one data to data. We can even make that's technology so have T data. So the next thing now after adding all these things is for us to re and call it our. You notice we are calling the data from our database from our fire base. So most be able to do this. It's very simple, maybe we are write that line of code, no, no, no, no, no. What we are just going to do now is go back to our code. So instead of the same one where we have the before instead of the default one we have there before. I go back to our code. Go back to our home page. Now instead of using all these ones, we have to get our data we have to read data from the database. Remember option for a data, can reach data. We have to read all the data from the database. So what we do copy this that's get documents and also remember you need or your DB that's TV from fire base. So we need that. So what are those function that we need to write? So first of all, we have to have a estate for each of them. What is state does is that after retrieving to retrieve it based on each collection, un we retrieve for polities collection, polities blog technology dT, entertainment sports and business. So un port from the database based on each collection. So what we are going to do now is to have our use effect because it's going to be si run consistently use effect. So use effect, we have a function c equal to a scronssd have Q query snapshot. Equal to our we get documents that we have there already collection inside the collection, we put our DB the name of the collection we want to get itself and as politics. You can go back to your dt and check the name here, politics, if we check here, it does what they deals also snapshots, equal to the standards. So politics as well. Then you have another costs block an R. So as a query queries persons for each. For each of them, we want to store it inside fed blocks dot push. So we want to be pushing it inside the CR with an ID. That document dot ID. Then we spread the document data. So after that, we want to sort the data. That means the first one that has the latest one we come first before the other one. So we say cost sort sorted block equal to f fresh blocks A come B two arguments do time. So the time they want to sort is bat on time minus a times that they will set Set P B that set politics blocks state state glock. After that, on what's called the functionals. It is a fetch blocks or let's say fetch blocks instead of fetch block. Let's fetch blocks. Yeah. Because now looking for only one block. So after that, we wanted to run once after loading. So that is that about politic. So now we have to replicate it for others also. So if you take the time is correlated with the time, so we have to format this so that the time will be appropriate. So what we need to do is that we need to go back to our block card because this is simply in our block card, right? Go to our block cards inside our components. Card. So where we have time, we have to replace it with this. There's new d time sus string string string. So it's format electric. It shows the time that we create this blog and the dates. Let's click on one of them. So it's showing but one thing is not showing the full details. So let's see the name that we call the full details here. Let's see we call it full blog, full blog in this place. So let's go back to our component here. That's our view deg details. Let's check. So this was states do details. That's state full blog. So let's check now. We have it. So our data is not so published on. So that means we have to format that one also. We have to format this date also. Remember what we did here. You can just come here and p to. So this one will be state the time. So let's check what is there already, and our go back voting is working. So that's mainly it. But another thing that remains is for this place. The other one still have the former blog. So that means we have to go to our details there, our blog section and change some things. So what we need to change is called the API it also to read all the details and pasty inside each of them. So what do we need to do we already have our sales block. So like the page that we need to call everything out, everything out here, each function out there, we don't need to do that need to copy this. We don't need to do that in this place. Sorry. Yeah, these are block section. So let me just please the one I'm not using correctly. I go back to my section. So we don't need to call everything out here. We just need to call this one of them, and then pass category, right? So the category that we click here if it is sport it will generate the sport blog. I'll get all this spot blog, the collection of blogs that is pertaining to sports. If it is politics, get the one for politics and so on and so forth. So inside this place, it will be set blog instead of set set blogs. That is that. So what is missing here is we need this to import this. So let's go back to our home page. We need this to to be here, right? And here we need to pass our category dt. So change when the category changed we need to do. So instead of this state now, we can delete this state out, which are thing that should be. Let's go back to our p. Can you see now just. For us to be sure, I think I created a post on the policies that I call politics. Can you see? It's changing based on the particular one I input, technology, three entertainment as zone. So can you see the image is showing wow beautiful image. So that is that if you click on this showing so it's been a very amazing time taking you guys along building this amazing site. So there's a lot you can still do with this. So and that will be part of the assessment. What I will just need for you is work on the model. So when I click on For example, when I go back to this crease block, if I go back to this use block and I click on this. Instead of using Alt, you can create a model, your model will be the one for useful notification instead. And that thing, you can list out all your blocks so that I delete button so that I can have to control over it. You can delete it from this place. You can view it from this place if you wish. But if you don't want to do that, you can come back here and any blog that is fine that is not useful. You can just click on this and delete documents. And delete documents. You can delete document that you deleting this whole blog out of this one. So That's that. So after that after creating something like that, you can create your model and make this search button works. The contacts. So that's when they click submit, you send a mail to to this any email you could say to your personal email when they contact you. I think there are some sites that can do that I take images check images. Images can help you do that. So when they send a message, it will send trans right to your email and you can reply them from that place so you can do a not to generated email and reply them. So other things. The amazing things you can add to this it doesn't stop here. The design doesn't stop here. There are some of that you can hide like loading loading, there's a load putting. So when I tick on this thing, there should be like a load putting running round, round round, round round round. There are some amusing CSS, load putting. I be load loading icon loading animation, you can check that. Various them, Various of them, you can check that and see how you can implement it to this. So thank you guys for following me to the end of this storia. Um I see you in the next tutorial, anyone that I'm going to drop next. So please click the follow button so that anytime I drop an amazing content, an amazing tutorials, you're going to follow me and you're going to enjoy it together. Thank you very much, Segers Nia