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

[@anonysmooth648]

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

[@rijden-nu]

I laughed out loud :D

[@drewstifler1440]

i shit brick hahahahaha

[@zentekvideogames3589]

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

[@simonfoster9426]

Youre right! Good eye

[@supriyjinturkar7477]

👀

[@ut5941]

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

[@iagobarretoc8194]

i'm with you, this is by far the cleaner way of consuming firebase using react

[@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.

[@satansdeer1]

thanks. So if i understand you correctly the key is that i just live code with my own pace instead of explaining pre-written code right? And for example this video is harder to digest kzbin.info/www/bejne/oYmbk6xqmqisfZY

[@satansdeer1]

Im still learning what is the right approach to instructional videos

[@rijden-nu]

​@@satansdeer1 YES! Your calm and deliberate speech and voice works great too. Nice, well-formed sentences, no stress, very inviting. About that other video, well, if nothing else, that video is muuuch denser. You start out with a much more complete and prepared codebase, which contains stuff that I would have to dive into to understand. And then you talk for minutes about something on the screen. It's like a PPT presentation :) Now, I know myself, I'd probably just end up getting bored, cloning the code, and kind of 'borrowing' the pieces I could use. Useful to get something done quick, but I would understand less of what's happening. Of course that topic is a lot denser than the really basic one in this video and it would take much longer to write realtime, and it needs some background understanding/homework, so maybe there's no way around it for topics like that. But I'd probably prefer writing the code that connects the dots in front of me, and then maybe make changes in other parts of the code to understand what's what. Not sure, just fantasizing. You know, like back in school. If the math or physics teacher gives you a sheet of formulas, you can put a number in on one end and get a number out on the other, but if she shows you how to arrive at the conclusion that it's the correct formula to use (even though she keeps saying 'it depends on this-and-that piece of knowledge - we'll get to that later, just trust me now and lets focus on this''), you actually know how to work with it instead of simply repeating a monkey trick. If that makes sense :) sorry for the long deliberation. Maybe I'm all off-track. So in conclusion, I think the reason this particular video worked so well (for me!!) is that I can see in what order you think about your code additions, so it grows in front of my eyes.

[@rijden-nu]

Also, the joke you end it on. It works so well that I'm not sure you did it on purpose or not. But it makes me remember the video. I laughed out loud :)

[@satansdeer1]

ok, i see. Thanks for great reply!

[@grf0]

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!

[@satansdeer1]

grf0 ahahahaha

[@varsa1198]

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!

[@gregchapman1461]

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

[@skepticmoderate5790]

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...

[@Chakalabkarina2357]

actually he said npm i --save-dev firestore-export-impot....

[@ssuriset]

LIFESAVER DETECTED

[@andrewmukare3433]

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!!

[@dcd_music]

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

[@davidgonzalez965]

Hahaha, that misspelling trick was awesome! Loved it!

[@yoursnagaraju]

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

[@isaias3276]

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

[@nikhilkandekar9124]

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

[@nilmendes7710]

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

[@satansdeer1]

Nil Mendes , thanks, let me know what else do you wanna see in my tutorials

[@nilmendes7710]

@@satansdeer1 Ok. Express.js, modern javascript techniques, firebase from basic to advanced and node.js. If possible long tutorials (I like them because they often come up with tips, suggestions along the way).

[@satansdeer1]

@@nilmendes7710 wow, that was fast. Thank you, for these

[@nilmendes7710]

@@satansdeer1 I thank you! Success in your projects!

[@Alex-hs8xj]

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

[@chris78945]

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

[@satansdeer1]

:-) ahah, thanks

[@ristolibera1295]

Your tutorial are brilliant!

[@mealua]

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

[@mealua]

instant like and subscribe! :)

[@dineshwijesuriya4899]

Really helpful video for a beginner. Thanks a lot

[@ml2981]

This video is super helpful. I hope you can make more videos about React + Firebase tech stack. Most of the React videos are about React + MongoDB or React + GraphQL, hard to find any React + Firebase video.

[@satansdeer1]

nooby cool, what would you like to learn?

[@joeblow8394]

@@satansdeer1 React + Firebase + FullCalendar would be cool :)

[@abreguabel]

Maksim, muy claro tu video ! Genial ! Muchas gracias

[@leonardocamargo5412]

Why you don't show the content of serviceAccountKey.json ?

[@boopfer387]

k, you can add for spells: github.com/jcquinlan/dnd-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 } = require("firestore-export-import"); const serviceAccount = require("./serviceAccountKey.json"); admin.initializeApp({ credential: admin.credential.cert(serviceAccount) }); restore("./spells.json");

[@dariozalac598]

Thank you for this! This did help a lot!

[@boopfer387]

@@dariozalac598 Hello Dario glad it helps - awesome feel free to join coding coach’s slack

[@pajohns]

Awesome and simple tut - thanks

[@mtcindianutube]

@ 03:18 , the uploadScript folder already contains the node_modules, could you please comment on that how to add node_modules there by default? i tried npm init but I got only package.json there.

[@nileshdhruv8431]

Fun Fact: At 8:41 in line 15 if you remove "[ ]" then data will automatically gets updated (no need to reload), then you don't need to use snapshot. If anyone knows how and why this works like that or if that can be used in production (does it cause any harm?), plz let me know

[@satansdeer1]

Nilesh Dhruv if you remove the [] it will make the useEffect trigger on every component update, and you might end up with update-loop reactjs.org/docs/hooks-effect.html

[@brsh1190]

@@satansdeer1 so how to make it reload in correct way?

[@cpc4466]

Thank you Maksim

[@ytc3753]

you just got a new sub. thanks a lot

[@fonncatalina6464]

You save my ass! Thank you! Clear my bad day get stucked just to a todo app...

[@boopfer387]

where is the 2nd video on subscribing to the changes?

[@ss-bd9ru]

Any idea why the import firebase at the top of the firebase.js is causing unexpected use of 'self' errors?

[@mine1459]

Thanks so much for the tutorial

Stead of using npm start, would you firebase serve tool?

[@HIghtowerSever]

Молодец, Максим! Инглиш тоже ОК. Кип гоин ;)

[@satansdeer1]

😊 Спасибо

[@ynaveenkmr5943]

Hi bro where do you kept 'data.json' file and from where we can get 'serviceAccountKey.json' file

[@mariavarvaroi]

Thanks a lot! You saved my day! 🙏

[@amritraj658]

I am trying to update data but i can't, But after watching your video I can do so thank you

[@bocarilla9772]

Hi! just wondering if you could teach us how to configure useEffect to automatically update without refreshing

[@300deQI]

Next 007 confirmed

[@lehieu3281]

thanks you, i have ran. but when i anable inspect in browser, anyone can see my config of firebase. so do they attack my db on Cloud Firebase ?

[@techjandro]

Hi Maksim, I just subscribed to your channel and I'm loving it :-). BTW, what's your theme or color schema got Visual Studio Code?

[@wasseemzaher]

very good video. thank you!

[@juanhuenchun8908]

Where i can find data.json?

[@thomashoenselaars920]

This is amazing, any ETA on the subscribing to changes in the db tutorial? Thanks a lot!

[@satansdeer1]

Thomas Hoenselaars currently working on custom hooks tutorial, so probably in 2 weeks or so

[@thomashoenselaars920]

Maksim Ivanov great, thanks for the quick reply!

[@satansdeer1]

Thomas Hoenselaars and thanks for support!

[@thorstenbruening]

@@satansdeer1 Eargerly waiting for the subscribing to changes video... Carry on, Maksim. Thank you very much. Gruß TB

[@lydiac3038]

Hey, would you be able to show how to upload images using firebase storage and referencing them in Firestore as part of the form of a CRUD app?

[@stomperhk9107]

You can store the image URL in the database and then use it.

[@riflan0ahmed]

Anyways , thanks It was a great work for beginner Everything is work fine but there were some other issues in console

[@vladimirsterlin9078]

1) What vscode theme are you using? 2) On about 1:43 you copy the firebase config but not the other script that is above it, why do you not need it?

[@satansdeer1]

Vladimir Sterlin i use material theme, palenight option i didn't need the script because i use firebase as an npm package

[@vladimirsterlin9078]

Maksim Ivanov thanks!

[@vladimirsterlin9078]

Maksim Ivanov I checked out that theme and it has very different coloring. Did you customize yours somehow?

[@satansdeer1]

@@vladimirsterlin9078 no, hmm, it actually might be another one "synthwave 84"

[@mihail.sitnic]

Hi, mate! Could u create a tutorial How to use Firebase Firestore with Firebase functions? Cheers!

[@howwwwwhy]

very helpful. Thank you. Could you include this video in React+Firebase playlist? If so, I can find easily. Anyway thank you!!!

[@satansdeer1]

HoW_3W Why yeah will do

[@jeucasulo]

Hi, I think I can say you have "2 firebase configurations". The first one in uploadData.js and the second on firebase.js. They dont seem to comunicate with each other, right? I mean, you dont need the first one to use the second and so. The thing is I use the firebase.js version only and i can access the realtime database, but only with I set the security to "test mode" (allow read,write) in Storage. I wonder if the second one could be the solution

[@satansdeer1]

Yeah the one in upload data is only used for this script

[@jeucasulo]

@@satansdeer1 ok thank you dude!

[@ahmadazharbasyir737]

Please give tutorial display data from firestore to datatable

[@nairgh]

Thanks for the great and right to the core tutorial. Appreciate your great work. Are you thinking of creating user authentication system in react-firebase. It should be cool.

[@satansdeer1]

Thanks, yes I plan to make a video about authentication later

[@lazgre777]

where to download data.jsoN????

[@panosmania]

the same code works if i set up a real database (firebase) or only or firestore???

[@satansdeer1]

You should be able to switch to fairbase without any changes. Here is the comparison of two firebase.google.com/docs/firestore/rtdb-vs-firestore

[@liedellidmi4169]

Thank u very much it's very good tuto :)

[@satansdeer1]

Oh, thanks!

[@feeelgoood]

Супер! Все понятно объяснил.

[@raulstory6146]

Hi My friend. Excellent your explanation. Could you please clarify in this structure how I can orderBy the data of this collection. Thanks

[@satansdeer1]

RALPH STORY you mean how can you sort the items?

[@justinmadridano581]

I have this SyntaxError: D:\upload-script\serviceAccountKey.json: Unexpected end of JSON input at parse () when i typed node uploadData.js

[@grf0]

Tip, watch this video in 0.75 speed

[@sergeypushkovskiy5790]

When are you going to release next video on how to subscribe to changes and reload app?

[@satansdeer1]

Sergey Pushkovskiy expected it this monday

[@sergeypushkovskiy5790]

Maksim Ivanov Thanks. Will be waiting for new videos

[@julioipora]

love you bro

[@RajkumarSingh-sb4fj]

I have placed data.json file along with uploadData.js (same directory), data hasn't been uploaded, plz help me where to place the data.json file? My data.json file { "spells":[ { "id":1, "code":101, "name":"Research and Developemnt", "parent":"-", "employee":90, "resignee":8 }, { "id":2, "code":102, "name":"Technical Support", "parent":"-", "employee":20, "resignee":3 }, { "id":3, "code":103, "name":"Information Technology", "parent":"-", "employee":40, "resignee":2 }, { "id":4, "code":104, "name":"HR Department", "parent":"-", "employee":5, "resignee":2 }, { "id":5, "code":105, "name":"Account Department", "parent":"-", "employee":10, "resignee":2 }, { "id":6, "code":106, "name":"Department Name", "parent":"-", "employee":90, "resignee":8 }, { "id":7, "code":107, "name":"Department Name", "parent":"-", "employee":90, "resignee":8 }, { "id":8, "code":108, "name":"Department Name", "parent":"-", "employee":88, "resignee":8 }, { "id":9, "code":109, "name":"Department Name", "parent":"-", "employee":90, "resignee":8 }, { "id":10, "code":110, "name":"Department Name", "parent":"-", "employee":90, "resignee":8 } ] } Is it correct ???

[@vincemaquilang7848]

where is the data.json?

[@satansdeer1]

Vince Maquilang github.com/jcquinlan/dnd-spells/blob/master/spells.json here you go

[@ucefkh]

nice thanks davai

[@jmalbite804]

Hi, what theme are you using for your vs code?

[@IsmaelNascimentoAsh]

Very good content!

[@huzaifaalam513]

Where is uploadData.js ??????????????????

[@exo.master]

2:45 if you didn't care about these errors, I won't also :-)

[@nemirovandrei]

Liked.then(saved)

[@vidumini23]

Woow.. Thank you.

[@Llytkm]

Here I'm at 03:45 stuck with finding the service account key. ☻☻☺

[@bakirkozhegulov3331]

good!

[@osmon-11]

Its great

[@AioriaPoderoso]

Which kind of Dev Ed is this?

[@BaBa-pf3ol]

5:50 6:40 10:20 14:14 15:00

[@elkpu-tv1636]

thanks

[@joshuavaage2269]

3:12 firestore-import-export snippet: gist.github.com/whaleen/7c45d337bd7940b9b858df998f2ccdc8

[@ThreeCrowns]

Thanks

[@alisiraj2100]

Thanx

[@emrc5085]

Узнаю акцент из тысячи)

[@mauriciosotoa8130]

thanks man¡¡¡

[@ibrahimabdali5477]

you are awsome :)

[@a3oao]

Can you please reply to my question on your last video (Firebase React Authentication Tutorial For Beginners - Private Route With Hooks) kzbin.info/www/bejne/q5_VZaZpn8lsp6M My question was "I'm kind of new to react-router, I was successfully able to add authentication and create private routes the way you did, but when but it doesn't allow me to implement transition between routes like in this example here reactcommunity.org/react-transition-group/with-react-router/ " I also wasn't able to implement the new recommended way for react router v5 which goes like this:

[@satansdeer1]

Hey Ahmed, I could take a look at the problem if you send me your repo

[@vanikvardanyan9067]

сделай тоже самое только на русском плиииизззз

[@satansdeer1]

привет, а что именно ты упустил в английской версии? К видео приложен пример кода. Возможно нужны какие-то пояснения к нему?

[@David-td8dq]

this is such a bad beginner video, alot isnt explained properly and it just feels like you have an appointment in 10 minutes.