Complete React Firebase CRUD Project | Firebase and Firestore With ReactJs Tutorial for Beginners

In this video we will explore the React + Firebase (Firestore Database). We build a Library App to manage the availability of books in the Library.

We build a CRUD operations with React and Firebase to add new books, update the existing books and their availability, delete a book and at last reading all the of books available in the library.

Please use the timestamps mentioned below to jump to any topic and also checkout the reference videos and links.

⭐️GitHub link for Reference⭐️

⭐️Reference Videos and Links⭐️

⭐️ Support my channel⭐️

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:25 - Application Demo
0:02:40 - Code Walkthrough
0:05:18 - Firebase Project Setup
0:09:05 - Firestore Database Setup
0:12:44 - CRUD Operation Service Layer
0:20:46 - Create Feature
0:29:37 - Read Feature
0:34:18 - Delete Feature
0:31:00 - Add Refresh List Feature
0:37:44 - Edit Feature
0:46:45 - App Testing
0:48:18 - Outro

***React Roadmap for Developers in 2021***

🔗 Social Medias 🔗

⭐️ Tags ⭐️
- React Firebase CRUD Tutorial
- React Firestore CRUD Application
- Firebase React Library Application
- Firebase v9 Crash Course

⭐️ Hashtags ⭐️
#react #firebase #project #tutorial

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[DipeshMalvia]

Guys, if the video is helpful to you or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

[lennardschmidt]

You have no idea how much you helped me with this!!! I saw so many videos on how difficult it is but you explained it so simple and easy to implement in my projects. Thanks !!

[TheCas]

Thank you so much, awesome content. I'm definitely gonna try to build this one by myself this week.

[cosanostraytc]

Very good tutorial. Thank you. Keep it up!!!

[kovendanragupathi]

Love your consistancy man, please post like these type of contents

[bhavyagupta]

Really liked the video...please upload one for realtime/ snapshot part as well

Very well explained and working example. Thank you.

[personzen]

Thank you for everything u do. Greetings from morocco.

[DeepakGupta-pzfx]

Love your consistency video please post like one react unit testing tutorial

[chulopapi]

Thank you for everything. I have to check if you have done one video about auth in that case

[onigbindedavid]

Am used to functions always its nice to use class and execute as methods

[MrRavku]

thanks brother i am a happy your video whatching

[virgo]

thank you so much your tutorial is pretty good.... make more videos

[choongsinfatt]

I got this error :
Line 61:6: React Hook useEffect has a missing dependency: 'editHandler'. Either include it or remove the dependency array react-hoo
ks/exhaustive-deps

[LucasGuanes]

If any of you are having the problem where no bootstrap styling is applied, just add the following line in your index.js file: import

[swapnilcodes]

How to join two collections in firebase?? Suppose I have two collections which contains movie name n id and another contains movie id from first collection and other movie details...then how can I join those collections??

[dcode]

Please make a video on firestore rules. Thanks

[lag-o-d]

if you can show the updated list after update and add functionality, it will be more clear

[DiamondDavid]

At 32:51. I see this code: setBooks(data.docs.map(doc => ({ ...doc.data(), id: doc.id })))
Why doc.data() can get title, author and status, i can not see this method from data.docs when i see at console.log.
This is so weird for me. Can anyone explain that. Thanks so much.

[Tsamara]

Nice video sir. Could you show me using “snapshot” instead of a refresh button. I was hoping to do this in realtime. Thanks. Great video!