How to use Firebase Firestore with ReactJS. Firebase CRUD tutorial.

In this React Firebase tutorial we'll build a simple CRUD application using React and Firebase.

We'll set up a firestore database with spells from D&D.

Our app will get data from the database, update records and also add and remove them.

I write about React and TypeScript there

[anonysmooth]

19:57 "all are misspelled, " I thought you are going to correct it hahahahaha

[zentekvideogames]

Is amazing how his VS Code Theme matches his room color pallet too.

[ut]

Thank you for a clear and easy-to-follow tutorial, I think so far this was the most useful Firestore tutorial I have seen.

[grf]

The colors of his Visual Code editor is the same palette as his video for skin color, hair color, wall color and furniture color. Well done!

[rijden-nu]

Holy shit. React/firebase beginner here. These must have been one of the most informative 20 minute video's I've ever seen in my life. Thanks for actually doing *everything* live, it's so much easier to follow than just cloning a project and trying to understand what does what. The way you add things is so natural, and your process/procedure shows me as a beginner so much about how to think about building React classes/functions from scratch! You, my friend, have made my day.

[skepticmoderate]

If you get 404 on `npm i --save-dev firebase-export-impot`, you need to change it from 'firebase' to 'firestore. So instead, you will execute `npm i --save-dev firestore-export-import`. Not sure why he didn't edit his mistake out...

[gregchapman]

Thanks for the great video. Also Maksim Ivanov one of the coolest names I've hear in a while lol

[varsa]

Haven't been this excited to finish a project in a long time, I have also added a function to add images, which is the same as for the name, you just paste the url instead of the name and it worked like a charm! You Sir are very good!!! Subscribed and liked!

[nikhilkandekar]

FROM 19:37 "oh I misspelled delete" Goes on to misspell every word. What a chaos!!! I laughed soooo hard

[davidgonzalez]

Hahaha, that misspelling trick was awesome! Loved it!

[isaias]

15:18 Thanks for doing this part! I was struggling to pass in my document id into my fetched data in my own application

[andrewmukare]

if i could give you a thousand likes i would, I was honestly stuck on achieving CRUD on my firestore data. Thank you for making this video!!

[Alex-hsxj]

7:35 GET
14:10 SET (update)
17:00 DELETE
19:05 ADD

[yoursnagaraju]

Really clear and focused material..all the best!!

[dcd_music]

From where do you download the data.json file? Thanks!

[boopfer]

k, you can add for spells:
1) for this spells file you will need to convert to valid JSON - replace lines 1-3 make it an object '{ "spells": [ ' b) to the last line add a closing } at the very end.
2) google seemed to have changed the auth for Node so your code snippet should look like this:

var admin = require("firebase-admin");
const { restore } =
const serviceAccount =

admin.initializeApp({
credential:
});

restore("./spells.json");

[chris]

You are the maximum, Maksim! You make it all so simple :-)

[nilmendes]

Straight to the point and well explained. Congratulations on the tutorial, it helped me a lot!

[mealua]

I actually ended up here because I was looking for a database for my pet DnD react app :):)

[dineshwijesuriya]

Really helpful video for a beginner. Thanks a lot