Using Cloud Firestore For Your REACT Backend 2023 | CRUD App

Whether you're building a GitHub app portfolio, building a Demo app, or even moving to production, Cloud Firestore is an easy (and free!) solution as a backend for your React app.
Often when we are learning to code or building hobby apps we have a hard time figuring out the cheapest and easiest way to handle data in the backend.
Well, in this video I'll walk you through, step-by-step, how to add and use Google's Cloud Firestore to your React app to handle data persistence.
REPO
Starting Code - github.com/rodgtr1/firestore-...
Final Code (don't peek!!) - github.com/rodgtr1/firestore-...
Timestamps
00:00 Intro
01:42 Project setup and walkthrough
05:33 Cloud Firestore setup
08:55 Configuring Firestore in app
15:27 Pulling real data from Firestore
23:50 Adding data
30:25 Delete data
33:16 Edit data
36:53 Set up Authentication in Firestore
37:53 Log-in functionality
43:04 Log-out functionality
45:04 Register user functionality
50:20 Outro
** Career Path Coding Tracks **
Web Developer - geni.us/jBigBd
Software Engineer - geni.us/AbMxjrX
Machine Learning - geni.us/GporLlT
Python Developer - geni.us/tv2FJBU
DevOps Engineer - geni.us/MgHtJ
** My Coding Blueprints **
Learn to Code Web Developer Blueprint - geni.us/HoswN2
AWS/Python Blueprint - geni.us/yGlFaRe
** I write regularly **
travis.media
** FREE EBOOKS **
📘 travis.media/ebooks
LET'S CONNECT!
📰 LinkedIn ➔ / travisdot. .
🐦 Twitter ➔ / travisdotmedia​
🙋🏼‍♂️ Website ➔ travis.media
#firebase #firestore #reactjs #codingtutorial
** Some of the links in this description may be affiliate links that I may get a little cut of. Thank you.

[@riccoc.6507]

Genius, thank you bro. exactly what i was looking for!

[@gunsofboomboom5343]

This is exactly what I needed thank you so much for a excellent easy to understand tutorial!

[@bloodshotsoul]

Wow I’m new to your channel and I think it’s great. I like you reference the documentation and show exactly how you are getting the info and code. I am not a fan of the tutorials that don’t even show you the thought-process as it’s not real world IMO. Subscribed.

[@israelsantiago7256]

excelent tutorial, loved it!! direct to the point, as you mentioned it's a firebase course, not react course, I loved that, very very helpful!! new subscriber earned

[@user-ub5nv1eo9k]

Thank you, very useful video!

[@eleah2665]

Cool. Thanks. Don't peek!

[@islamicinfo9519]

that was the quite helpful stuff.

[@gavinkalaher7314]

Excellent, this will be really helpful for my React projects. Thanks for the demo, Travis!

[@1haker]

There is no need to duplicate Add and Edit just make one form component that accept incoming values from backend for editing as prop

[@meharsain728]

umm.. i'm making my first app as my final year project, ecommerce app react native with firebase. i was looking for crud, thank you, its a way out for me.
one thing is still toubling me on how to add payment method, dynamically data fetching and displaying, if you can provide any more resources, i'll be very thankful to you.

[@basilrahim4406]

Can't you trigger get employees func using the array dependencies of the useEffect() ?

[@laddrusso5243]

Excellent but can you do a video like this but start from scratch

[@imanhameed3722]

Can you make a video this week before saturday of usinf firebase as backend for REACT NATIVE!
How we can use it for storing and displaying arrays as well as normal json format
I have my final exam next week on sunday.
It will be very helpful 🥹

[@imanhameed3722]

Mainly i want to learn how to implement arrays in firebase and code to create and display these arrays 🥹

[@user-it7lv5ok6c]

Is it possible to add logic to the application with just react and firestore. For Example: if i add a task to buy milk, then a task to buy bread should be auto added.

[@TravisMedia]

It’s possible. React can provide all the logic you need there prior to sending the data.

[@satisfyingly1]

1:38 I turned off my phone and realised I was watching from my phone 😅

[@dct_1999]

The video is private hehe

[@DEBO5]

Sorry usually I didn't know that you could just put the db init and db queries right in the client but that being said, in a production level app you would need to spin up a server with node and express anyways because although Firebase is a BaaS that comes with a safe SDK, it can't do things like CSRF tokens/nonce or other server-side validation and sanitzation, etc. At that point, I would toss all of the firebase code in the backend api also for seperation of concern. When would you ever really want to make a full-stack app without the necessary security features? (or at least the architectural set up to do so). Not to mention if the app were to scale the client-side could get really bogged down by db associated logic that could have better been hosted on a seperate backend. Relying heavily on client-side logic for database interactions can lead to increased load times and potentially bog down the client, especially as the application grows. Furthermore, this approach can significantly impact the initial page load and interactivity, as hydrating the DOM with all that client-side logic-essentially backend operations-can delay the user's ability to interact with the page promptly. I don't even want to get started on code splitting/chunking (although I know this is meant to be a simple tutorial)...

[@mdarifulislam2736]

do you know someone name jack lovelace?

[@TravisMedia]

I don’t.

[@Pranav-ie1ik]

why do you guys teach even ? why do you have to copy a repo and work on that why can t you just start working from scratch that what i was here for
you guys only focus on selling course i guess

[@onezcube3741]

sorry mr travis i have error "Could not reach Cloud Firestore backend"
@firebase/firestore: Firestore (9.21.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project "employee-database-46883",

[@zacharypiner4471]

I too am getting this error

[@Emily-JayneJudson-xb1kg]

​@@zacharypiner44711:18