Build an expense tracker web app with Firebase and React

Поділитися
Вставка
  • Опубліковано 12 лис 2024

КОМЕНТАРІ • 69

  • @guillebril
    @guillebril Рік тому +6

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

  • @niklasopf
    @niklasopf Місяць тому +2

    Thank you Andrea and team for the great video!

  • @ecostaneves
    @ecostaneves 2 роки тому +2

    Now the link repo is working guys 👏🏽👏🏽

  • @PeterTroutman
    @PeterTroutman 2 роки тому +6

    Literally exactly what I wanted to learn this weekend

  • @doogan91
    @doogan91 Рік тому +7

    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.

    • @RZahir-c8o
      @RZahir-c8o 3 місяці тому

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

  • @ivannguimtsa1856
    @ivannguimtsa1856 2 роки тому +16

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

    • @roland97008
      @roland97008 2 роки тому +1

      still a 404

    • @mariogreco729
      @mariogreco729 2 роки тому +1

      Same!

    • @RichardHyndman
      @RichardHyndman 2 роки тому +2

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

  • @havefun5519
    @havefun5519 Рік тому

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

  • @Sebastien_fr95
    @Sebastien_fr95 2 роки тому +7

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

  • @kenken-pp5lc
    @kenken-pp5lc 2 роки тому +3

    This Video is Fire!!!

  • @shahinakther4405
    @shahinakther4405 10 місяців тому +1

    Thanks the kind information

  • @cj1871
    @cj1871 Рік тому +4

    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?

  • @kushagradiwan1258
    @kushagradiwan1258 Рік тому +1

    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
    .

  • @haldousuxley
    @haldousuxley Рік тому +3

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

  • @rahulgupta7720
    @rahulgupta7720 Рік тому

    Such a nice and informative video!!1

  • @GermanoGiuliani
    @GermanoGiuliani 2 роки тому +4

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

    • @RichardHyndman
      @RichardHyndman 2 роки тому +1

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

  • @zakaria5775
    @zakaria5775 Рік тому

    Thank you so much for this interesting course👏🏻

  • @warehousevirtuals
    @warehousevirtuals 2 роки тому +1

    That is what i need thank you

  • @chrisl_ca
    @chrisl_ca 2 роки тому

    awesome video!

  • @PublicUser2000
    @PublicUser2000 7 днів тому

    I solved the firebase deploy problem by changing the build script to next build && next export.
    Now, the app starts out well but I get a 404 error when the url changes to dashboard after successful login credentials are entered. Then ONLY when I hit the back arrow on the browser the dashboard page opens.
    Is anyone else seeing this odd behavior?

  • @samuelasiabaka365
    @samuelasiabaka365 Рік тому +2

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

  • @niksave
    @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?

  • @hubertryan
    @hubertryan 2 роки тому

    Very nice!!!

  • @chrisl_ca
    @chrisl_ca 2 роки тому

    look forward to the next videos

  • @CarlJin
    @CarlJin Рік тому

    dude that was helpful

  • @gregcurlewis8751
    @gregcurlewis8751 2 роки тому +1

    Can we also have this for angular please?

  • @nihar8783
    @nihar8783 2 роки тому +1

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

  • @sahilthakur6979
    @sahilthakur6979 Рік тому

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

  • @jslee423
    @jslee423 Рік тому +1

    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
      @jslee423 Рік тому +2

      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
      @carlosamoreno9013 Рік тому

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

    • @kamaljeetsharma3678
      @kamaljeetsharma3678 Рік тому

      @@jslee423 thank you sir

  • @raktim24
    @raktim24 2 роки тому

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

  • @MrDuff158
    @MrDuff158 2 роки тому +1

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

    • @RichardHyndman
      @RichardHyndman 2 роки тому

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

  • @carlosamoreno9013
    @carlosamoreno9013 Рік тому

    min:44 dying for the no-joke joke 😄

  • @alexanderbarishenko
    @alexanderbarishenko 2 роки тому

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

  • @annielouise1141
    @annielouise1141 Рік тому

    i m not able to add reciept

  • @farantariq4295
    @farantariq4295 2 роки тому +13

    Fix git repo please 404

    • @RichardHyndman
      @RichardHyndman 2 роки тому +1

      Thanks, we've fixed it now!

    • @Tonkuz
      @Tonkuz Рік тому

      @@RichardHyndman it’s still not working

  • @bankoledada
    @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

  • @kamaravichow
    @kamaravichow 2 роки тому

    Google ditching angular and making a react tutorial 😂

  • @ecostaneves
    @ecostaneves 2 роки тому

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

    • @6_feet
      @6_feet 2 роки тому

      exactly. I've been having the same error

    • @6_feet
      @6_feet Рік тому

      did you get to fix it?

    • @6_feet
      @6_feet Рік тому

      kinda in the same situation help please

    • @ecostaneves
      @ecostaneves Рік тому

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

    • @6_feet
      @6_feet Рік тому

      Ok thanks 👍

  • @Tonkuz
    @Tonkuz Рік тому

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

  • @ArturoBandiniWannabe
    @ArturoBandiniWannabe 2 роки тому +1

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

  • @cdavidmore
    @cdavidmore 8 місяців тому

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

  • @mindacid3274
    @mindacid3274 12 днів тому

    this is not beginner friendly at all, u rush too fast!

  • @thebabbage1103
    @thebabbage1103 3 місяці тому

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

  • @TMac117
    @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
      @TMac117 Рік тому +1

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

  • @otockian
    @otockian 2 роки тому +5

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

    • @JavierSuzuki
      @JavierSuzuki 2 роки тому +1

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