Build an expense tracker web app with Firebase and React

Andrea Wu will show you how to build an expense tracker web application using Firebase and React. In this video, learn how to use Firebase Authentication, Cloud Storage, Cloud Firestore, and Hosting to build an expense tracker where a user can create an account and log in, add, view, edit, and delete receipts.
Chapters:
0:00 - Introduction
2:29 - What is Firebase?
4:17 - Code Setup
5:33 - Firebase Console Setup
9:27 - Authentication
26:37 - Cloud Storage: Introduction, Setup, Adding a Receipt
33:41 - Cloud Storage vs Cloud Firestore
34:37 - Cloud Firestore: Introduction, Setup, Adding a Receipt
44:47 - Storage and Firestore: Editing a Receipt
50:04 - Storage and Firestore: Deleting a Receipt
52:19 - Hosting
52:59 - Final App
Resource:
Code repo → goo.gle/3VCEmmv
Catch more videos → goo.gle/FirebaseCodealong
Subscribe to Firebase → goo.gle/Firebase
#FirebaseCodealong

[@guillebril]

I've always been a fan of all video content the firebase team makes. Thanks guys! good job!

[@PeterTroutman]

Literally exactly what I wanted to learn this weekend

[@ihateorangecat]

thanks!!
please do more codealong videos like this, they're indeed useful.

[@ecostaneves]

Now the link repo is working guys 👏🏽👏🏽

[@zakaria5775]

Thank you so much for this interesting course👏🏻

[@kenken-pp5lc]

This Video is Fire!!!

[@doogan91]

This tutorial utilizes the library react-firebaseui, which appears to no longer be maintained and is not compatible with FIrebase v9. Tutorial was good, but I had to stop around the 18 minute mark as I could no longer code along with the host. It's been hard to come by a react + firebase tutorial that is up to date with firebase v9.

[@cj1871]

The process for creating the Firestore seems to have changed slightly, as the 'create database' option is replaced text stating 'This project is set up to use Cloud Firestore in Datastore mode.' and links to Google Cloud Console. Should we be setting up an entity in Google Cloud?

[@Sebastien_fr95]

Nice video! It could be nice aswell to have the same with react native !

[@rahulgupta7720]

Such a nice and informative video!!1

[@chrisl_ca]

awesome video!

[@shahinakther4405]

Thanks the kind information

[@warehousevirtuals]

That is what i need thank you

[@chrisl_ca]

look forward to the next videos

[@niksave]

the code to implement identification tracking in the profile section when a user changes their email address after registering, should that be done inside auth.js ? Or lets say profile.js file of the codebase? If it is in profile.js what sort of a code line should be written to implement tracking?

[@havefun5519]

Very clear, step by step, I think my first firebase + react app needs a big refactor.

[@ivannguimtsa1856]

Hey
Thank your for the video but the link to the repo is not available. It redirect me to a 404 page.

[@roland97008]

still a 404

[@mariogreco729]

Same!

[@RichardHyndman]

Thanks! we've updated the description now github.com/firebaseextended/expense-tracker

[@hubertryan]

Very nice!!!

[@gregcurlewis8751]

Can we also have this for angular please?

[@raktim24]

Can there be a comprehensive tutorial for react native as well.

[@GermanoGiuliani]

Any info on when the repo will be available? Would love to follow the video. Thanks a lot.

[@RichardHyndman]

Thanks Germano, we've updated the description with the repo now github.com/firebaseextended/expense-tracker

[@sahilthakur6979]

Can you make video on user IAM with custom roles and permissions.

[@CarlJin]

dude that was helpful

[@THEARPE07]

dude ??? LOL

[@haldousuxley]

cool but react firebaseui is not compatible with Firebase v10 anymore, also not supported by react v18 :/

[@kushagradiwan1258]

StyledFirebaseAuth is not working in mine. I ve cross verified and installed the required dependencies and yet it says. What is something I coould be missing. It is something we entirely import from react .!
'StyledFirebaseAuth' is not defined react/jsx-no-undef
.

[@samuelasiabaka365]

Can't even get the app to run, facing bunch of errors

[@nihar8783]

authorisation section would be appreciated,its the most confusing part of firebase

[@alexanderbarishenko]

after npm install node-modules size 16GB+ seriously?

[@annielouise1141]

i m not able to add reciept

[@jslee423]

Hi. Hopefully someone can help me. I'm trying to deploy my app but when I go to URL, I get a "Welcome Firebase Hosting Setup Complete" page. Am I missing something? Any help would be awesome! Thanks!

[@jslee423]

figured it out. For anyone else having this issue. I updated the build script to "next build && next export" which generates a folder "out" which you can then specify as the public directory when running firebase init hosting

[@carlosamoreno9013]

@@jslee423 This worked for me, not sure why it works, but it does! thanks!

[@kamaljeetsharma3678]

@@jslee423 thank you sir

[@MrDuff158]

I'm assuming the repo was accidentally left private or something? No sign of it at all.

[@RichardHyndman]

Thanks! We've updated the description now github.com/firebaseextended/expense-tracker

[@carlosamoreno9013]

min:44 dying for the no-joke joke 😄

[@6_feet]

cloud firestore has some errors. plz help

[@02_e_bhandarge_piyush69]

use it in native mode

[@farantariq4295]

Fix git repo please 404

[@RichardHyndman]

Thanks, we've fixed it now!

[@Tonkuz]

@@RichardHyndman it’s still not working

[@bankoledada]

not much of a developer - followed to the end and still couldnt get the view i wanted. thought it was the script policy on my laptop but resolved that and still hit a wall. Shame i had to delete this

[@ecostaneves]

I don't know for you guys, right after I attached Firestore Database, the app doesn't load :(

[@6_feet]

exactly. I've been having the same error

[@6_feet]

did you get to fix it?

[@6_feet]

kinda in the same situation help please

[@ecostaneves]

@@6_feet I quit ! I’ve switched to AWS amplify

[@6_feet]

Ok thanks 👍

[@Tonkuz]

First make sure that the git project working .No package.json .

[@kamaravichow]

Google ditching angular and making a react tutorial 😂

[@ArturoBandiniWannabe]

Why no love for Dart. Give us native Firebase Admin SDK. Dart is already capable enough for backend dev...

[@CesarDavidMorenoRamirez]

React firebase ui is dead!!!!!!!!!!!!!

[@TMac117]

Hmm I am hitting an issue with the redirect from the singin/login dialog. It logs in or signs up a new account and they exist in firebase but I get the message "No redirect URL has been found. You must either specify a signInSuccessUrl in the configuration, pass in a redirect URL to the widget URL, or return false from the callback."
const REDIRECT_PAGE = '/dashboard';
//config FirebaseUI
const uiConfig = {
signInFlow: 'popup', //signIn flow with popup rather than a redirect
signInSuccessfulUrl: REDIRECT_PAGE,
signInOptions: [
EmailAuthProvider.PROVIDER_ID,
GoogleAuthProvider.PROVIDER_ID
]
}
export default function Home() {
const router = useRouter();
const [login, setLogin] = useState(false);
return (

Expense Tracker

Welcome to Expense Tracker!
Add, view, edit, and delete expenses
setLogin(true)}>
Login / Register

setLogin(false)}>


);
}

[@TMac117]

signInSuccessURL.... NOT signInSuccessfulURL. That solved it.

[@otockian]

I would highly advise people to use react-firebase-hooks to make their lives significantly easier.

[@JavierSuzuki]

Any advice to consider when using react-firebase-hooks?
What are its Pros (in addition to simpler implementation) and Cons (if any)?
Thanks!!