Build an expense tracker web app with Firebase and React

[@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.

[@user-yu6nh1mc7l]

I am stuck at the same position, tried debugging it for an hour then saw this comment.. 🙈

[@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

[@haldousuxley]

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

[@guillebril]

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

[@ecostaneves]

Now the link repo is working guys 👏🏽👏🏽

[@PeterTroutman]

Literally exactly what I wanted to learn this weekend

[@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 !

[@ihateorangecat]

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

[@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 .

[@kenken-pp5lc]

This Video is Fire!!!

[@samuelasiabaka365]

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

[@shahinakther4405]

Thanks the kind information

[@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

[@farantariq4295]

Fix git repo please 404

[@RichardHyndman]

Thanks, we've fixed it now!

[@Tonkuz]

@@RichardHyndman it’s still not working

[@zakaria5775]

Thank you so much for this interesting course👏🏻

[@warehousevirtuals]

That is what i need thank you

[@rahulgupta7720]

Such a nice and informative video!!1

[@gregcurlewis8751]

Can we also have this for angular please?

[@nihar8783]

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

[@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?

[@chrisl_ca]

awesome video!

[@hubertryan]

Very nice!!!

[@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 😄

[@CarlJin]

dude that was helpful

[@THEARPE07]

dude ??? LOL

[@sahilthakur6979]

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

[@6_feet]

cloud firestore has some errors. plz help

[@02_e_bhandarge_piyush69]

use it in native mode

[@raktim24]

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

[@havefun5519]

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

[@chrisl_ca]

look forward to the next videos

[@annielouise1141]

i m not able to add reciept

[@alexanderbarishenko]

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

[@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

[@Tonkuz]

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

[@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 👍

[@ArturoBandiniWannabe]

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

[@kamaravichow]

Google ditching angular and making a react tutorial 😂

[@thebabbage1103]

Useless tutorial, all mention lib are outdated. Waste of time. High recommend, dont spend time on it.

[@cdavidmore]

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

[@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!!

[@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.