Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn Firebase Core with React

Name: Learn Firebase Core with React
Rating: 3.9 (260 reviews)

Learn How To Build & Deploy Firebase Cloud Functions, Firebase Web App Hosting, Firebase Auth, Firebase DBs, and More

Created byJared Potter, Juan Lizarazo, Tyson Potter

Last updated 6/2024

English

German [Auto],English [Auto],

What you'll learn

Deploy Fast Secure, & Reliable Web Apps
Create Cloud Functions in Node Javascript
Fully featured user authentication - Account Registration, Account Logins, 3rd Party OAuth (login w/ google, facebook, twitter, etc), and more
Free HTTPS
Leverage Firebase Cloud Firestore NoSQL document/collection style database with full CRUD operations
Securely upload files & blobs to Firebase Storage buckets
Actual Free Tier (compared to competitors)
Build/Deploy Production Backends for Web & Mobile Apps
Awesome for prototyping personal projects
Learn from an experienced senior software engineer instructor with years of firebase under their belt
Covers the LATEST v9 Firebase Web SDK for the best performance and bundle size

Course content

7 sections • 122 lectures • 6h 47m total length

What is Firebase? Why Learn Firebase?5:19
Discover Firebase, a Google Cloud-backed platform offering hosting, authentication, Firestore, cloud storage, and cloud functions, with secure, scalable tools for web and mobile apps.
Course Tools & Prerequisites4:26
Set up essential tools for firebase core with react: google and github accounts, git configuration, node 12.13, yarn, and basic html, javascript, and terminal skills.
Course Project - Recipes Web App2:32
Firebase Tools - Global Install0:24
"Command Not Found" Error
In the next video, if you're getting this error after globally install the Firebase Tools CLI then here's a few possible solutions:

1. If installed w/ yarn (yarn global add firebase-tools)
export PATH="$(yarn global bin):$PATH"
^this adds the yarn global bin to your command line path to be available.

Alternatively install the firebase tools globally with npm
npm install -g firebase-tools

If issues persist, please submit a question to the Udemy course.
Deploy Our First Firebase Project7:07
Course Github Repository - Reference Code for Each Section0:02
Install Firebase Version 8.9.10:39
Install React Version 17.0.20:32
Installing The Firebase NPM Package1:11
Get Firebase Project Config & Create Environment File2:38
Fetch App.css File from Github0:46
FirebaseConfig.js Service File4:17
v9 Upgrade (optional)0:16
Section 1 Summary1:26

BIG PICTURE - Firebase Auth6:38
Learn how Firebase authentication powers a React app, including login with email, password reset, and Google OAuth2, plus using JWT tokens to secure read and write in Firestore and storage.
Setup Check - Firebase npm, .ENV, and FirebaseConfig0:57
Firebase Console - Authentication1:00
FirebaseAuthService JavaScript File5:04
Create LoginForm React Component & Register User Account - Part 14:15
Create LoginForm React Component & Register User Account - Part 23:00
Create LoginForm React Component & Register User Account - Part 35:26
Firebase Console - New User0:29
LoginForm - Login User Account & JWT Access Token Location2:31
LoginForm - Password Reset2:50
LoginForm - OAuth 2 - Login with Google1:51
Firebase Console - Authorized Domains for Production0:34
Firebase Console - Templates for Email, Password Reset, SMS Verification, Etc0:19
Github Actions - CI/CD - Continuous Integration & Continuous Deployment1:19
Firebase Authentication - Section Summary1:22

BIG PICTURE - Firebase Firestore (database)3:26
Firebase Console - Cloud Firestore5:02
Firebase Firestore Service - CREATE1:41
Creating a Recipe - HTML Form - Part 16:30
Creating a Recipe - HTML Form - Part 28:22
Creating a Recipe - HTML Form - Part 34:46
Learn to build an interactive ingredients list for a recipe form by adding inputs, rendering the ingredients with React’s map, and enabling delete actions within a styled table.
Creating a Recipe - HTML Form - Part 45:06
Create an ingredient input with label, placeholder, and a button to add ingredients by enter or click, validating and updating the list using spread.
Creating a Recipe - HTML Form - Part 54:00
Creating a Recipe - HTML Form - Part 60:44
Firebase Console - Viewing Our New Recipe0:25
Firestore Security Rules - Server-Side Input Validation & Sanitization7:51
Firebase Firestore Service - READ0:45
Reading Recipes - JavaScript & HTML - Part 15:05
Reading Recipes - JavaScript & HTML - Part 23:43
Reading Recipes - JavaScript & HTML - Part 33:24
Reading Recipes - JavaScript & HTML - Part 45:42
Firebase Firestore Service - UPDATE0:49
Important ⚠️ React 18 Note0:09
Updating a Recipe - JavaScript & HTML - Part 15:33
Updating a Recipe - JavaScript & HTML - Part 23:50
Updating a Recipe - JavaScript & HTML - Part 32:47
Update or add recipes in a Firebase Firestore-backed React UI by conditionally editing existing recipes, handling updates and cancellations, and refreshing the recipe list after changes.
Firebase Firestore Service - DELETE0:45
Deleting a Recipe - JavaScript & HTML5:09
UI/UX Loading “Spinner” & No Recipes Message (optional)4:34
Firebase Firestore Simple Query - Filter Recipes by Category2:55
Firebase Firestore Service - Order By1:37
Firebase Firestore Compound Query - Order By Publish Date4:40
Firebase Firestore - Building Compund Query Indexes4:09
Firebase Firestore Service - Limit & Cursor2:15
Firebase Firestore Pagination - Recipes Per Page & Load More Pages7:22
Cloud Firestore Full Text Search?0:53
GitHub Action Deployment Hosting - Ignore Warning0:19
Firebase Firestore - Section Summary1:41
Set up Firestore in the Firebase console, create a reusable JavaScript service, enforce security rules, perform CRUD, and enable category, date-sorted, cursor-paginated recipe queries in a React app.

BIG PICTURE - Firebase Storage4:07
Explore the picture of Firebase storage, upload and secure files with authentication, generate signed URLs, and build a reusable React image uploader to attach image URLs to recipes in Firestore.
Firebase Console - Cloud Storage2:09
Firebase Storage Service5:30
Create Image Uploader - Part 14:46
Create Image Uploader - Part 23:43
Build an image uploader preview using useState, useRef, and useEffect, generate unique IDs with uuid v4 for Firebase storage, and manage upload progress and existing image URL.
Create Image Uploader - Part 33:27
Create an async handle file changed function to validate the file, generate a uuid v4, upload to Firebase storage with progress updates, and enable cancel to delete the uploaded file.
Create Image Uploader - Part 44:19
Create Image Uploader - Part 53:25
Firebase Storage - Section Summary2:08

Firebase Functions - BIG PICTURE8:03
Create & Deploy Our First Firebase Function9:02
Firebase Console Functions0:56
Firebase Config File for Functions3:55
Function Index.js File Setup1:17
Firestore Function - onCreate6:12
Firestore Function - onDelete5:13
Firestore Function - onUpdate5:43
Create a Firestore onUpdate function for recipes to track publish state changes, updating a published count with increment/decrement and deploying to test in the web app.
Scheduled (cronjob/crontab) Function - Publish Recipe6:49
NOTE - Install Dependencies0:18
Install Dependencies0:57
Express API Foundation6:26
Utilities.js File8:04
Create (Post) Recipe Express Endpoint4:55
Postman - Test Post Endpoint3:21
Read (Get) Recipe Express Endpoint - Part 13:59
Read (Get) Recipe Express Endpoint - Part 25:36
Postman - Test Get Endpoint4:10
Update (Put) Recipe Express Endpoint4:27
Postman - Test Put Endpoint2:30
Delete (Delete) Recipe Express Endpoint2:34
Postman - Test Delete Endpoint1:19
Firebase Functions Automatic Deploy with Github Actions4:18
API URL Environment Setup2:00
FirebaseFirestoreRestService JavaScript File1:41
Create - FirebaseFirestoreRestService JavaScript File3:40
Read - FirebaseFirestoreRestService JavaScript File4:54
Update - FirebaseFirestoreRestService JavaScript File1:24
Delete - FirebaseFirestoreRestService JavaScript File1:21
Web App - Hookup Create Endpoint2:18
Web App - Hookup Read Endpoint2:39
Web App - Hookup Update Endpoint1:09
Web App - Hookup Delete Endpoint0:58
Full Pagination Web App - Part 14:16
Full Pagination Web App - Part 25:27
Firebase Functions Section Summary2:28

Requirements

Basic javascript
Basic HTML
ES6 Imports / Features

Description

Requirements

Basic familiarity with HTML, JavaScript, and CSS.
NO knowledge of Firebase or other cloud services is required.

Description

Firebase is an easy-to-use cloud platform for hosting web apps, running cloud functions, database storage, storing files, and state-of-the-art user authentication. Additionally, Firebase makes it easy to create a full-stack web app with ease.

If you want to stand out as a JavaScript Full-Stack Engineer, you need to learn how to leverage the many tools required in cloud environments with on-demand deployability.

By the end of watching this course, you'll be able to:

Deploy Reliable, Fast & Secure Web Apps with Free HTTPS
Create Cloud Functions in Node Javascript
Fully Featured User Authentication - Account Registration, Account Logins, 3rd Party OAuth 2 (login w/ google, Facebook, Twitter, etc.), and more.
Leverage Firebase Cloud Firestore NoSQL document/collection style database with Full-CRUD operations
Securely Upload Files & Blobs to Firebase Storage Buckets.
Actual Free Tier (compared to competitors)
Build & Deploy Production Backends for Web & Mobile Apps
Excellent for prototyping personal projects
Learn from an Experienced Senior Software Engineer & Software Engineer Instructor with years of Firebase under their belt
Includes Section 7 that covers the LATEST Firebase v9 Web JavaScript SDK for the best performance and smallest bundle size!

With this course, you'll get downloadable source code.

PREREQUISITES

This is a course for all levels

No previous Firebase experience is needed just basic familiarity with JavaScript, HTML, and CSS.

You don't need previous experience with cloud services/platforms at all. We've got you covered!

---

Who this course is for:

Beginner and intermediate front-end developers new to Firebase and Cloud Services.
Developers who want to improve theirs skills and take their careers to the next levels.
Front-end developers who want to learn how to deploy fully secure web apps with full featured services from databases, file storage, cloud functions, and user authentication.
Front-end developers who are familiar with other cloud services but want to learn Firebase

Who this course is for:

Coding Dev BootCamp Students & Graduates
Professional Software Engineers looking to pick up a new skill

Learn Firebase Core with React

What you'll learn

Explore related topics

Course content

Introduction14 lectures • 32min

Firebase Web App Hosting7 lectures • 20min

Firebase Authentication15 lectures • 38min

Firebase Firestore33 lectures • 1hr 56min

Firebase Storage9 lectures • 34min

Firebase Functions36 lectures • 2hr 14min

Upgrade to V98 lectures • 35min

Requirements

Description

Who this course is for: