Build and Deploy Responsive Blog in React using Firestore | Firebase V9 | Email Auth | CRUD | Sass

hey guys what's up what's going on welcome back to another react project with firebase on my youtube channel so in today's video we are going to build and deploy a fully responsive blog application with the help of react.js and firebase and in this project we will be using firestore to implement current feature so let's have a quick demo of this application which we will be building in this video so first i am going to login with existing user that i have already in my firebase after login user can create a blog so you can see that on create block page each input field is unique so let's give a title here so i'm going to give here like dummy blog let's give a tag here like dummy let's mark it as trending i'm going to select a category here something random okay let's give a long description and i'm going to select one image file so i'm going to select this image and this button will be disabled until the image got uploaded on firebase so you can see that we got the message live image uploaded to firebase successfully now let's click on submit so you can see that our blog is created successfully so you can see that this blog is created over here and it is also showing in this parasol component so we are also going to implement this parasol as well and user can also delete or update blog so he can delete or update his own blog he cannot delete or update the blog which is created by different user so you can see that this all blog is created by different user so this blog is created by john wick so you won't see here delete and edit icon so let's delete this blog and if you click ok the blog will get deleted okay and we got the message as well like block deleted successfully and let's perform the update operation so i'm going to click on this edit icon and i'm just going to update the title here okay and let's click on update so you can see that our blog title got updated over here and we have a detailed page as well in this application if you wanted to read more about this particular blog so you can see that we got here nice detail page so let's go to the home page again and here you can see that we got some more section like tags and most popular section and if you click on this so you will navigate towards the block detail page and this is our carousel component so you can navigate like this way and in this castle component we are showing only trending blog okay and we have a basic about page you can see that and this application is also responsive so let's decrease the screen size so i'm going to mobile mode here so you can see that our application is fully responsive so let's scroll down so you can see that it is responsive and if you click on read more so this page is also responsive and if you click on this bar so our header link will show okay so let's come out from mobile mode so this is the overall application that we are going to build with the help of react and firewall and at the end we are going to deploy this application on firebase so you can see that this application is not running on localhost so this is the overall block application that we are going to build and deploy in today's video and the source code of this project i will provide in the github link and i will also provide the image that i have used in this blog application so before we start working on this project if you haven't subscribed my channel then please do subscribe this channel and like the video as well if you find out that this video is helpful so let's start working on this project so guys now i am going to do a project setup over here so i am into this directory and i am going to open a command prompt and i am going to create a react project npx create react app and the project name will be like fire base blog app okay something like this i'm going to give my project name so it will take two to three minutes to install all the necessity dependency so i'll be back once this process get complete so guys our project setup got completed over here now let's go into this directory that is firebase blog app so let's go into this directory and i'm going to install some package that is required in this project so first i'm going to install those packages so we are going to use here react fund awesome so let's install that one first react fund awesome then we need to install one tag component that we are going to use in this project so i'm going to use this tag component so path of dev and it will be like this way so you have to install this stack component this way after that we need to install firebase as well because we are working with firebase in this project and we need to also install one package react all carousel and we need to also install here react router dom then react 55 and we need to install sas as well because we are going to use sas in this project so let's install all these packages first and meanwhile i will open this project in my vs code so as you can see that i have opened project in my visual studio code and let's see our command prompt whether our package got installed or not so it is still in progress so now our package got installed you can see that so all those packages got installed and i think i forget to install one package that is boost trap so i'm going to install that one as well so and to install bootstrap so this is also installed okay now let's do here first npm start so our react development server is running you can see that and now it's load into our browser so we don't have any issue now we are going to do a folder and file structure in this project so first i am going to create couple of folder here so we need your components then we need folder for pages not inside component sorry let's delete this one we have to create under source so we are going to have pages folder we are going to have one utility folder and we are going to have one firebase file here so all the firebase configuration we are going to restore in this file that is firebase.js and next thing what we have to do so first i am going to create some file here so we are going to have home dot js we are going to have one detail page for our blog for detail.js we are going to have one file for adding or editing the blog so i am going to use the same page for adding or updating the blog then we are going to have one auth file where we are going to have our sign up and sign in form so in the same file we are going to have both functionality for login and registration okay and we are going to have one more file here that is not found dot js okay and we are going to have one basic about page so about dot js and under source we are going to have one file related to sag so so style dot says okay and we are going to have one more file related to css which will be basically responsible for handling the responsiveness in our application so we are going to have one media query and under utility we are going to have one index.js file so basic folder structure setup got completed over here now first i'm going to generate some snippet in all this file okay so one by one i'm going to generate some snippet in all these different different pages that we have over here under this pages folder so let's generate a snippet in detail page as well let's generate a snippet in home page as well okay now after that what we have to do so first i am going to do some configuration inside this public folder so i am going to bring cdn for bootstrap front awesome okay so i'm going to use this two cdn one for bootstrap and one for font awesome okay so let's save this one and we can quickly verify this one so i'm just going to use here h2 tag okay and i'm just going to bring here inside our app.js file i'm just going to remove all this thing and here i'm just going to bring my home page now let's go into the browser so it's look like working so if you remove this cdn so if you remove this bootstrap cdn so it will look something different okay you can see that and if you enable this one then it will look like this so that means this is working now after that what we have to do so first let's configure react rectify as well because we have installed that package as well in this project so first i'm going to configure react 25 so we have to use this to import statement related to react testify so the basic setup we have done in this project so now i'm going to start working with our browser setup in this application so i am going to enable routing in this application then we will start working on other functionality like sign up sign in okay so first i am going to enable routing in this application so from react router down i need to bring some component so let's bring routes and route so under routes we are going to have our multiple routes so route let's define path it will be home only and we have to define element and here we can use our home page now after that we are going to have a detail page so detail a blog detail page and it will be based on id so here we need to bring that detail page now we are going to have one page to create blog so that will be like create and the comp and the page will be add edit blog now we are going to have page for update so we are using here same page and we have to update based on the id then we are going to have about page so it will be about okay so let's bring this about page now we are going to have one more route if url is invalid so for that i am going to have that not found page over here now let's use this tools container as well so it will be here only so let's use your toast container now let's go to this index.js file and here we have to bring browser router from react router dom then only routing will be enabled in our application so we have to wrap our app component with browser router so this is done and let's see in our console whether we have any issue or not so we have one warning so let's remove this unused import statement now let's go into the browser so we got home here let's go to detail with some id so this is also working so on this page we haven't used any tag so that's why the font is different and let's go to create so this is also working and if you give some random route we got not found so our all route is working in this application so we have successfully able to configure routing in this application now what i'm going to do so i'm just going to do some changes in our index.css file so i'm going to use your font family poppins and i have just given here line height 1.5 let's go to the browser and you can see that some font is getting changes okay so i'm going to use this font so this is done now i'm going to start working with our header component file so first i wanted header in our application so header dot js let's generate some snippet over here now after that what we have to do here so i'm going to use your nav with the class name navbar navbar expand hyphen lg never light and background light okay now inside this nav we are going to have this with the class name container fluid bg hyphen faded then padding media after that we are going to have one more div with the class name container padding hyphen media then inside that i'm going to have nav with the class name navbar navbar hyphen toggle label toggle level hyphen md navbar light now inside that i am going to have button so button will have a class name here so it will be number hyphen toggler empty hyphen 3 and type will be button then we have to use here data vs toggle and it will be collapsed now we are going to have different different databases so let's just copy this one first so this will be database target okay and this time you can give anything like navbar supported content now i'm just going to copy this one and this time it will be parent okay and this will be the same and after that we can we can have area control okay and we can give the same thing here without hash okay then area expanded and we can give here true area level we can give here that is toggle navigation okay now inside that button i am going to have a span tag with the class name fa fa bars okay now we are going to have one div with the class name collapse another class name navbar hyphen collapse and inside that i am going to have url tag with the class name hyphen auto mb hyphen 2 mb hyphen lg okay and here we have to give id so id will be the same that we have over here then only collapse will working okay now inside this ul tag we are going to have couple of list item so i am going to have list with the class name nav item nav link okay and first we are going to have like home okay i am just going to copy this one and this will be create and this will be about okay after this ul tag i am going to have here class name row g hyphen 3 inside that again i'm going to have ul tag so i'm just going to copy this one let's copy entire thing we can remove this id here and this will be like login and log out so i can just remove this one and for now i can just have login let's remove this one because later we are going to implement authentication so it will be either login or logout at a time so let's remove this one so basic header component is ready over here now we have to add the styling in our sash file okay so here i'm just going to do a copy paste the styling for our header component so we are going to start with the header so i am going to use all this styling for our header component you can copy all this styling by pausing this video and we need to add some more thing some global styling in our sas file so i'm just going to put them as well so this is some global styling i'm going to use over here okay so you can pause this video if you wanted to copy all this style because later we are going to use all this box shadow clip part transition okay and we have to bring our sas file in our app.js file so here what we have to do so i am going to bring our sas file as well as media query file okay so we can verify this one so in order to verify we have to bring that header component here so let's bring that header component that we have created now let's go into the browser so we are getting this issue so we have installed wrong package over here okay so it will be sas okay and then install that save and it will be sas okay double s so by mistake i install this incorrect package in this project so package got installed so let's restart this react server so now we don't have any issue after restarting our react development server so let's go into the browser so now we have got this one so i think i have forget to bring the style sheets for this font pop-ins you can see that in our index.css file i have huge font family pop-in so we have to also bring the style sheet in our index.html file for this pop-ins fund family so we have to bring this stylesheet now let's go into the browser so now you can see that this is looking good now next thing what we have to do so we have to put a active tally if you are in home page okay if you are in create phase then this header link will get active if you are in about page then this header link will get active so we have to achieve that functionality in this application so for that what we have to do so let's go to this app.js file and from react i need to bring here used so from react we need to bring use state and i am going to achieve this active styling from our parent component that is app so active set active use state and by default our home page will be active so i'm just giving here home and i can pass here set active as a props okay and active also we have to pass now let's go into this header component and since we have to also navigate if you click on create or about so we have to bring here link from our react router dom so from react router dom we need to bring link so here i'm going to use link for all list item okay so let's put here and it will be basically navigate to home page and here we have to give the mainland styling text decoration none and we are going to have a on click method here so if you click on home then we have to make home header link active okay and this class name also we have to adjust so here what we have to do so here we have to check like if active so we haven't bring i guess here active and set active so let's bring that active and set active now here we have to check like if active is full to home then we have to use the active class name basically i am appending the active class name over here else it will be empty let's format this one and let's go into the browser first so you can see that this header link got active now the same thing we have to do for other header link as well so let's just copy this one okay it will be almost same for other link so let's just paste it over here it will be create it will be create and this will be create okay let's do the same thing for about if it's match with about then about will get active and we have to do the same thing for login as well so for login i wanted to navigate towards auth and it will be let's give here login okay and this will be login and we have to mention the route here so it will be about and this will be the create let's go into the browser and verify this one whether it's working or not so let's click on create so this is working this is working so everything is working as expected so we are done with the header component as of now later we will have to adjust this header component once we implement the authentication in this application the next thing i wanted to work on authentication part in this application so first we have to basically configure our authentication in our firebase so first we have to create a project then only we can enable the authentication so i am going to this firebase console and i'm going to add a project over here so let's give your project name like react blocks app okay let's click on continue if you want to enable google analytics you can enable i don't want this one let's click on create project it will take one minute to set up our project so let's wait for the project setup now our project is ready let's click on continue so first we have to go to this web so we have to click on this web and let's keep the same application name here that is react blocks app let's do this one as well let's click on the register app now we got this firebase configuration so let's just copy this one and we have to paste it inside this firebase.js file let's go back to browser and let's click on next we will deploy this application later okay now let's click on continue to console after that we have to enable authentication so let's click on this authentication let's click on get started and i'm going to use your email password okay let's click on enable and let's click on save so this one is enabled in our firebase console and at the moment we don't have any user after that i'm also going to enable this firestore database so let's do that one as well let's click on create database you can use here production mode let's click on next let's click on enable our firestore database is created over here now we have to edit the rule as well so let's go to this rule and here we have to do one slide changes so let's make it true okay and let's click on publish now we will able to add delete or update any data in this file to database so this one is completed now now after that what we have to do so let's go back to our vs code first so here also we have to do some configuration related to firestore database and our authentication part so first we have to bring the initializer from our firebase app so from firebase app we need to bring this initializer then we need to bring get firestore from firebase firestore so we need to bring this get firestore after that we also need to bring the storage because we are going to upload the image as well so from firebase storage okay we need to bring this get storage and we also need to bring auth as well from our firebase auth so from firebase auth we need to bring get auth after that what we have to do so we have to first initialize our app so cost app is equal to initialize app and we have to pass this firebase configuration then we have to also initialize our auth so get r and we have to pass this app then we have to also initialize our db so get firestore and here also we have to pass app and the same thing you have to do for storage as well get storage and then export so we can export all this thing odds db and storage now we have to also do one more configuration related to uploading the image in firebase so sometime you may face issue to upload image in firebase storage so you have to come over here that is google cloud that is google cloud platform and here you have to search your project our project is created with react blogs app so first i am going to search my project here so this is our project that we have created and after that what do you have to do so you have to search cloud storage and you have to click on cloud storage and here you have to select this one and you have to add one principle here so let's click on add principle and the principle we have to add here so this one you have to select after that here you have to select the role so role will be storage admin so you have to select this cloud storage select this storage admin then click on save so we have updated our policy in order to upload image in our firebase storage so we are done with this configuration so we can close this one now let's go back to vs code so our firebase configuration got completed over here now next thing i wanted to start working with our sign in and sign up functionality in this application so i'm going to start working with the auth.js file where we are going to have both form that is login and registration okay so let's work on this auth.js file so first i will start with our sign-in form so here what we have to do so i'm going to define a initial state here and we are going to have email password and we have and we have to also bring huge state from react and here let's define our state set state and we can pass here initially state we are going to have one more state which will determine whether we are in sign in form or sign of form so sign up and set sign up and by default it will be false now we have to restructure this email and password from our state email and password after that i am going to work on our form component for our signing so here i am going to have div with the class name container fluid and mb hyphen 4 we are going to have one more day with the class name container only and we will have one more div with the class name call hyphen 12 text center and we are going to have one div with the class name text center heading p by hyphen 2 and here we have to determine if you are not in signup mode then it will be sign in okay else it will be sign of form okay after this div we are going to have 1d with the class name row hyphen 100 then it will be like content center so this is bootstrap class name i am using over here and align item center after that we are going to have one more div with the class name poll hyphen 10 call md eight call lg iphone 6 then we are going to have our form which will have class name row and here we are going to have our input field so here we can use div with the class name whole iphone 12 py iphone 3 and inside that i am going to use input and type will be email last name i'm going to use here form control and one more class name i'm going to use here like input text box and placeholder we are going to have here email let's format this one and after that i am going to have name so it will be email then value it will be email and we are going to have an onchange method so this will be handle change let's define here otherwise we will get error bounced handle change this will receive event after that i can just do copy this day one more time because we are going to have one password field as well so this will be password placeholder will be password name will be password only let's give value password so this two input field is completed now after this div we are going to have one more div with the class name poll iphone 12 by iphone 3 and text center and here i'm going to use button button will be having a class name btn and here we have to determine whether we are in sign up or sign in form so the color of button will change for sign in and sign up form so so here first we are going to have a btn which is a common class name for both button and here we have to determine like if you're in sign in page that means we have to give this class name that is btn sign in else btn sign up ok and type will be submit let's format this one and the value of button will also determine based on this sign up so if you are not in sign of form that means we are in sign in form so the value of button will be sign in else the value of button will be sign up now after this form we are going to have div and here we have to determine like if you are not in sign up that means user is on sign in form and here we can give a message like if you don't have account then you can create an account so something like that we can give message so here i'm going to have div with the class name text center again i'm going to have this justify content center and empty hyphen 2 padding top hyphen 2 okay so inside this tip i'm going to have p tag with the class name small f w hyphen bold empty hyphen 2 pt iphone 1 mb hyphen zero and here we can give a message like don't have an account so in that case user can click on sign up so i am going to have spam tag with the class name link danger and here we have to give some line styling as well so let's give text decoration none and cursor pointer and here we can give like sign up after that we have to also write the condition for else part as well so here we can have fragment and here we can just copy all this styling okay so you can just copy this one you can paste it over here so if you are in sign up form in that case i wanted to show a message like already have an account then basically you can click on sign in so in that case it will be signing and i wanted to specify color here only so color i can give here like 2 9 8 a f 2 because i'm not going to use this class name after that i'm going to have one click method here so so it will basically change the state of sign up if you click on this sign up so this will become true and for sign in we have to basically make it false so let's give false and let's also define the logic in our handle change so in handle change its receiving event so set state i am going to spread out the state and here it will be e dot target dot name e dot target dot value now we have to also add the styling in our sas file as well for some of the class name that i have used inside this file so let's go to this style dot css and here we have to add the styling for the class name that i have used in path dot js file so here all the form related styling will go here so we have to add this styling and we have to add some more styling so this is styling also we have to add for our button so let's save this one and let's go into the browser let's click on this login so we haven't registered route i guess i think some route mismatching let's go back to our vs code so first let's check our routing in our app.js file okay so for auth we haven't added the route so we can just copy this one it will be auth and we have to bring auth now let's go back to browser so now here you can see that we have got our form and let's click on sign up okay so this is working you can see that but we have to add some additional input field for our sign up okay so here we have to give some space between this message and this link okay so so we can give this space here like npsp okay let's see whether it's working or not so we got some space same thing we can add over here as well let's go back to browser let's click on sign up so we got some space okay so sign-in form is completed now so now i'm going to work on our signup form so we have to add those additional input field so first i'm going to have here like first name and last name for our sign up for last name and let's also give here confirm password as well let's restructure this additional input field that is first name last name and confirm password after that what we have to do so here we have to check like if you are in sign up then only we have to add those input field okay so here we have to check if you are in sign up then only add additional input field so here i'm going to have a fragment first and i can just copy this input field so let's copy this div entire div and here we can give type text placeholder will be like first name name will be first name only value will be first name let's copy this one and this column will be six okay now let's copy this one let's paste it over here so this will be last name this will be last name and this will be last name now we have to add one more input field for confirm password so so we can copy this div and we can just paste it here below let's keep type password only placeholder will be confirm password and name let's give confirm password value will be confirmed password so i think we are done let's verify this one in browser so we are getting confirm password and sign in as well so this will basically display only in sign of form so here again we have to use that sign up state so here we can use like if you are in sign up then only so this confirm password field so we can just copy this clip and we can just paste it over here now let's go to the browser so now we are not seeing that confirm password fill on our sign-in form just let's click on sign up so now here we got our additional input field that is first name last name and confirm password field so we have completed here our sign in and sign up form now we have to implement the sign up and sign in functionality with the help of firebase in this application so at the moment we don't have any user in our firebase so first i am going to implement the sign up feature with firebase in this application so what we have to do over here so this form will have one on submit method and we are going to have one method called handle path so let's define this one so call and a lot and this will be async okay and it will receive an event so first we have to prevent the default behavior of browser so e dot prevent default after that we have to first check like if you are not in sign up then perform the sign-in functionality so we will write the logic later let's write the logic in elsewhere or sign a functionality so here first we have to check like a password and confirm password field is not matching then in that case i'm just wanted to return it post message so return post dot error and we can give a message like password do not match okay and i also wanted to configure the position of our message so here we can give a position and it will be top center okay now let's go to this auth.js file so this is our first check okay now here we have to do one more check like if all field is provided by our user that is first name last name email and password then we are good to sign up this user in our firebase so here what we have to do so await create user with email and password and here we can pass our auth which is coming from our firebase the vs code automatically import all this thing for me you can see that auth is imported automatically this one is also imported automatically so you have to check this one if it's not imported automatically for you now we have to pass your email and password now here we will get our user okay after getting the user what we have to do so we have to also update the profile because we are storing this first name and last name so we have to update the username as well so in firebase we update the profile name like this way so await update profile and here we have to pass this user and we have to basically update our display name okay so display name and here we can combine our first name and last name so first name we can give some space and last name so after successful sign up we have to basically navigate back to our home page so here from the reactor auto dom we need to bring use navigate so from reactor auto dom we can bring use navigate and first we have to store the reference of use navigate into a navigate variable and we have to also make this header home to active so here also we have to pass set active so let's go to this app.js file and here we have to pass this set active so this one also we have to do and it's going to receive this get active and now here we can use set active and it will be home because we are navigating back to our homepage after successful sign up after this we have to navigate so we can navigate after this else because in both cases we have to navigate whether we are doing sign up or sign in because it will be common for both scenario and let's remove this extra space and let's write else condition as well for this if scenario okay so we can return here those dot error so if any input field is left empty by user so i'm just going to show a message like all fields are mandatory all fields are mandatory to chill so this message i wanted to show to user now let's save this file and verify in browser so let's go back to browser refresh this one first and let's click on this sign up now let's add one user here john doe so in last name i'm not able to write anything so let's go back to vs code so let's see what is happening so last name i think okay extra t is here let's go back to browser and let's give here though john doe at the rate gmail.com and let's first click on sign up so we are getting your message like all fields are mandatory and let's keep password one two three four five six and let's give only one two three four let's click on sign up now this time i'm getting password do not match now let's give five six and let's click on sign up so i think it is working so we can verify this one in our firebase so let's go to this authentication so you can see that we have successfully able to add our first user in firebase so sign up functionality is completed in our application and let's work on our sign-in functionality so let's go back to this login and to implement the sign-in functionality again we have to write some logic so now i am going to start working on our sign in functionality in this application so inside this if condition i am going to write that sign-in functionality because if this sign-up is false that means user is doing sign-in in our application so for signing the user first we have to check if we have the email and password value then only we are going to allow user to sign it in this application so again i'm going to use here cost and await and here we can use sign in with email and password and here you have to pass auth email and password and we are going to get our user here after this we can do like set active to home and after that we have to also write else condition so i can just copy this one let's paste it over here and let's go into the browser and verify whether we are able to login into our application or not so first i'm going to refresh this one and i'm going to log in with the email john doe and let's keep password123456 let's click on sign in so now you can see that we are successfully able to login into our application so sign in and sign up functionality is completed in our application now we have to also persist this logged in user in our application and we need some user information as well like display name so what we can do over here so let's go to this app.js file so i'm going to define one state over here that is user and set user and we are going to have use state and initially it will be null we need to bring use effect from our react so use effect we need to bring and we have to run one use effect here so in use effect what we have to do so here we have our r which is coming from our firebase and here we have to use one method on auth state changed we are going to receive our auth user and here we can check if we have the auth user then we can set this user to our auth user else we can just set user to null now this user we have to provide to our header component okay so let's go to our header component and we are receiving here user and we need user id so we have to determine whether user is logged in or not in our application so user id and here we can do like user dot u id so in firebase user id is stored with the uid so we can also check this one so you can verify this one so user id and we can also check whether our display name is showing or not so let's check here as well so we can get this one like user and dot display name let's go into the browser let's display this one so now you can see that we got our user id and name so we have to show this name in our header so let's go back to our vs board and here we have to basically determine like if we have the id that means user is logged in in our application so basically we have to adjust our header component over here so here we can check like if we have the user id and that means user is logged in in our application and here we can use one div with the class name profile logo so i'm going to add one dummy email so here i'm going to have image so so in source i'm going to put one dummy image url so this url i'm going to use over here in alternate we can give logo so in else part we can just cut this one and we can paste it over here after that what we have to do so we are going to have some inline styling for this image so width i am going to give here 30 pixel height i am going to give 30 pixel only border radius i am going to give fifty percent and margin top i'm going to give 12 pixel now after this div i'm going to have one p tag okay where i'm going to show the display name that is the name of logged in user so it will be like user dot display name and here we can give some inline styling so style margin top it will be 12 pixel and margin left i am going to give 5 pixel after that i am going to have one list item here with the class name nav item nav link and inside that i am going to have blog out so let's save this one and let's go into the browser first now you can see that we are getting our profile name over here john doe and we got logout so we have adjusted our header component now we have to work on our logout functionality in this application so that too also we are going to handle in our app.js file only so let's go to this app.js file and here i'm going to have one function called handle logout so the function will be handle logout only and here we can use sign out method from our firebase auth and here we can pass our auth and here we can use then so i'm using then because if you wanted to do some more thing after signing out from this application so i wanted to set user to null and set active will be login and navigate so i'm going to use here navigate so here we have to bring use navigate as well so once user click on logout so he will basically get logout from the application so in that case we have to also make this set user to null and we have to make our header link to active and we have to navigate to our auth page that is sign in form so that's why i'm bringing here use navigate you can see that so let first store the reference of use navigate into navigate variable and then we can navigate towards auth now we can pass this handle logout to our header component now let's go to this header component and here we can bring our handle log out and we can remove this two console log and we have to use this handle logout here inside this list so on click and we can have handle logout let's save this file and let's go into the browser first restart this one so you can see that our user is persisting in this application after refreshing this application now let's click on logout now it's become login so logout functionality is also working let's try one more time so i'm going to login with john doe at gmail.com let's click on sign in so this is all working you can see that so now we have completed the logout functionality as well in this application so next thing we are going to start working on our creating blog in this application so now we are going to start working on creating blog in our application so from react we need to bring use state first and we need to bring react tag input from this package that we have installed and we have to also bring the css file for this tag input so what you have so what we can do over here so you have to bring this css file for this react tag input component and we also need here use effect okay and let's define here initial state for our form so i'm going to have a title for our blog then tags which will be a initially empty array and we are going to have a trending so you can mark it your blog whether it is a trending or not so by default it will be no and we are going to have a category which will be empty initially and description now after that i am going to paste the category option that we are going to have in our drop down so in this application i am going to use this much category so you can modify this category as per your convenient now here i am going to define one state so form set form use state and we can pass here initial state then we are going to have a state for our file as well set file use state initially it will be null and we can destructure all this state value so from form we can restructure our title tags category okay so title tags category trending description okay now let's work on our form component file then we will work on functionality to add block in this application so let's remove this one and i'm going to have a div with the class name container fluid mb hyphen 4. then again i'm going to have div with the class name container only and inside that i'm going to have one more dip with the class name poll hyphen 12 text center and here i'm going to have heading like create blog so i'm going to have one more div with the class name text center and here we can have one more classroom that is heading p by hyphen two and here we can remove this test center it's not required and here we can give the heading like create blog so first we can check this one let's click on create so we got this create blog after this div what we have to do so i'm going to have one more dig with the class name row hyphen 100 justify content center align items center then i'm going to have a class name with the poll hyphen 10 whole md 8 and core lg 6 now we are going to have a form with the class name row blog form okay let's remove this action we don't need this one now inside this form i am going to have a div with the class name called hyphen 12 py iphone 3 so first we are going to have input field so i can just copy from our this auth.js file so let's copy this one and i'm going to paste it over here so placeholder will be titled name will be title value will be title and this handle change will stay as it is so we can copy this one and we can create one function here it's also going to receive a event so first input field is ready after this we are going to have one more div so i have just formatted this one so the second field will be our rear tag component so we can just get rid of this and we can use here react tag input and here we have to pass tag placeholder we can give here tags and we are having an unchanged method so for this i am going to write handle tags okay so let's define this one as well outside this return let's format this one after this div we are going to have a radio button so let's just copy this one and let's remove this one and here we are going to have a q tag with the class name trending and we can give like is it trending blog now after this we are going to have our radio button so we can give here div with the class name form chip inline mx hyphen 2 then we are going to have our radio button so i can just copy this input field and type will be radio class name will be like form check input placeholder is not required let's give here value yes and we can remove this value okay name we can give a radio option and on change we can have different on-chain method here so it will be handle trending after that we are going to have checked method here so we can check like if trending is yes then select this radio button so let's define this one as well outside return so i'm just going to copy this one and this will be handle trending now after this input i am going to have a label with the class name form check label and here we can give radio option and label we can give here yes and we wanted some space so i can use here nvsp so this one is done and same thing we can do for no as well so we are going to have a two radio button here yes and no so let's just copy this one and this will be no this will be no and this will be no okay and here we don't need this space okay now after this div so this div is closing here i guess yes so after this div we are going to have a drop down so we can just copy this one and we can remove this one and here we are going to use a select or drop down and we can have a class name category drop down okay and here we can remove all this thing we don't need here we need value the value we can give here category and we are going to have on change so for this also we are going to use different on change method that is on category change so let's define this one as well outside return let's copy this one so now inside this select we are going to have our default option first like option and we can have like please select category then we have defined this category option you can see that outside this functional component so we are going to use your map to show this category in drop down so category option dot map and here we can use option index and we can use your option and value so value will be option and it will be empty here okay and we have to also provide the key so let's give key here index only and inside that we can show our option so category part is also done now below this category drop down we are going to have a text area in which we are going to write a description about blog so we are going to use here text area so again we can have div with the class name call 12 py iphone 3 and here we can use text area so text area and we can have here class name form control and we can give one more styling here description box placeholder will be description value will be description only name will be description so we can copy this one and we can just use it over here and for this on change we are going to have the same handle change okay now below this text area we are going to have our input file so let's have a class name mb iphone 3 and here i'm going to use input with the class name form control so type will be file because we have to upload a image and here we can have on change so we are going to write on change logic here only so set file and you can get this file whenever you upload any image file at zeroth index so e dot target dot file so it will contain a single array of objects so you can access that object as zeroth index because it contain only one single array of object so this is also done now after this div we are going to have one more div with the class name call iphone 12 py iphone 3 then text enter and we are going to have a button with the class name btn btn add and the value of button will be the submit and here type will be also submit okay now i'm going to add the styling for this different different class name in our sas file so let's go to the sas file so inside this form only i'm going to add those styling so we have to add this styling you can see that for all this different different class name that i have used inside this file and we have to add some more tally for other class name as well so we have to also add the styling for this class name as well so let's go into the browser first and see whether it's working or not so now you can see that we got our form component over here for creating block so we have a title tags category description and this file input so our create block form is almost ready to create blog in this application so before we start creating any blog in this application we have to first work on our uploading the image file in firebase so what we have to do first so let's go back to our vs board and let's go to this file and here we have to run one use effect and this use set only run when we have the file okay and here we are going to have one function called upload file and inside that first we have to define a storage reference so storage reference and here we have to use ref which is coming from our firebase storage and we have to pass here storage which is coming from our firebase file okay so vs code automatically import all this thing for me so you can see that at top so ref is not coming so let me see why ref is not coming so now ref is coming okay you can see that so it's coming from our firebase storage and here we have to pass file dot name after that we have to define one upload task upload task equal to so here i am going to use upload bytes resumable and we can pass here storage ref and file also we have to pass after that upload task dot on here we can give state change we're gonna have snapshot and here we have to check progress so for progress we can define one state here progress set progress after this let's define progress equal to snapshot dot bytes transfer snapshot dot total bytes simply multiply into 100 so you will get a progress okay like it will start from 1 to 100 so we have to check progress over here so once progress reach towards 100 then only we can allow to upload a blog with image so that's the reason i am using here this way so here we can set the progress so once progress reach towards 100 then only we can allow to upload a blog with the image and after that we have to use your switch and snapshot dot state so we are going to receive a different different case so in case it is paused okay so we are going to receive a pause state and we can just simply give one console log like upload is paused we are going to have one more case like running so we can give your console live upload is running and we have to give you a break and we are going to have default break let's forward this one now after this we can have error okay so if we have an error and if you have an error then we can simply do like console.log and we can paste our error now after this what we have to do so we are going to have one function and inside this we can use here get download url and we can have upload task dot snapshot dot ref we can use here then now we will get here our url so download url and we can use here set form we can use your previous and we can just do a spread out and we can have here image url and we can just use here download url okay so this function will run if we have the file so we have to run this function that is upload file okay so this upload file is completed over here and we can test this one in our browser so let's go into the browser and just upload one file here only so i'm going to upload one image to test this functionality whether our uploading image in firebase is working or not so let's go to here and let's open this storage whether we have got our first image or not so we are not seeing image so we are getting this issue because we forget to update the rule in our firebase so here also we have to update rules so let's do this changes so we have to do the same thing that we have done for this firestore database so here we have to give true then only it will work so let's click on publish so now it's called publish so let's refresh this application and upload once more time so let's upload this image so now you can see that we are getting upload is running so let's go back to here files whether it's got uploaded or not so now you can see that it's got uploaded and here we are not getting the percentage so i think we have missed something so let's go back to our vs code so we can just put this console okay so we can track down like how much is got progress so let's upload the image again so i'm going to refresh this application and let's upload this image again so now you can see that we are getting upload is zero percent done now we got uploaded 100 done okay so once the upload progress is between 0 and 100 percent then we have to make this button disable so let's do that one as well before creating blog in our application here we have button and we can use your like disabled and we can check here like if progress not equal to null and progress is less than 100 then this button will be disabled okay so let's go into the browser and let's refresh this one again let's upload this image so now you can see that this button is disabled so once it's reached towards 100 percent then only it will become enable so now we are good to go to create a blog with image in this application using firestore database and storage now let's start working on creating a blog in this application along with image so before we add any blog i just wanted to do some modification so for this drop down and trendy let's use the same method that is handle change so i'm just going to use the same method for this radio button and drop down okay so here what we have to do so handle trending is not changed okay also we have to put here okay handle change so let's write the logic for this handle change first so set form let's spread out form then e dot target dot name e dot target dot value and for tags we are going to receive tags and here also we have to set the form and we have to just pass tags okay so let's save this changes and first see whether we are able to see all the value or not in our form so i'm just going to give here title something blog let's add some tag test blog let's select this one so it is not selecting okay so let me see what's going wrong okay let's use this one okay so we are going to receive event and let's set the form so i'm going to spread out the form and trending it will be e dot target dot value okay and let's use handle trending here so it will be handled trending and for drop down i think also we have to use that one so for category change we have to do that way only so so it's going to receive an event and for this also we can use this way that form let's spread out our form and category e dot target dot value let's use this on category change here and drop down let's save this file and let's go into the browser first i'm going to refresh this one let's give here title like blog only let's keep test let's select this one now it is selecting let's select any one let's give your text let's select one image now we have to verify our form state i have already put the console so here we have our form object so you can see that we got all the value in each respective field that is category description image url tags title trending so everything is working now so this data now we have to push to our firestore database so we have to write logic in our handle submit so so let's go to vs code and here we have to define on submit method first okay and let's give the method name handle submit let's define this handle bit outside this twitter so cost handle submit and this will be async and it will receive an event so again here first i am going to prevent the default behavior of browser after that first i am going to check whether each value is provided by our user or not into each respective input field if category has a value if we have value in tags so likewise i am going to do for each input field so we have title we have files as well then description we have and we have one more thing that is trending okay so if you have all the value in this different different input field then only i am allowed to create a blog so here we can use try cache and i'm going to use await and i'm going to use here add doc which is coming from our firebase firestore so vs code automatically import and we have to also bring collection and we have to pass here db which is coming from our firebase file and here we have to pass the collection name so currently at the moment if you check our database so you can see that we don't have any collection name here so you can give any collection name whatever you want so i'm going to give here blocks i'm just going to spread out form okay and i also need to add timestamp so i'm going to use here servers timestamp and we have to also need to give your author so which user is created so his name along with his id so we are not receiving here user in this component you can see that so we have to go back to our app.js file and we have to pass this user okay so this user we have to pass down to this page that is add edit block so we have to pass this user then only we will get that display name and user id so now here it's gonna receive user okay and here we can use like this way user dot display name and user id also i'm going to store so user dot uid okay and we have to also write the cache so i'm just going to put a console log so console.log error okay so let's save this one so this is completed over here now we can create a block in our browser so let's go to the browser i'm just going to refresh this one and i'm going to login with our user that is john doe so we are logged in let's click on create so i'm going to create a fashion blog over here so fashion blog let's give here style tag fashion and let's make it trending this blog and i'm going to select category fashion let's keep some long description over here so i'm going to give this description and let's select image here so this is a fashion block so i'm going to select the fashion photo and let's click on submit and we can verify this one in our firestore database so now you can see that we got one document in this block collection and you can see that we have the same detail that we have provided from this form okay so we have to tag style fashion we got image url we got timestamp title trending user id and we also got author that is john doe okay so this is working so we have successfully able to add our blog in firestore database now we have to add few more stuff in our code so after clicking on submit we should navigate towards this home page and this create page should not be accessible if user is not logged in so let's do that one so first we need to bring use navigate from react router dom let's store the reference of use navigate into a navigate variable so we can use this navigate here so let's save this file and add one more block so i'm just going to create a sport block here so let's see here sports blog okay let's give here good wall and this will be know only so let's select here sports let's add description here one long description again so i can just copy this one let's test it over here let's remove this double quotes and i'm going to select one file related to sports so let's select this one now this is disabled now we can click on submit so now we have successfully able to move to our home page after creating this blog and here also we got our blog you can see that this is a sports blog which is created by john doe now we have to also protect this one create link so suppose if i'm logout from this application so whenever user click on this create he should navigate back to home page okay so let's do that one as well so i'm just going to protect our create link here when user is not authorized in our application so we can simply do like this way so we have to bring here navigate and we can check this one if you have the user id that means user is logged in so in that case i wanted to navigate towards the create blog page and else we can just navigate towards the home page okay and same thing i wanted to do for this update scenario as well so let's copy this one and we can just paste it over here okay let's remove this extra brackets curly brackets and here we can do like this way user dot id so it will first check so this is a shortcut of doing like this way so instead of doing like this way so we can do this way okay so this is a shortcut that's why i'm using here question mark so let's save this one and let's go into the browser and if you click on create you will navigate back to the home page but this create link is still active in header so we will fix that one once we start working on our home page so creating a blog is completed with the help of firestore database in this react application now we are going to start working on our home page so you can see that in firestore we have already couple of block so we are going to display this block on our home page so guys let's start working on our home page because we have already couple of blog in our firestore database so let's start working on this page so let's go back to the vs port file so first i am going to design our home page so this div is gonna having a class name container fluid with padding bottom hyphen 4 padding tool python 4 and there will be one padding class name as well now inside this tip we are going to have one more day with the class name container and another class name that is padding now we are going to have one more div with the class name row mx iphone 0 and inside this div we are going to have our trending section so we will work on trending part later now after this we are going to have one more div with the class name cool iphone md iphone 8 whole md hyphen 8 and inside the stick we are going to have our blog section so in which we are going to show our daily blogs so we will write the component okay first let's uh design our home page now after this step we are going to have one more div with the class name for empty iphone 3 and here we are going to have our tags okay and most popular section so one by one section we are going to cover okay so first i am going to start with the block section then tags then most popular section and at last we will work on trending so let's save this one first and see how it's look like our home page so now you can see that in this part we are going to have our trending section in which we are going to use carousel to display our blocks and here we are going to have our all block in this block section and here we have a tag and most popular section so we are going to start first working with this block section component so let's work on this block section component so in the component folder we are going to have one file that is block section dot jr and i'm going to generate a snippet here so here first i'm going to bring one awesome from react front awesome and we also need link from react router daw so from react router dom we need to bring link and this blog section will receive some props from our home page that is blocks it's going to receive user okay now we are going to have one day so let's just give one day here and we are going to have one more div with the class name blog heading and then we are going to have class name text start then we are going to have py hyphen 2 mb hyphen 4 and this is heading daily blocks after this div we are just going to map our blogs okay that we are receiving from our home page okay so blog dot map and i am going to map each block item and here i am going to have one dip with the class name row pb hyphen 4 and here i'm going to use key as well otherwise we will get warning in console now inside this div we are going to have class name called hyphen md five then inside this div we are going to have a class name over blocks image okay now inside this div we are going to have one more div with the class name blocks hyphen image and inside that i am going to use image so source we can use here item dot image url okay and in alternate we can use title item dot title and inside this we are just going to have some empty div okay we are going to have one more div with the class name call md iphone 7 and inside this div we are going to have a div with the class name text start so text start is a booster class name and inside that we are going to have a six tag with the class name category and we are going to have one more class name that is category hyphen color and here i am going to use item dot category okay now after this we are going to have a span tag with the class name title so here we are going to show the block title so item dot title and here we have to add one more class name that is py hyphen 2 let's format this one first and after this span tag we are going to have some more information about the block like author and when this blog is created so we are going to have spam tag with the class name meta info and inside this spam tag we are going to have p tag with the class name author and here we can have our author like which person is created this block and here we can have our block creation date so here we can use item dot time stamp and we have to convert it to date because if you look at our firebase database so if you look at our file to database so data is something is written in this way so so we have to convert this one in proper date format so i'm just going to use here javascript method so to date and we have to use here to date string so you will get day along with date okay so after this we are going to have one more div with the class name short description okay and here we can have our description so item dot description so we can use here curly bracket now you will notice that this description is very long in our firestore database as you can see that so we have to sort this description so we are going to use excerpt so i'm just going to create one function for method here in our utility folder under index.js file so here what we have to do so we can use this excerpt method a helper method which will basically short our description on our homepage okay so we can write this logic okay to sort the description and we can use this excerpt in our component that is block section so here we can bring that texture okay so vs could automatically import this excerpt utility method for me and here this excerpt basically receive the string along with the count like up to like up to how much later you want it to display okay so i just wanted to show 120 later okay so we can pass here 120 now after this div we are going to have one button with the class name vtn btn hyphen read and here we can give the value like read more okay and after this what we have to do so after this button we are going to have our delete and edit button okay so here we can have one div so we have to just keep one in line style that is float right okay and inside this div we are going to have our font awesome so we can have name here so first it's going to be delete button so i'm just going to give trash and i'm just going to use it style so here we can have margin 15 picture let's give cursor pointer and we are going to have size i'm just going to size so i'm just going to give size here 2x okay now let's copy this one let's paste it one more time because we are going to have update icon as well so this will be edit and let's remove this one and the rest of the thing will stay as it is so this component is ready now we need this blocks and user from our home page okay so first let's get all block that we have in our file database in this home.js file so from home.js file we are going to send all this detail so here what we have to do so now we have to provide our all block to this component that is block section component so we have to bring all the block that we have in our firestore database so first let's bring that huge state and huge effect and here i'm going to define some state here that is loading set loading okay and it will be true okay after that we gonna having a state for our block so i'm going to store all the blocks in this state it will be empty error now we have to run one use effect and inside this huge effect we are going to have one method unsubscribe something like this and i'm going to use your own snapshot from firebase so firestore code automatically import all this helper method for me and inside this on snapshot we are going to have our collection and in collection i am going to pass db and collection name that is blocks okay and after this we are going to have a callback method that is snapshot and here i can have one list empty array and we can run here snapshot dot docs okay and here we have to use for each method and we are going to run for each method on each dock and we can simply do like list dot push so first we want id okay so we can get the id like this but doc dot id and then the rest of the data the doc dot data okay after this what we can do so we can just do like set blocks to list okay so this list contain all the block that we have in our firestore database and after this we can have error method as well so error if you have any kind of error so we can just do a console log and this use effect will have a empty array dependency now let's format this one first and after that we have to also write a logic to unmount so we can just do like this way return and we can just do like unsubscribe okay now we can check this one whether we have our blogs or not so we can just put here console.log one let's save this file and let's go into the browser let's refresh this application open the control so now you can see that we got to block this is the two block that we have in our file store database okay so now we can pass this blocks to our block section component so we can remove this one and we can and we can bring that blog section component and we can pass this blocks okay all the blocks now in this block section component we have used some additional class name here so we have to provide the css styling in our sas file so let's go to the sas file first and here i'm just going to put one comment so here we are going to have styling for our blog section okay so this all styling i'm going to use for our blog section so you can see that this much styling we have to use for our blog section so from here it is start and you can copy all this styling by pausing this video okay so here just i wanted to save some time by writing all this styling so you can copy all this styling by pausing this video okay so let's save this one and let's go into the browser first let's close this one so now you can see that we got our this block so we have image we have category we have block title and we have to adjust few thing again in our block section component so it should not be like this way so let's go into bs board and here so here i wanted to give a separator here kind of and it should be text start so i'm going to add this class name and let's first go into the browser and we need some space between this separator okay so what we can do here so we can give here 10 percent and bsp let's go into the browser so now we have some space okay so you can see that this timestamp is also get converted properly okay so this block section part is completed for now we will still have to do some more code adjustment in this block section component but we will do later once we implement the detail page along with update and delete functionality so we will come back later to this component and we will adjust our this block section component so after that i will start working on our detail page in this application so once user click on this read more so he will navigate towards this detail page of this particular blog so first i'm going to work on our detailed page section okay so now we are going to work on our detailed blog page in this application so let's go to this detail.js file and here we need to bring use state and use effect and we are also going to need use param from react daughter dom because we are going to show that blog detail page based on the id so let's bring this use param after that we need to grab the id with the help of this use params so let's bring this id and we have to run a use effect here this use effect run when we have the id okay and here if you have the id then i am going to run a function here that is get block detail which yet to be defined so i'm going to define below this use effect only so cost get block details and it will be async here first we need the document reference because we are targeting the single document so here we have to use doc from firebase firestore so vs could automatically import that one and then we need db and we have to target the collection which we have in our firebase and id so here we have to pass the id now we got this document reference now with the help of this document reference we will get our single block detail so here let's have a variable called block detail and here we can use a weight and we can use here get dock so it will basically give you the single document from the collection and here we can pass this document reference now we have got our single block details so we can store them in a state so let's first define your state one so cons block set block use state it will be null okay and here let's just add like set blog blog detail dot data okay and after that and after that we have to also use your setactive so let's pass here setactive method that is detail so here our detail i can just copy this one i can just paste it over here let's go to this detail page so why i am using here set active because once you on detail page so for detail page we don't have any kind of header link so we can just disable this one okay so in that case we can just do like set active and it will be just null okay now let's work on the design part so let's remove this one and here i'm going to have one div with the class name single inside this div i am going to have another div with the class name blog title box okay and inside this div i am going to have one more div with overlay okay and inside this tip lets have some inline styling so inside this inline styling i am going to have my background image okay so background image and here we have to use the url so i am going to use here url and i can just pass my that block okay so i can use your single quotes and inside that i am going to write your blog dot image url now this overlay div will be empty so after this div we are going to have one more div with the class name blog hyphen title and inside this we are going to have span tag okay and inside this fan tag first i'm going to show the time so blog dot time stamp dot to date so again we have to convert the date to date string okay now after this expand tag i am going to have one h2 tag and i can give here blog dot title okay now after this div we are going to have one more div with the class name container fluid pb hyphen 4 pt iphone 4 okay and we are going to have padding on class name padding and then block block single content now inside this div what we have to do so let's have one more div with the container only and one more class name that is padding and here i am going to have one more div with the class name bro mx hyphen zero and here i am going to have one more class name for md iphone 8 and first i am going to show our meta info like author name and date time okay so what we can do over here so we can have a span tag with the class name meta info and another class name that is text start now inside this is fan tag i'm going to have like this blog is created by author name so p author and inside that i'm going to put like blog dot author and after this again i can have one separator here and we can give you space like nbsp and below this i can copy this one okay let's format this one okay so after this span tag we are going to have a p tag with the class name text start and here we are going to have our blog description so blog dot description and after this div we are going to have one more div with the class name call md3 in which we are going to show our tag and most popular section okay so let's just give your heading okay so this one is almost ready now we have to add some styling for this class name that i have added over here so let's go to our sas file and here let's give some comment first detail okay so now i'm going to paste the styling for our detail page so i need to put this styling and we have also overlay one class name here so i'm going to add the styling for the rest of the class name that i have used in the detail page so i have just pasted the styling you can see that and you can remove this one this is not required okay so let's remove this one and and you can copy all this styling by pausing the video so you can copy all this styling and this one is got repetitive so i can remove this one so in order to verify detail page so first let's go to this component block section so we have to add the link on our read more button so this is our read more button okay so you can see that we have this read more button so i can use your link and we can wrap this button with link and we can just navigate towards our detail page so here we can give detail and we have to include the id so item dot id let's first go to our home page so we can refresh this application first and let's click on read more so now you can see that we got our image and here we got our details like this block is created by this john doe and date and and the description of this blog and we are not getting the whole image as you can see that in our home page so what we can do so we can increase the height little bit so let's increase to 700 now let's go into the browser let's click on read more again so now it's looking fine okay you can see that so detail page is completed almost so we have to work on this tags and most popular section so we will work on those section later okay but first we have to work on the functionality like delete and edit block in this application and before we perform this delete and edit operation we have to add a spinner in our application so let's add that one so guys now i'm going to start working on our spinner component first in this application so i'm going to create one file here and let's generate a react snippet and here let's have a div with the class name spinner hyphen border text primary then empty hyphen five then spinner now inside that i am going to have expand tag and let's give your class name visually hidden okay and here it will be just loading with three dot and here let's give role status okay so this is done and i'm going to add the styling for this spinner in our sas file so i'm going to put a comment here home and let's add the styling for our spinner now this component is ready and we can use this component in our home page so let's go to this home.js file and here we haven't used this set loading okay so once we get our all the block so we can set this loading to false and here also we have to check like if we have the loading then we have to show the spinner so let's bring the spinner component so vs code automatically import that one and we have to also do one more thing so this home page is also going to receive set active and user so so let's use this set active here so set active and it will be home okay and we are going to pass this user to our blog section because we are going to implement delete and edit functionality in this application so we need this user as well to our blog section component now let's go to this app.js file and in the home page we have to pass this set active okay and we have to pass the user as well let's save this one and let's go into the browser refresh this one so now you can see that we are getting spinner so this part is completed now now we will start implementing the delete and edit functionality in this application so guys now we are going to implement the delete functionality in this application so user can also delete a blog in this application so from this page we are going to handle delete so let's define one function here handle delete so first it will be async and it's gonna receive id from our blog section component and here first i'm going to give some kind of pop-up confirm message to user so window dot confirm and message you can give like a result you wanted to delete that blog okay if you click ok then he will basically come inside this if condition and here i can use here try cash so first set loading will be true and here we can use a weight delete dock so we can use this method from firebase firestore and here we have to pass this dock okay and here we have to pass the db and we have to pass the collection that is blocks and we have to pass the id now we have to also make state loading to false and let's define the cache block as well so just put here console.log let's forward this one and i'm going to pass this handle delete to our block section now let's format this one and let's go to this block section component and here i'm going to receive that handle delete okay and here we have to use that on click method and we have to pass the id so handle delete and we can pass the block id here which we wanted to delete now we can try this one so let's go into the browser refresh this one and in order to delete the blog you have to first login into this application okay so that's why i have bring this user so here if we need to check whether user is logged in or not then only he can delete the block so first we need the user id so user dot uid and we have to also match with the id which is created by this john doe user so if the id is mesh then only the delete and edit icon will display if another user logged in in our application so he cannot delete the other block which is created by different user so i'm just going to quickly create one more user in this application so i'm going to create a user here like john wick let's give week here in last name john week at the rate gmail.com let's keep password one two three four five six one two three four five six let's click on sign up so user is successful login now i'm going to create block with this john wick user i'm going to create a technology blog okay so take blog and here we can give like id or okay something like this tag i'm going to put here let's give yes let's select category technology i'm going to paste some long description let's add one image let's wait for this button to enable and let's click on submit so our blog is created you can see that with this john wick okay so what we have to do over here so i'm logging with the john wick so i cannot delete this john doe blog okay so we have to also protect this block because this blog is created by this john doe user not john wick so here we have to also match the id okay so what we can do over here so here first we can check like if we have the user that contain the id that means user is logged in our application and the second thing what we have to do so we have to check with item dot user id so you can see that in firestore database we have here user id so we are going to match with this user id with this uid okay so if it's match with this current logged in user then only we are allowing to delete or update the blog now let's put this entire div inside this okay now let's save this one and let's go back to browser and you can see that now we are seeing only this delete and edit button for this blog because this blog is created by this current logged in user that is john big okay so i'm going to log out from this application first and let's go to this home page now you won't see those two icons that is delete and edit because we are not logged into this application so i'm just going to log in with the user that is john doe let's click on sign in now you can see that we are not able to see the icon for this blog because this blog is created by john wick not john doe so let's delete the first block so let's click on this icon now let's click on okay so now you can see that delete block is working in this application so we have implemented the delete functionality as well in this application with the help of firestore in react so guys it's time to implement the update functionality in this application so in case of update we have to populate the existing value into each respective input field and we have to update the heading as well so it will become update block and the value of button will also get changed from submit to update so let's do all these changes first okay so if you go back to this home page and if you click on this edit icon so you have to navigate towards this added blog page so at the moment we haven't used link on this icon so let's first add the link on this edit icon so here i'm going to add the link to this edit icon let's cut this one and put inside this link and we have to give the path update and we have to provide the id now let's go back to browser first and if you click on this edit icon so you can see that we are navigating towards this create block page so this is working so next thing we have to populate the existing value for all this different different input field so we have to go back to this add edit block and here first we need to grab the id so you can see that we have id here in our url so we can grab this id with the help of use param so let's remove this unused import statement first and we have to bring the use para from reactor auto dom and we have to grab the id so let's grab the id use params here we got id so we have to run one more use effect so this huge effect only run once we have the id and if you have the id then i'm going to run one method here that is get block detail okay let's define this function here get block detail and it will be async only and here first we need document reference so doc db so so we have to pass db we have to pass the collection names and id now we have got our document reference so here we have to use snapshot await get dock from faster we have to use this method and we can pass here doc ref that is document reference and here we have to check if snapshot.exist that means if we have the data then we can just do like set form and here we can just do like snapshot dot data let's format this one first and here i also wanted to make the active state of header link to null okay so i think we haven't bring the set active here so let's bring the set active here as well for our added blog so let's go to this app.js file and in case of update we need okay so set active set active because we don't have any header link for update so in that case i don't want header link should be active so let's save this one first let's go to this add edit block and here we can just make it none okay and we have to also do a few more changes so we have to update this heading so if you have the id that means we are in edit mode in that case it will be update block else it will be create block same thing we have to do for our button as well so this is our button and here let's do like if you have the id then in that case the value of button will be update else it will be submit let's first save this file and verify whether we are able to populate the value into each respective input field or not so doc is not define okay so i think doc is not getting imported from this fire firestore okay so let's bring the dock let's save this one and let's go into the browser so now you can see that we are able to populate the existing value into each respective input field so for title we got this title we also got tag okay so all this working and image file you cannot populate because input file doesn't have the value okay so if you're using type as a file so value does not exist for this input okay so it won't work if you have the type file okay so we have successfully able to populate the existing value into each respective input field now we have to update this block so we have to write the logic in our handle submit so here what we can do so if you don't have the id that means user is adding a new block so we can put all this logic inside this if condition okay now if you have the id then it will go elsewhere that means user is try to update the existing block so we can just copy this one and we can just paste it over here and here we have to do some few changes so it will be update doc okay and here it will be doc not collection because we are targeting the specific document and here we have to pass that id and then the rest of the thing will stay as it is and one more thing i wanted to do over here so we have this if condition and if any field is left empty by user so i just wanted to throw an error message so we can copy this error message from our auth.js file so error message i just wanted to return this one let's just paste it over here so we have to paste inside this else part we have to bring this toast okay from react25 and i also wanted to add the notification when you create a blog or update a blog so what we can do here so here we can give like toast dot success and we can give like blog created successfully so this message i wanted to display once user create a new blog in our application and in case of update the message will get modified so here let's give like updated and i also wanted to give this store notification when we upload the image so here once you get the downloaded url so in that case i wanted to show like post dot info so we can inform the user like image is uploaded successfully to firebase so image uploaded to firebase successfully and same kind of message i also wanted to give once we delete a block from our application so let's go to this home.js file and here we are deleting the blog so we can give a message like blog deleted successfully so let's bring that react rectify as well in this home.js file now let's go into the browser and perform the update operation in this application so now let's try to update our blog and let's give a title like update let's give your test i'm going to select this radio button and let's click on update so we are getting this error message because we have used here file so once you upload the image to firebase so ultimately we are getting this image url okay so from this if check we can remove this file okay and we can try to update this record again so let's go into the browser and let's give here update let's give here test only let's select this radio button and let's click on update let's close this one we got the message like blog updated successfully and here also our blog getting updated you can see that title got updated and we can also verify rest of the field by clicking on this icon so you can see that we have successfully able to update our existing block in this application so guys we have successfully able to implement the update functionality in this application with the help of firestore in react so now it's time to work on our other section as well that is tag and most popular section so let's work on this section so now i'm going to start working on our tag section so i'm going to create one file here that is tags dot js okay and i'm going to generate a snippet over here so this tag component is going to receive a tags from our parent that is home.js file and here and here we can remove this one first and inside this diff we are going to have one more tip and one more dip with the class name block heading then text hyphen start then p by hyphen two then mb hyphen four and let's give your tags only now after this div we are going to have a div with the class name tags only and i'm going to my powerall tags okay now here i'm going to have a p type with the class name tag let's give key here so i'm just going to use your index so let's give your index as well inside this p tag i can just have our tag okay so this stack component is ready now we have to pass this tags from our home.js file because here we have our tag okay so instead of using this heading we can just bring our tag components so tags and here we have to pass our tags okay so we haven't tried the logic to get the tags from our file store so first i'm going to define a state so it will be tags set tags it will be empty array only and here let's define let tags equal to empty array and here what we can do so tags dot push and here we can get the tag by this way doc dot get and here we have to pass the property name so property name is tag only so by this way we will get our tags from our file store after this what we have to do so tags maybe duplicate whenever user create a blog in our application so we need unique tag so i'm just going to have one variable here unique tags okay and here we can just spread out new and we can use your set for uniqueness and we can pass here tax okay now we can set the tags okay and we can pass here unique tags okay so we have completed this one now let's pass this tags to our tag component and we have passed this tags okay to our tag component now we have to add some installing for all this class name in our sas file so let's go to the sas file and here i'm going to have our tags okay so inside that i'm going to add the styling related to tags so this much styling i'm going to use for our tag component so you can copy this all styling now let's save this file and let's go into the browser first so now you can see that we got our tag section here okay at the moment we have unique tags so i'm just going to create one more blog and i'm going to add duplicate tags okay some so i'm going to add this take and test okay so let's create one more blog so i'm going to create a blog related to technology only so new laptop dot launch okay something like this i'm going to give heading and let's give a tag like laptop and and the duplicate tag we have like test we have it as well i guess and take also we have and let's select yes let's select this technology and i'm going to put a long description so i'm going to paste the long description over here let's select image so i'm going to select this image and we got the message like image uploaded to firebase successfully you can see that and let's click on submit we got the message like block created successfully and we got our blog you can see that and you can see that here we haven't got our duplicate tags okay so this logic is working that i have used here in home dot js file so we have used some repetitive tags while creating this newly block okay so we have completed this tag section now we have to work on this most popular section as well in this application so now i'm going to start working on our most popular section in this application so let's create a file here most popular dot js and let's generate a snippet react snippet so here we need to bring first use navigate from react router dom so let's bring use navigate from our react router dom and after that first let's store the reference of use navigate into a navigate variable and first store the reference of use navigate into a navigate variable and we need to store the distance of use navigate into a navigate variable so let's do that one and this most popular component will receive all blocks from our home.js file and after this let's remove this one we are going to have one div inside this tip we are going to have a div with the class name blog heading and text hyphen start pt iphone 3 then py hyphen 2 then mb hyphen 4 so the heading will be like most popular now after this div we are going to have our all the block so i'm just going to map each block item and here first i am going to have a div with the class name row tv hyphen 3 and i have to also provide the key so item dot id and here first i am going to have a div with the class name called hyphen five align cell center inside this div i am going to have my image okay so image with the class name most popular image okay so this class name i'm going to give over here and here you can simply use item dot title and in the source we can use item dot image url okay now let's format this one first so after this div we are going to have one more div with the class name call hyphen 7 and padding okay now inside this we are going to have one more div with the class name text hyphen start and let's keep the another class name that is most popular font okay and here i am going to have item dot title and we are going to have one more div with the similar class name only here we just have to give font meta so here we are going to have our date okay so we can just copy this one so let's go to this blog section so we can copy this date stuff okay where we are converting and we can remove this one okay now let's use this navigate so here we are going to have first line styling basic inline styling so let's put cursor here pointer and we are going to have one click method so whenever you click any more popular blog so you will basically navigate towards the detail page so navigate and we can give the path so blog and it will be item dot id so let's format this one so let's first format this one and i'm going to add the styling for all this class name in my sas file so let's put this sash file and here let's put one comment so we are going to add the styling for this most popular section so i'm going to use this styling for this most popular section okay now let's go to our home.js file and here we have to bring our newly created most popular component so most popular component we have to bring and here we can pass the same blocks okay because in most popular section we are showing the same block okay nothing different so let's save this file and let's go into the browser so now you can see that we got our most popular section as well in this home page and if you click on any blog you will navigate towards the so we are getting no route found okay i think the path is different in our app.js file so this is detail okay so let's update the path let's save this one and let's go into the browser now let's click again on this blog so now you can see that we are successfully able to navigate towards the detail page of this blog okay now next thing i wanted to implement the same thing for our tags and most popular section on this detail page okay so i'm going to start working on this part as well so let's start working on our tag and most popular section on our detail page so let's go to this detail.js file so here again we need this tags and blocks in our detail page as well in order to show the tags and most popular section so i'm not going to use this approach to get our tags and blog in our detail.js file i will use different approach to get all this tags and blog okay so i don't want to repeat all this thing in this detail.js file in order to get tags and block so i will go with different approach in this detail.js file to get our tags and block so here first i'm going to write one use effect and this huge effect will have empty dependency and i'm going to define some state so here again we need all the blocks it will be empty array and we need tags as well so tags and it will be set tags now inside this use effect i'm going to have one function that is get blocks data and this will be async now inside that first we need blog reference so we can use here collection from firestore we can pass the db and the collection name now here we need all the blocks with the help of this blog reference so await get docs blog okay now we can set the block here so set blocks and we can use here blog dot dot and we can map here each document so we can give your id first doc dot id and then we are going to spread out rest of the data so this is another approach to get all the block from our collection and you might be wondering why i haven't used this approach in home.js file so i wanted to show you the different different approach to get all the data from our firestore database so you can get all the blog with this approach and you can get all the blog with this approach as well okay so it's up to you which approach you follow so now we got our all blocks now we need tags as well so for this one what we can do so we can define one variable here let that equal to empty area and again we can use here like blocks dot dot okay and again we can do like map and we can map each dog and we can just do like tags dot push and we can just spread out dog dot get and here we can pass the property name that is tags now we also need here unique tags again you can do like let unique tags is equal to spread out new and i'm going to use your set after that we can set the tag here and we can give here unique tags now after this we can run this method so get blocks data let's save this one and here let's bring those two component so i'm just going to bring the tags component and here i can pass the tag same thing i am going to do for most popular section as well i am going to bring this most popular component and i can pass the blocks so let's save this file and let's go into the browser so now you can see that here also we got our tags and most popular section so we have implemented this tags and most popular section as well on this detail page so this is completed as well in our application now next thing we are going to work on this trending section in this application so guys now i am going to start working on our trending section in this application so first i am going to create a component here that is trending dot ds and let's generate a react snippet and after this we need to bring all from our react old carousel so we need to bring this whole carousel from react all carousel okay after this we also need to bring link from our react router dom and we have to also bring the css file for this old carousel so i'm just going to paste the two import statement for this old carousel so i'm just going to paste the import statement in order to bring the css file for our old carousel now this old carousel is going to receive a blocks okay and here after this we have to work on our design part so i'm going to use your fragment and i'm going to have div here inside this div i'm just going to copy this one so this is common for heading part okay and let's just paste it over here so it will be trending so heading will be trending after this what i'm going to do so i'm going to use here all parallel and i'm going to give your class name all theme and inside this old parasol i am going to map blocks which i am getting from our home.js file so blocks dot map and i am going to map each blob here after this i am going to have a div with the class name item dot px hyphen 2 and here we have to use id here i'm going to use key first so i'm just going to provide the id inside this div i am going to use a link okay which will again navigate towards the detail page so let's specify the path so detail and it will be item dot id and inside this link i am going to have a div with the class name trending image position now we are going to have one more div with the class name trending hyphen image size okay inside this i'm going to use image tag with the class name trending image relative and in the source i am going to use item dot image url and in alternate i am going to use title item dot title let's format this one first after this this we are going to have one more div with the class name trending image absolute okay and this will be the empty div only and after this div we are going to have same div so here just i am going to modify class name so it will be one and inside this div we are going to have span tag with the class name text white and here i am going to put title so item dot title and after this expand tag we are going to have a dip after this span tag we are going to have a div with the class name trending meta info okay now inside this div i'm going to have my author like item dot author and i'm just going to put here separator and inside that i'm just going to put the date so we have to format the date which we are receiving from our firebase so i can just copy this one and i can just paste it over here okay so we are almost done with this component after that we have to also make responsive this carousel component so for that what we can do so here we can have one object here for options inside that i can have loop which will be true margin i can give here 10 new i can give here true and responsive we have to give here so zero and it will be like item one okay after that it will be 400 items 2 then i can give here 600 items 3 and then 1000 items for i can pass this option here in this old carousel component so we can just pass like this way okay now we are done with this trending section component now we need to get this all blocks from our home.js file and this should contain only those blog whose trending is yes okay so who's trending mark as yes we are going to show only those blog so at the moment we have this blog is yes so trending set to yes and this is also trending set to yes and this is also trending set to yes okay so we will create one more block with trending no okay so first let's work on our home.js file so first let's work on our home.js file so we need to get all those blog whose trending is yes so here what we can do so here first i'm going to define one state so let's give here trend blocks okay set trend blocks use state i'm going to use over here and it will be empty array now i am going to define one function here method to get trending block and it will be using inside this first i need the blog reference and i'm going to use your collection db blocks and i'm going to use your query so let's use your electron query so we need to query our file store database so i can bring the query from firestore and here we have to pass the block reference and here we can use where from our firestore so make sure this all thing is imported successfully from our firestore so it's imported now we have to pass the property name so we are targeting trending field okay so we are targeting the trending field in our fire store database after that we have to use this equal sign so we have to match like if it's contained here then only bring those block okay after this we have to do like const query snapshot equal to await get docs and here we have to pass that print query now let's define here a trend blocks empty error and we are going to use here query snapshot dot forage and here we are going to have our document each document we are going to push inside this empty array so trend blocks dot push and first we have to put the id for each block and then we can spread out data like this way now we can set this trend blocks to trend block okay now let's format this one and i can use here get trending blocks here get trending blocks and you can use the same thing here under this unmount phase so get trending blocks now what we have to do next thing so we have to bring our trending component so let's bring this trending component now here we have to pass our all blocks okay so we can pass this trend blocks let's save this file and verify in our browser so let's go into the browser and refresh this one so we are getting some problem cannot read property of undefined so guys we are getting this issue because we have to bring jquery as well in our react application so what we can do so we need to bring jquery as well in this react application so let's go to this index.html file and here i'm just going to paste a script related to jquery so this script we need to add then only our old cursor component will work so let's go into the browser now you can see that this is working so we have to add the styling that we have used inside this trending component so we have to add some styling so let's go to our sas file then only it will look much better so i'm just going to give here comment here trending and i'm going to paste the styling for those class name that i have used inside our trending component so this much styling we have to use for our trending component so it start from here okay so you can copy all this styling so this much styling we have to use for our trending component i hope you copy all the styling now let's go into the browser and refresh this one so now you can see that we got our this trending section a nice trending section with image along with title and date and author and we also need your navigation as well so what we can do for that let's go to our trending and here it will be nav not new okay so let's save this one and let's go into the browser refresh this one so we are still not able to see the navigation because we have to add one more blog so we have to show the navigation so i'm just going to add one food blog for blog let's give here tasty food okay let's give here food okay let's give here one more tag that is mail i'm going to mark it yes let's select four i'm going to paste long description and i'm going to add one image let's click on submit so now our blog is created successfully and here we got our food blog you can see that but still we don't have navigation so i am going to add one more blog here and this will be business blog let's give here meeting something like this people let's click on let's mark it yes let's select business i'm going to paste long description let's add one image file so i'm going to add one this file okay for now let's add this file and let's click on submit so now our blog is created and now you can see that we got navigation here that means we have more than four block so in that case we got our navigation so you can do like this way or you can move forward like this way okay so now i'm going to add one more block and i'm going to mark that trending to know okay so i'm going to create one blog related to politics okay so let's give here like politics in india okay something like this i can give here let's give here tax like election india okay something like this i can give tag let's paste long description and i'm going to select one image so let's select this image and the spelling is wrong here so it will be politics okay now let's click on submit so our blog is created successfully so you can see that here we got our blog but if you look at our carousel component so we don't have that blog because we have select trending no for that blog okay so you won't see politics blog here in our old carousel component so this is working you can see that and if you click on any card okay so let's click on this one so you will navigate towards the detail page so this is all working you can see that so we have implemented this trending section as well in this application now i am going to work on our not found page okay so for this i'm just going to add one image folder here so i'm just going to paste the image inside this public folder so i have just dragged the image folder and i'm going to put inside this public okay so in inside this image folder i have all the images that i have used so far in this application okay so here we have one more image like four not four so if url is not mesh then we are going to show not found page okay so inside this not found what we have to do so we are going to have div and i'm going to use your image let's give source here like so this will be our source okay so we have our 404 image inside this image folder okay and in alternate we can just give like page not found okay now let's save this file and verify this one as well in our browser so i'm going to just put here some random url so now you can see that this is also working okay so we have also implemented the not found page in this application as well now let's work on this about page as well in this application so i'm just going to put a dummy content for this about page okay so in about.js file i'm just going to have a class name here with the container and one more class name padding and one more div with the class name call md hyphen 12 and i'm going to have one more class name with the row mx hyphen zero and inside that i'm going to have a p tag and inside this div i'm just going to put a dummy content so let's close this p tag as well let's save this file and let's go into the browser so now you can see that we got some dummy content for this about page as well so this part is also done in our application so next thing i wanted to see the responsiveness of this application so i'm just going to decrease the screen size so one by one i'm going to check the responsiveness of this application so let's see this one whether it's collapsing or not and it seems like collapsing is not working when we reduce the screen size so first what we have to do so let's go to the header.js file and in the beginning we have installed one package called bootstrap okay so you can see that we have installed the bootstrap so i have installed this booster because this transition don't work okay so we have to just import the transition from this boot trap and we don't have to use this transition in this header component we have to just import this one okay now let's go into the browser just refresh this application and let's click on this bar so it is still not working so i think i have made some small mistake while importing the transition in our header component so it will be transitions okay now let's save this file and let's go to the browser now let's refresh this application first and let's click on this one so it is still not collapsing so let me see what is the issue so in header component this id should be here okay in this div now let's save this file and let's go into the browser now let's click on this bar so now you can see that this time it's collapsing but we have to change the styling for all this header link so it's not looking good when we reduce the screen size okay so it should be in order one by one okay so what we have to do over here and we have to go to this media query dot css file and here we have to add the styling related to media query so i'm just going to paste the styling okay and you can see that we have a different styling for all this class name that i have used in the header component and we have also put some styling for other class name as well you can see that so for trending also we have to adjust the styling based on the screen size okay so this was styling we have to add for different different screen width now let's go into the browser and verify this one now you can see that it's looking good when we decrease the screen size and this trending section should also be responsiveness okay so i'm just going to this mobile mode okay so now you can see that it's looking good let's click on this one so it will get close now you can see that our blog is fully responsive okay let's click on this read more as well so this is looking nice in the small screen okay so we have also achieved the responsiveness in this application as well now let's see some of the issue and warning that we have in our terminal so you can see that we are getting one warning here so we will fix this one later first we have warning here like user id is assigned but it never use so let's go to this component so let's go to this block section so we haven't used this user id you can see that so so instead of using this way user dot uid so here we can use like user id only okay and here let's replace with user id let's save this file and let's go into the browser and let's open the terminal first so now we don't have the warning and this one we can ignore because only this way our transition is working in this application so we can ignore this one and for this warning what we can do so let's go to this added block.js file and here we have write one use effect so let's check on which line is coming so it's coming at t4 okay so here we can just put like this comment okay so now let's save this file and let's see our terminal so now you can see that we are not getting that warning and let's do the same thing in this file as well that is detail.js so in detail.js we have this use effect so we can just put that command now let's open terminal now we are getting this one so set active okay so what we can do so we have to include this one in our home.js file let's go to this home.js file and here we can include this set active that we are receiving from our app.js file so you can basically use this one here now let's save this one and open terminal now we have this warning like user is assigned but value never use so let's go to this auth dot js file so in auth.js file you can see that we are getting this user when we sign in with email and password but we haven't used this one so what we can do over here so let's go to this app.js file and we can pass this set user to our auth.js file so this is our auth page so here we can also pass set user okay let's go to this auth.js file and let's bring that set user as well and here we can use that one set user let's save this file and see our terminal so now we are not getting that issue anymore so let's try to log out first from this application because we did some changes in our auth.js file so i'm just going to login again with john doe user let's click on sign in so this is working we don't have any issue after adding that piece of code now let's open our command prompt again and here we got this warning okay so you can see that we got like failed two-part source map so we cannot fix this issue for this component but we have a workaround for this warning so what we can do so let's go back to our vs code and in the root we have to create one environment file okay so dot dnv so we have to add this one in our environment file in order to remove that warning from our terminal so now let's see our terminal again so this warning is still there so you have to kill the server and you have to do npm start again so now you can see that we are not seeing that warning anymore in our command prompt so we are almost good to go to deploy this application on firebase so let's open the console first here so you can see that in the console we are getting this warning like using unsafe component will receive props so this warning basically coming from this react old carousel component that we have used in this application so that component is still used the old react life cycle that's why we are getting this warning so they have used this old react life cycle in some of their file so that's the reason we are getting this warning and we cannot do anything as of now to avoid this warning so we can ignore this warning for now okay so in console you can see that we have some console log as well so i'm just going to remove all this console log before we deploy this application on firebase so i'm just going to search the console where we have used this console so we have used here in header so i'm just going to remove from header and we have a lot of console here so this console we can ignore because here we are checking the progress of image upload on firebase so this console we can ignore this console we can ignore and we can remove this console so we can ignore this one as well and we can remove this one okay now let's save this one and let's go into the browser refresh this one so now we are not seeing any console log over here so we can close this one so guys it's time to deploy our app on firebase so before we do deployment i wanted to push our code to github repository okay so let's open this terminal and first i wanted to generate a build folder for this project i'm just going to run here npm run build and it will take one to two minutes to generate a build folder so as you can see that our build folder got generated over here so let's verify in vs code as well so you can see that here we got our build folder now next thing what i have to do so i'm just going to create a repository here so i'm just going to give a repository name like firebase blog okay and i'm just going to create repository now next thing what we have to do so we have to do git init now i'm just going to add all the file and then i'm just going to commit so let's give a message like build firebase blog using react okay let's hit enter now let's copy this one now i'm going to push my code so let's give this command so now we have successfully able to push our code to this github repo so you can refresh this one so now you can see that we have successfully able to so now you can see that we have successfully able to push our code to this github repo now in order to deploy our app on firebase so let's go to this console firebase and let's go to this hosting and let's click on get started so you need to follow this step okay so i have already installed firebase tool globally so you have to install this firebase tool globally then next step you have to do like firebase login okay so let's open this command prompt and i'm just going to do a clear first so first i am going to log out from firebase because i am already logged in so i got logout from the firebase now i'm just going to do firebase login let's give y so it will open new window i am going to select this account let's allow ok so now we have successfully able to login let's open the terminal and now let's do firebase init let's give yes okay and here we have to select this one this hosting configure file for firebase hosting okay so this option we have to select by pressing arrow down key and in order to select you have to press space okay then you have to hit enter then i am going to use your existing project so this project i am going to use so this react blocks app okay so this project i'm going to use let's hit enter and here we have to give the directory so here i wanted to give the directory build okay not public so let's give here build and here i have to give here y because we are creating single page application and this will be also y and this will be no okay so now you can see that firebase cli github login successful and if you are doing for first time so you might see different screen so you have to just click on authorize button so here you will get authorized button so i have already done before so i am getting this screen but if you are doing for first time so you will have to authorize first then you will see this screen okay now after that we have to give the repository name so we have to give in this format user and repository so we can copy this one up to this okay and we can just paste it over here let's wait for retrieving a service account yes okay and just hit enter and here we have to give yes okay and here let's give y so here it will be master only so basic configuration is completed over here now we have to write a command here like firebase deploy and it will take hardly one minute to deploy our app so now you can see that we got this url so let's copy this url and i'm going to paste it over here so now you can see that we have successfully able to deploy our react application on firebase and we got this url you can see that over here and guys let's try to check the feature after deployment so i'm just going to login in this application john.gmail.com let's click on sign in so this is working and let's click on this read more so this is also working let's go to home page let's update this one let's click on update so this is also working let's delete this one so this is also working you can see that we have successfully able to delete the blog as well let's try to add new blog so let's give you like testing blog after deployment something like this you can give any block title name let's select deploy testing okay let's select here yes and let's select category here technology i'm just going to give here this only this title only in description for now let's select one image so i'm going to select this one now let's click on submit so we have successfully able to create blog as well in this application after deployment so you can see that we got our blog okay testing blog after deployment so all functionality is working in this application after deploying our react application on firebase okay so we have tested all the functionality in this application after deploying our react application on firebase

Channel: CodeWithVishal

Views: 29,217

Keywords: Build and Deploy Responsive Blog in React using Firestore, React firebase CRUD, sass in react js, Responsive Blog in React, Firebase V9, firestore crud react, firebase authentication v9 in react js, responsive react website, responsive in react js, blog app react js, blog app using react and firebase, react sass, react firestore v9, react blog with firebase, react blog project, deploy react app to firebase, deploy react app

Id: nSR65UfluOk

Length: 227min 13sec (13633 seconds)

Published: Sat May 28 2022