Learn to Implement Image Upload and CRUD feature with Firestore and React JS | Vinay Kumar Prajapati | Skillshare
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn to Implement Image Upload and CRUD feature with Firestore and React JS

teacher avatar Vinay Kumar Prajapati

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:00

    • 2.

      Project Set-up

      3:24

    • 3.

      Configure Firebase/Firestore

      2:19

    • 4.

      Enable Routing in App

      3:13

    • 5.

      Working on NavBar

      5:07

    • 6.

      Working on Form

      12:35

    • 7.

      Form Validation

      5:54

    • 8.

      Image Upload

      9:35

    • 9.

      Add User Data in Firestore with Image

      4:23

    • 10.

      Show User Data on Homepage

      12:01

    • 11.

      Update User Data

      7:36

    • 12.

      Working on Modal

      10:29

    • 13.

      Deleting User Data

      6:36

    • 14.

      Adding Spinner

      2:08

    • 15.

      Wrap Up

      0:23

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

130

Students

--

Project

About This Class

Hello, Welcome to this Skillshare course. In this course, I will teach you how you can implement Image Upload feature along with CRUD functionality with the help of Firebase/Firestore and React JS. This course is designed in such way that anybody can get enroll into this course who wanted to learn CRUD and Image Upload feature with Firestore and React JS.

This project-based course will have you coding right away. Building application with the help of React in this course will sharpen your skills in modern web development.

In this course, you will learn below key concept:-

  • Building a React App from scratch

  • You will learn to integrate Firebase/Firestore in React App
  • You will learn to Upload Image using Firebase Storage
  • You will learn to perform operation such as create, read, update & delete with the help of Firestore

  • You will learn to use Semantic UI in React project.

Basic Requirement

  • Some sort of HTML, CSS and JavaScript knowledge required.
  • Basic understand of ES6 module
  • Basic React concept
  • No prior working experience required with Firebase or Firestore

Software Requirement

Meet Your Teacher

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello everyone. Welcome to this course in which I'm going to teach you how you can build thread application along with image upload using Firestore database cleaner React application. So let's say first what we're going to learn in this course. So we will build the React application. Absolutely. From scratch. You will learn some basic three-act concept. You are going to learn some React hook like Utah State and use effect. You will also be able to learn how to set up a firewall in your React application. In this project, we are going to use a particular database. We've got our data. We will also going to write different, different Firebase query. To perform crud operation. You will learn how to upload e-mail using Firebase historic. So this must thing you are going to learn in this course. Now, let's have a quick demo of this application that we will building throughout this course. In this course, we will be learning to upload image on Firebase using a storage. Along with, we're also going to implement full feature in our React application. Using a database. We will able to perform create, read, update, and delete using factor in this current React applications. So I hope you are very excited about this course. So now let's talk about the skills required before you take this course. So basic HTML, CSS, JavaScript required good to have some basic concept about react like how a state and props were. So this is all basic requirement you might have before you take this course. I hope you are very excited about this course. And if you find out that this posted in predicting, then please enroll into this birth in order to learn all these concepts. Now, I will see you in code section. 2. Project Set-up: So guys, as you can see that I have already created a React project with the command and press Create React app and the app name. So you can create this project. And I have already opened this project in my Visual Studio Code. You can see that in this project we will be using 70 Dui. Let's install the package related to Semantic UI. So I'm just going to copy this one. So let's copy this one. And I'm going to paste it over yet. And we're also going to install Firebase and React router. Okay, so let's talk all these packages first and wait for the package installation. So guys are all packaged water. You can see that. So first let's go to the browser. And let's say use this one. Okay, this important statement. So we need to bring the CSS file for the 70 QA. So let's go to the VS Code. And in index.js file, we have to paste here. Okay? Now let's do npm start. Let's wait for the application load into the browser. So guys, we have some issue. Here. You can see that in our terminal after doing and Timmy, and it's mostly happened due to this import statement, okay, related to the semantic UI. So the alternate way, what we can do here. So our alternate approach will be like, We can use this fish tiles set. Okay? So let's copy this one. So either you can comment this important statement or you can remove this one. I'm just going to comment this one. And we have already copied this one. So let's paste here inside this index.html file. Let's save this file. And guys left set terminal. So we are not facing any issue. Let's go to the browser. The fled, this one. So we don't have any issue now in our application. And let's verify that that's cemented is working or not in our React application. So I'm just going to palpate this one, this piece of code. Okay? I'm just going to copy this one. Let's go to the VS Code. Let's go to the app.js file. Spring here, that button component. And we can just copy this one for now. And let's remove all this content area. Now, let's go to the browser. So guys, you can see that our button component is display. So that once we have successfully configured Semantic UI in our React application. 3. Configure Firebase/Firestore: So now it's time to configure our Firebase. So I'm going to Firebase console and I'm going to add a project yet. So let's give it a project name yet. So correct. Image. Let's click on Continue. Let's disable this one. We don't need Google Analytics for our project. Let's create the project. It will take one minute to finish our project creation. So our project is created. Let's click on Continue. And here we have to select this one. And again, we can give the web application our ready-made already. Let's register this obligation. So we've got our Firebase configuration. So let's copy this one entire thing. Let's create one file under source, firebase dot js. Okay, let's paste it over here. Let's move this one. After that, what we have to do. So let's click on Continue to console. And we're going to use five TO database. So let's click on that one. And here we have to create database. We can use your production mode, no issue. Let's click on Next. Let's enable. Our database is created. You can see that here. So now we have to reject the Juliet so that we can read and write on this photo database. So here we can do like true. Okay, so Let's set to true. Then we will ever do, but you didn't write on this factor database. So now I'm going to publish this one. Now, let's go to this Torres. So we're also going to upload the image. So here we have to also change the rule. So again, we have to set this false to true. So let's say remove this one. And let's click on Publish. So guys, we are done with the factors setup. 4. Enable Routing in App: Now let's go to the VS Code. And first I'm going to create some folder here. So I'm going to have one components folder. One folder, I'm going to have pages. One folder I'm going to have effect, okay? Inside this hazard, I'm going to put one SVG file. So this SVG file, I'm going to put inside this assets folder nine components. We are going to create some file like to have one modal component. And then we're going to have an AB bar, okay? And then we're going to have a screen at, okay. Now integers, we're going to have one home dot js file. And we're going to have added it. Use that ok, dot ds. So we will be using the same page for adding a new user, our object in the adjective user. So less than gender taste snippet on both file. So I'm just going to generate its snippet here. And let's generate a snippet over yet again. Now, let's go to the app.js file. And let's remove this one. And let's remove this one. And let's configure our reactor Rotterdam in this application. So let's bring your browser router. Routes. Okay. Now let's have browser router. Let's start this one and insert this. I'm going to have routes. Then I'm going to have my individual route yet, but it will be homepage. So I'm just going to render your homepage and let's copy this one. So this will be the add. And we're going to render page here. I added it, use it. And you're going to have one more route or updating the existing user. And we will going to update based on the idea, that case also, we are going to render the same page that is added it to user. Because we are using the same page for adding the new user or abducting the adjective user. So let's save this file and verify this 1 first in our browser. So home is already rendering. You can see that Let's verify add surrendering. And we can also verify this update one with some random ID. So this is also render. So we have successfully configured React router down. This application. 5. Working on NavBar: Now I'm going to start working on our navbar component. So I'm just going to generate a snippet over here. And from Symantec, we have to bring some component. So Symantec you ready yet? We need to bring light component. May know container, button and image. Okay? We also need to bring youth navigate from the react router dog. So let's bring that on as well. Use and navigate. And link also the card. And we have one logo here. You can see that in our assets folder. Let's bring that one as well. I'm just going to bring lake logo. And let's go to this directory. And we have Yacc, not SVG. I'm going to store that offends off. He used navigating to navigate very well. And let's remove this one. I'm going to use here amino, intense menu. I'm going to pass down props, borderless, inverted, and some inline styling, like padding. I can give you three. Margin, bottom, I can give you a pixel. And one more. We have to pass a task that is menu. I'm going to have container. Then we're going to have menu item. Let's give it a name. Like Paul. I'm going to use your link. Inside this. I'm going to have image. So let's use the image compression from Semantic UI. Size will be Mini. And in third source, we are going to pass global Internet. We can pass test logo, Okay? Once you click on this logo. So you will basically navigate to the homepage only. We can escape route or we can specify our home route here. After that, we're going to have one more menu item. Inside that. I'm just going to have herding life. React Firebase with Upload, okay, with Upload Image. Now, we're going to have one more menu item. So this will be basically having one button to add a new user. Okay? Let's say remove extra Meno. And we're excited for this here. So the position will be the right. And instead this, I'm going to have button Add. User size is gonna be mini only. The button will be the primary. We are going to have an onclick method. Then once you click on that ad user, you will basically navigate towards the ad page. Okay, so we have completed this never competent. So let's bring this Navbar component to our app.js file. You can bring it over here. Now, let's go to the browser. We have got our nice number here with seven UI. And if you click on this logo, you will basically navigate towards the homepage. And if we click on Add here, you will never get to the Reddit user phase. So we have completed our Navbar component in this React application. 6. Working on Form: Now the next thing we're going to work on adding the new user along with the image. So first let's configure out Firebase here inside this Firebase dot js file. So here first we have the brain. Get faster. From Firebase. We have to go to five. And we have to bring that. After that. We also need a storage here. Let something that one for me, storage. So we need get storage. Okay? Now we're playing with light our five dB. So for bonds BB, or to get faster at and sales, we're also going to upload the image. So we have to also initialized our storage. So storage, storage app. So this basic configuration is done in our Firebase dot js file. Now let us start working on this edit User dot js file. So first, we need to bring some component from our semantic UI. So we need component here like beta1, grid and loader. After that. We also went to need storage and DD from art firebase file. So let's say I'll bring that one as well. From react, we need click. You just take it and use it. And from React router down, we need couple of things like, you wish better. And youth navigate. So let's bring those folks. Okay. Now, first let's define the initial state. So I'm just going to define outside our functional component. We're going to have name, e-mail, info, and contact. Let's define one state, cost data, set data. And here we can use and we can pass here. Then you see listed. Now we have predefined some modest kid. So first we're going to have a state for phi that you're going to upload that image file and initially treated with a null. Then we're going to have one progress. So we have to check whether our image is uploaded or not. On our Firebase. We have to also check the progress of our image upload. And this value also a null. Then we have to also check if we have any kind of error or not in our farm. So we are also doing form validation over here. And this will be also, this will be the input D object. We're going to have one more state. And here we are taking light if all mixed and mutate or not. So we have to also check this one. It will be initially false. Now, after that, what do we have CO2. So first I'm going to work on our form component. So let us remove this one. In fact, this tape, I'm going to have grid and this will be centered. So we're parsing this prompts and we have to pass some more prompts. That will be a vertical line that will be in Moodle. Then we can have your columns. And then we can have some Atlantic tile height. We can give a T VH. Then we are going to have grid row. Then grid dark color. Let's give here dashed line, center. And let's have here div. And we can check here like it is submitted true. Then vertically we have to, so a spinner here. So we can use yet loader, okay? That will be active. And in line we have to pass this props. We have to pass in our episode the loader. And it will be centered. You can give here huge and in else part and we are going to have our entire form section. So first I'm going to give here heading like add user. And we have to use your fragments. So let's see, use that one. Otherwise, we are going to see it or if you don't use this fragment. Because below this heading, we are going to have our form component. Form. Then we're going to have form not input. And we're going to have level. Level is there to name this level inside this input. Okay? So I have judged for this one. And we can give you a place holder. So we can give light to enter name. We have to give name property as well. We're going to have on Janie method. So let's define this handle change outside the return. So we can define here and does change. We will add the logic later. After that, we can have value. So with a name. So here we have to structure our name, email and contact from data. From data, we can do that name, e-mail, info, and contact. This form input will be the self protein. We can remove this one and it will be autofocus. So the first input field will be the autofocus. Whenever we load this added it to user pH. So let's save this file and see whether we are able to see any input field or not. You can see that we've got one in portfolio. Okay? After that what we have Godot, and we can just copy this one. And we can put it over here. So we have to just change here level. This time it will be emailed. This will be male. Name will become email. And this email. And we have to remove the autofocus. Let's copy this one page to time. Because we are going to have some more details like info. And we're going to be using a text area. Okay? We can give you an intern for after that, we're going to have Info. And this will be done in four. And this will be the contact, okay? So contact level a little bit, the contact. And contact. This will be the contact. And they celebrate the contact. Then we are going to have one more input. File upload, a file input. And here we can give the level upload and type. We can give. By unchanged, we have to give you a file. So it will be that file and E dot target. So we have two. So this will receive an event dot target file. So we can access our image file under five index, so it will be 0. This 0 to index. We are going to have our entire file. Okay? So that's why I have written here. And let's define this handle change as well. So this quantity when event. And we can do like certain data. You can get it spread out data. And we can do like a dot target, dot name, e dot target value. So let's go to the browser first. Inflate this one. And let's type something in each input field. So we are able to type. And let's try to upload a media as well. So this is also working. 7. Form Validation: Now the next thing we're going to basically validate our ball component. So we have to also do a form validation over here. So let's do that one. So here in Palm we are predefined and some met. Okay? So all summit, we are going to have handled somewhat. Let's define this one. And this is going to receive an event. So first we will do, if you do not prevent default. And after that, we have predefined light. And we have to write one validate function over yet, which will basically validating whether each input for live in poverty or not. So let's say define this validate function. Now to find one error object. And we can check here like if name is infinity, then we can give here like errors. Dot name equal to name is required. Likewise, we can do for other input will as well. I'm just going to copy and paste it over here couple of time. So this will become now email. We're also going to check email. And this email. Now we have in four as well. There's that message with respect to input field. And this will be the contact. And this will be contact. So we have defined our validate function over here. So first it's going to validate whether our input folded in putty or not. So if it's empty, so we are going to, so this error message. And after that, what do we have to do? So here we have to write one logic if object dot keys. So if you have any error, then simply we can do like a retard. And we can just pass this editor, okay? And if everything is fine, then we're going to add our user returning statement. Whatever you write below code, it won't execute. Okay? So if you don't have any error, then we're going to add our new user. After that, what we have to do. So let's add the error property in each input field as well. So you have to pass this probe. And we have to check like errors. Dot name. If you have, then show that one. We have to pass your content. And inside that content, we're going to throw that error message. And it will be the null. So I'm just going to copy this one. And I'm going to take over a year for email input field. And I will update the properties. So it will be email. And it will be the same thing I'm going to do for info as well. So it will be in poor. It will be Info and same thing. It will goes for contact as well. So let's save this file and verify this one whether it's working or not. Let's go to the browser, refresh this one. And let's just hit Submit. So we don't have any Submit button here. So let's add that one. So we are going to have one button to submit the form. Submit. It will be primary. Type will be submit. Okay. Now, let's reflect this one and let's click on Submit. Method is not display. After tried to submit the form input t. So let's see what is going on. So here basically we forgot to return our data return error. Let's save this file. And let's go to the browser. For this one. Let's click on summit. Now you can see that we're getting this error method like name is required equals required in forever, required quantity, required. Form validation is completed over here in this application. 8. Image Upload: So the next thing we're going to try to upload image before we add a user. So first, we will try to upload the image on Firebase. So what we have to do. So here we are going to be using one hook you defect. You will see it will run only once you upload a file. Okay? After that, I'm going to define a function here, click Upload File. Here, we have to generate a unique file name so we can use yet, Neil did not get time plus phi dot name. After that. We can have our storage reference. So here we can use the rep from our Firebase storage. And we can have our storage. And here we can give file name. After that. We're going to have here upload to upload. Bite me, but we have to use this one. But Ahmad Firebase history. And yet we have to pass the storage and file. After that. We are going to use this upload task. We are going to be using on method. In fact that first we are going to have a status changed, and then we're going to have a callback function. So we are going to usually snapshot. And we have to take the image, upload, progress, the progress, too. Short, dot byte transfer. So basically we are calculating the progress of the image upload. And here it will be total bite into and 200. Okay? After that, we can set the progress. Okay? And here we can use switch case basically to track the image upload. Okay, so here we can use short dot state. And we can have is state-like pause. So we can get some console logs here, like upload is boss. Degli here. We're tracking our image upload and we can give you a break. And we can have one default first. And it having this simply break, that's fine. But this one, we are going to have one more gate. And that will be for RNA. And you can just copy this one. You can just pay took over yet. And here we can give lake upload is that I need. Okay. After that, what were produced so in the third are when we can check if any kind of whether or not we can just do a console log here. If we have any kind of era when uploading the image. Okay? After that, we're going to have one function. Here. We can use can get download URL. And we can use upload task, snapshot dark. Then we have to resolve this one. So download URL. And here we can set. Data. So basically we are going to update our state. Avs. We are spreading out are all state property and we're just going to append our image file here. So we will get this download URL and that URL we are going to explore in our database. After that, we have to check like if you have the file, then we have to execute this upload file function. Now, we have to use this progress state on this button. Okay? So this submit button will be disabled if our image upload process is in progress. So it fits in progress, then it will be disabled. So here we can check like progress not equal to null. And if it's less than a 100, that means our image upload process, vision, progress. In that case, submit button will be disabled. So once the URL generated, then only we are allowed to submit the form. Then only it will able to exploring factor database. So we have to wait till the 100 per cent. So once it reached to work the a 100%, then we will get the downloaded URL. And then only we can able to store that download URL in our Firestore database. So we can verify this one, whether we are able to upload image or not on our Firestore database. So different this one. And let's also Bennett console here. And I'm going to upload the image. So we're getting this error. Okay? So to fix this issue, you have to go to this Google console cloud and you have to search your project. So we have created a project with the grad high-fat image. So here we can set that present. So we got this project, okay? After that, you have to go to this cloud storage. Here. What you have to do here, I'm going to select this one. And then here we have to add a principal. And you have to add this principle. So you have to add on this thing. If you are facing any issue to add an image and you have to select a role here. So you have to select your cloud storage. And here you have to select the storage admin. Save this one. And let's factor if they're this one. And we're getting some widening as well in our console. So we will shift this warning letter. So first, let's upload the image here. You can see that upload is running. Let's verify this one, whether our image is successfully uploaded or not on our Firestore database. So let's go to the storage. And here you can see that our image successfully uploaded on our database. So this part is computed over here. 9. Add User Data in Firestore with Image: So now we're going to add the user information along with this image in this file database. Okay? So at the moment, we don't have any collection here. So we will create a collection. So let's go to the VS code file. So now we have to add the user information along with the image. So what we have to do. So in handled summit, we have to write it logic to add the user information with the image upload. So first here, we can do, like I said, each summit Bu, Ru. Okay? After that, we have to convert this handle submit function to think. Okay. Now we can use here. Wait. We have to bring add in dog from Firebase. Then we have to bring collection again from our fire bit faster. So let's import automatically. Now, here we have to pass db, and here we can mention are the collection name. So we're going to create a collection with the name users. And after that, we have to pass and I'll check inside that. I'm just going to spread out our data. Then I'm going to add one property here, timestamp. So we can add timestamp, at which time we are creating this particular user data. So here we can use server timestamp. Okay? And after that, we wanted to get into Lake, navigate to the homepage. So I think we have bring huge navigate or not. So we have a huge navigate, but we haven't distorted the reference of use, Navigate, navigate variables. So I'm storing the reference of use and navigate into this navigate variable. And here I can use. So after creating a user, we want it to basically navigate towards the homepage. Okay, Let's do that one. So let's save this file and let's check whether we are able to add user information or not. So let's refresh this one. So we are getting another method here, like DB is not defined. So I think we haven't bring the dB down this barbaric dot js file. So let's bring that one. So let's bring that DB. Let's save this file. Let's go to the browser. Now. Let just read this one again. I'm just going to add one user and farmers. And so this will be John, john gmail.com. Some random information. Let's keep going. And let's select a user image. So I'm going to select the image. Let's wait for some time. Now. Let's click on submit. Our form is. Now after successful form submission, we are navigating towards the homepage that when we have successfully, I'm rotate our user information to the database so we can verify this one. So let's read this one. Now you can see that we have got one collection. And inside that we have a contact e-mail. And we have got one image URL, okay? We got in for name and timestamp. So that when we have successfully able to explore our user information in a database. 10. Show User Data on Homepage: So the next thing we're going to basically work on this homepage. So whatever the data we have inside our fighter dB, we're going to display in a cart component. So let's work on this homepage where we're going to lift out different, different user that we are going to have in our database. So now we're going to work on this homepage where we're going to lift out different, different user interface card component with the help of semantic UI from our database. On react first, we need huge effect. And usually state. And from Firebase, we also need dB. Okay? And some components. We have to bring Branemark semantic UA. So the component we need, like button, card, grid, container, and image. We also need here. Use navigate from React, router dog. Okay, after that. After that, Let's define some state. We are going to have a huge debts which will repeatedly hold all the users that we have in our database. Initially it will be empty area. We're going to have unloading loading state. And it will be false. Okay? And let's also store friends. Use navigate into it. Navigate very well. Now, I'm going to run a huge effect. So whenever our app load, where we want it to display all the users that we have in our database. So here I'm going to do set loading to true. Then I'm going to have one function here. Then I'm going to write Firebase vary. So it will be like a snapshot. It will be like on, a snapshot, will be able to bring from our Pashto. And here we have to pass collection. And in fact that we are going to pass db and the collection name. So we have the collection name users. After that, we are going to have one callback. So we are going to have a snapshot. And let's define the empty list at it. Then snapshot dogs. And we're going to run a for each loop here on each document. And yet I'm just going to push the document into this list empathy at it. We are going to have ID of the dog, okay? So talk dot data because id will be not there in the factor database if you, if you can see that here. So ID property is not here, Okay? So we're just adding the ID property and appending the rate of the data that we have in our five dB. Okay, So this is our entire document data. And on top of that, we are adding this ID. Okay? I hope you are getting this. After that. We're going to set our users. So you can just pass a list. And set loading will be false. Okay? Let's also handle header. If you have any kind of Herat. So I'm just going to do a console log. Let's forget this one. And after this. So this is already using sharp. So we are going to have a pretty dependency. And we have to also unsubscribe this one. What is the component? Get unmanned? So we have to do this one. So subscribe. So we have completed this basic logic. Now. What we have produced, so you have to work on this return part where we are going to show a different, different user that we have in our database in a card component. I'm going to use the container from Semantic UI. We are going to have group. Then we're going to have a grid in which I'm going too fast. Columns, three, stackable. We have to pass this probe. Then. We are going to have different, different YuJa. Then I'm going to map our users, okay? You just dot map. And inside that, again, I'm going to use grid column. And then I'm going to use here guard. Okay? So first I'm going to provide a key here, item dot ID. Then I'm going to have guard content in which I'm going to have image. So I'm using same entity white image component here. And we can pass source here. Item dot image size will be medium. So it may say, I'm keeping your medium. And I'm just going to add some inline styling here. So I'm going to give height 150 pixel width also, it will be one pixel and the image will be the rounded. So I'm going to give it a border radius of two per cent. Okay? So far now, we can verify this one, whether our images displaying or not. So let's go to the browser. So you can see that we have bought our image. Okay? Now we have to add the rest of the details. So after this, we're going to have our card header. Not height. God. And here I'm just going to show the name, item.name. And I'm going to provide some inline styling with some margin top. So it will be ten pixels. Let's farmer this one. After this, I'm going to have description, so card dot description. And here I'm going to have item.name four. Then our card content will close here and we're going to have one more card content. And here I'm going to provide props, card extra. Then I'm going to have do. And inside this div, I'm going to have button. So it will be update. And color we can give here in green and onClick. So we're going to provide an onclick method. And if we click on Update, so we wanted to navigate towards our update page. So we're using the same page for updating the existing user as well. So here we can give the route routed already that register on our app.js file. So this is our route update with ID. Okay. Now, let's format this one for now. And I'm just going to copy this one because we are going to have one view button as well. So this will be view. And we will define onclick method related. And the color will be purple. Okay, so let's save this one. And let's go to the browser. So the top card is not looking good. So I think we have some styling issue over here. So we can remove this one columns. Okay, let's go to the browser. So now we are getting the proper card component with the user information. We have two button, update and do. So if we click on update, you will never get towards the update page. So you can see that we are able to navigate towards that same ad user. So we're going to use the same page for updating the user as well, okay. 11. Update User Data: The next thing, we're going to update it, adjective user. So in R2 or rejecting user. So far, we have to populate the existing value into each respective input field. Okay? So we're going to update in educating users that we have in our factor database. So let's go to the VS code. So now we're going to update an existing user that we have in our database. So let's go to this additive to users.js file. So if I actually have to populate the value into each respective inputs that we have in our database. We are going to populate the value into each respective input field with the help of id. So you can see that we have an idea here, okay? So we're going to use this ID to get the specific user data. So what we can do here. So we have already bring the youth parents react router down. So we can do that too. The ID. Now we have our ID, okay? So we're going to write a huge effect. So just use that will only run once we have the ID. I'm going to add a ID and dependency over here. Here, we can check if we have the ID, then we're going to execute one function that is single user, which here to define. So I'm going to define this function and get in real user. And it will be async. So we need that document reference. So cost document reference. We can bring this dog Lamar factor. Here. We can pass DB collection name and ID. Now we need a snapshot of that particular document. So we can use a wig. And here we are going to use AND gate dog, which we are going to be used for more five, Good. So you can see there. So you can see that we're bringing all this helper method from R5. So here we can use can get dark. And we can foster document reference. And we can check here like if the snapshot not exist. That means if you have that particular document with that ID, then we're just going to do like set data. And we can get it spread out snapshot data. So first let's save this file and verify whether we are able to populate the value into its respective inputField or not. So we have some issue. So it will be id. Let's go to the browser. So now you can see that we are able to populate the existing value into each respective input field. So let's do this from scratch. So I'm willing to homepage and I'm just going to reflect this application first. Let's click on Update. Now, you can see that we are able to populate this existing value for each respective input field. Now after that, what we have to do, so we have to basically update this data, okay? So a few things we have to inject before we perform the update operation. So we have to change this title. This time we add basically updating the user. Okay? So we can check like if we have the ID that when the user is updating the existing user details. So it will be updated user or else it will be the add user. Okay, let's save this one and let's go to the browser. Now, title is got updated. Here in our handle, somebody that we have to change the logic. Okay? So now if we don't have the ID that when you're adding a new user information in our fighter, in our database. Okay. You can just cut this out and we can paste it over here. And an else condition. We are going to update the user information. So here we can use try catch block in GitHub. So first I'm going to add try catch block here. And I'm going to put all this inside trial. And I'm going to define catch. And we can just do a console log. Okay, Let's farmer this one and update. I'm just going to copy this one. And here it will be updated. We have to specify DB collection name. Along with we have to also pass this time ID. And the rest of the thing will stay as it is. And after successful submission, we want it to navigate towards the homepage. So it doesn't matter whether we are adding new user or updating, educating users. In both case, we wanted to navigate towards the homepage. Let's save this file. And let's verify this one whether it's working or not. So let's refresh this one here, Johnny Depp. So we are having some invalid collection of events. Okay? So let's go to this aggregate user. So here we have tested by dark, okay, not collection. So that was the issue. So let's save this file. And let's try to update again this record. Let's give Johnny Depp. Let's click on Submit. Now this time we're successfully able to update the user information. And we have got one warning here. So let's fix this one. Let's go to this home dot js file. And we can do this by key here. Okay. Let's see whether it's working or not. This one. So that one's gone. So we have completed two operation till now, adding the new user or updating the adjective knew that. 12. Working on Modal: So the next thing we're going to work on this view functionality. So if you click on View, Model will pop up in which we are going to sell additional information like name, email information, and contact along with the image as well. And from modal component, we're also going to perform the delete operation. So let's work on this modal component first. So let's go to the VS Code. And here we have modelled component. So first, let's send data snippet. In this component, we have to bring some semantic UI component, Like button model. Okay? So from Semantic UI react, we need to model that in each button. And this model component is going to receive bunch of props. So it's going to receive or pen set open image, name, info, email on tech, Heidi and handled, delete. Now after that what we have to do. So we can remove this and div. And in model we can pass on clothes. So open. We are receiving this blocks from our home component. On open. We can have the same set opened, but this time it will be true. And we are going to have one more props. So that will be opened. Inside this model. We are going to have model not having just heading light user detail. Then we're going to have model content. I'm going to pass a prop here image. And here I'm going to use the cuneate. Size will be medium source. Let's hear the message that we're receiving from our parent component wrapped. Let's format this one. Now after that, we're going to have model description, okay? Inside, we're going to have header. We'll have the name, okay. Then we're going to have other detail in a P tag only, having email. And we're going to have info and contact. Okay. After that, we're going to have model action, which contain two button can fill and delete. So let's copy the button component from here only. And I'm going to use it here. Okay? So color will be the black and the Tyvek cancel button. So we can just do like that for Penn. False. Okay. Now we're going to have Delete button, so I'm just going to copy this one, paste it over here. So let's remove all this props. Here we have displaced by content will be delete. Level producer will be right on Glick. So we're going to have our handled delete in which we are going to pass ID. This is delete. We have to specify it is read, okay? And since we have already specified the content, we can remove this one and we can judge market close here, okay? And we can remove this one as well. Let's format this one. So we're done with our modal component. Now, we have to use this modal component in our home dot js file. So once you click on view, so what we have to do. So this is our view. So we're going to have onClick method. And I'm going to pass here one method handle model, which yet to define. And inside that, I'm going to pass the item. This item will be object, which will contain name, email, contact info, and evade those details we're going to display in the model component. So that's why I'm parsing the item here. So let's define the handle model. And here we have to define one instead. So couple of state we have to define first. The first is we're going to have open. Then set open. Initially, it will be false. Then we're going to have YuJa and set. So basically, we are restoring the single user information that we're going to display in our model component. Now after that, what we have to do. So this is our handle model. So I'm sad that we can use set open. And it will become true. And we have to use like set user. And inside that, we're going to pass the item that we're receiving from here, okay? You can see that we are passing the item. So this is a object which contained name, e-mail, info, contact and image. Let's save this one. And we have to use this model. So once the user click on View button, so we have to open the model. So we can open the model here only. So below this button, we can check if, if open is true, that means they have to open a model. So let's bring this modal component. We get called automatically import this component for me. And here we have to pass drops. Step open, also be able to pass and handled delete also we have to pass. Now let's just do a console log. And then we will get header. And we have to pass the rate of the user. I'm just going to spread out so that it will receive like in this format. Image name, info, email contact ideal. So let's save this file. And let's go to the browser and verified it's one, whether it's working or not. Let's click on View. Now you can see that we have got our modal component with some additional user detail. Light can fall and contact. So on guard, we are just swaying only name and email. But our button is not displaying this Delete button. So let's go to the moral component. And here we have done some mistake, I guess. So here we have to add I can, okay, then only it will display I can, you can give checkmark. Let's save this one and verified is gone. Now you can see that we have got our delete button. If you click on cancel, the model, we'll get close. If you click on View, Model will open. 13. Deleting User Data: So the last functionality we're going to work on this obligation that is deleting this user. So let's add one more user. James and James at gmail.com. Let's give some random information here. So I'm adding some random information. Let's add some contact. Let's add one image. Let's click on Submit. So we are having some issue. So to address this problem, what we can do, so here, we can use here like columns three only. Okay? Now let's go to the browser. So now you can see that we have got this card company. And if you add one more user. So like if you're adding one user, let's click on Submit. Now you can see that the width of card is getting dejected after adding a new user. Now, the next thing we are going to work on the delete operation. So if the user click on this View button from here, user can delete this particular user detail. So let's go to the VS code. So in order to delete, we have to specify delete function. So let's define this one. And we have to pass the ID. And we're going to define the handle delete outside the return, delete. And this will be a thing. And initially I wonder too, so window pop-up confirm user. We can give message like Are you sure to delete that user? And if you hear a click, Okay, then we can delete that particular user. So I'm going to write logic inside a try catch. So first I wanted to close model. Then we can await delete dog. So we have bring this one from five torr. And here we have to provide dog vertically which document we wanted to delete. We can pass DB collection name and ID. After that. We have to also delete from our front-end as well. So we can do like set to users, users dot filter. And we can just write simple logic. So if I did not match, then we have to keep all those user on our homepage. And we have to remove that user that we have selected for, delete. And you can dye it here. Catch console.log. Okay, now let's perform the delete operation. So let's go to the browser. And we are not getting ID here. So ID is not defined. So id, we're seeing yet not defined. So here we can just write candor, delete this one. Let's click on View. Let's try to delete this one. We've got window pop-up. Confirm that if you click Okay, and it will get deleted. So you can see that from our front-end got deleted. We can also verify in our fighter dB. So you can see that here also we have only two document. The side of card component is not looking good because this card component will only, once we add a user. To fix this problem, we can try one more thing. So here we can remove the card group. Okay? So let us remove this one. Let's save this file, and let's go to the browser. So now you can see that it's looking good. And let's add one more user. So let's see like check, check. Let's give some tastier, some contact. Let's add image. Now, this time, we are able to display the card component with the equal dimension. So we have avoided the auto adjustment of our card component. So we affect this issue. Now, let's fix some small issue that we have in this current obligation. If you click on View, background, become completely black. So to address this problem, what we can do, so we can target one class name in our index dot CSS file. So you can vividly eject a background color by targeting this class name. Okay? Now, what if read this one. Now you can see that we have avoided the complete background black. 14. Adding Spinner: We have defined this loading a TEDx, but we haven't used this one. So here we have defined one component. It's been a dot js. We can define our loader. And inside this is painted. I'm going to bring loader component mode Semantic UI react. And we can use here that went. And we can just add this loader component. So let's save this file. And let's go to this home dot js. And below this use effect, we can check if you have the loading here. Then we can return our spinner. So let's save this file. Let's go to the browser, refresh this one. So now you can see that we have got our loader and we have some more digital in this obligation. So let's open console. If you have any issue or not. Look like we don't have any issue. So here we have some issue. Let's look like warning only. So we can modify this one. So let's go to this editor to users.js file. And this will be placeholder. So it will be a small only. When I'm going to replace everywhere. Let's save this one. Let's go to the browser. Read this. Well, now we don't have any issue here also, we don't have any issue. That is, we have successfully able to build this React firefighter credit application along with the image upload. 15. Wrap Up: If you're watching this video, that means you have successfully able to compute this birth in which we have performed all crud operation along with image upload using Firebase, Firestore database in our React application. And I hope you have learned some important concepts throughout this course. So that's it from my end. And thank you so much guys for taking up this course.