Uploaded May 2023 | Updated September 2026, 2 weeks ago
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-react-crud-app/tree/main
Final Code (don't peek!!) - github.com/rodgtr1/firestore-react-crud-app/tree/finished-app
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 **
https://travis.media
** FREE EBOOKS **
📘 https://travis.media/ebooks
LET'S CONNECT!
📰 LinkedIn ➔ https://www.linkedin.com/in/travisdot...
🐦 Twitter ➔ twitter.com/travisdotmedia
🙋🏼♂️ Website ➔ https://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.
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-react-crud-app/tree/main
Final Code (don't peek!!) - github.com/rodgtr1/firestore-react-crud-app/tree/finished-app
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 **
https://travis.media
** FREE EBOOKS **
📘 https://travis.media/ebooks
LET'S CONNECT!
📰 LinkedIn ➔ https://www.linkedin.com/in/travisdot...
🐦 Twitter ➔ twitter.com/travisdotmedia
🙋🏼♂️ Website ➔ https://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.
