React Expense Tracker App - Build & Deploy A React Firebase Beginner Project

In this video we build an expense tracker app using react and firebase.

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

EXPENSE TRACKER TIMESTAMPS
00:00 | Intro
01:19 | Project Demo
06:16 | Creating the React App
06:38 | Project Organization
09:47 | Package Installation
10:44 | Initializing Firebase
12:44 | Setting up Firebase Authentication
17:39 | Setting up React Router
21:56 | Creating the Auth Component
32:05 | Expense Tracker Page
38:46 | Setting Up Firestore
17:57 | Adding style to the project
26:00 | Practice Exercise: Adding more functionality
26:27 | Solution to Exercise
38:50 | Routing Authenticated Users
41:39 | Deploying the Application

#reactjs #firebase

[pedrotaq]

WHAAAT It's already too much that we share the same name, and that we look somewhat alike, but the fact that you posted an entire tutorial about the same project i've been dreaming of (and the reason I started watching your channel in the first place) is beyond incredible!!

Thank you so much, you're the best react teacher I've seen!!

[oloyang]

Hey Pedro! Have to say your tutorials have been extremely useful. You really have a way of simplifying concepts in React.
I was wondering if you could make a tutorial on react window or react virtualized? I'm currently doing a project where I'm displaying 250 countries on the page. I'm using grid-template-columns repeat autofill with minmax size. It's all really responsive when changing screens but when I try switching between light and dark mode the performance really takes a hit. I've tried getting react window and virtualized to work, but unsuccessfully. There really isn't any good tutorial on displaying grid with a lot of items. Keep up the good work bro! You're an inspiration!

[pedrotaq]

All done and dusted, currently looking into ways to add a custom domain and new features. Thank you so much! Your channel has the best React JS tutorials in all of youtube. Cheers!

[andreyzinchenko]

Hi Pedro,
it's useful, thank you!
Could you consider a new proj to implement?
Consists of 2 modules:
- Nextjs 13 full-stack module, running some services for a customer (say, a user app)
- AI LLM module, specifically trained/indexed for the user app, used by dev/test/support teams to evolve/maintain the user app (let's call it a side-car app).

Side car app requirements might be as follows:
1. UI for pts 2-5 below.
2. Further enhancement/development of the user app according to customer's new requirements (input to the side-car);
3. Searching docs on the user app codebase (funcs, classes, etc)
4. Creating test cases for the user app
5. Analizing the user app logs (maybe reacting in real time, changing the app's settings, re-loading, etc.)

In the future if we learn how to create such supplements for user apps I beleve we make a huge difference in automation..

[kk]

Looking forward to your Next.js full course Pedro🎉

[ravindrapunekar]

Congrats on graduating🥳🥳
and Thank you for such amazing projects.

[givygbn]

Thanks for this project tutorial it will add some weightage in our resume ❤

[kk]

I really love your video Pedro! I hope you will make more Nextjs and MERN videos <3

[VladyslavDihtiarenko]

I like your straightforward explanation! In 2 hours I've mastered firebase auth and database, which is cool. I'm also going to add Typescript, shadcn/ui with Tailwind, and will think about the other functionalities, such as expense/income categories, fade in/out animations, grouping transactions by date, sorting transactions, dark mode and maybe I'll come up with the other ideas :)

[rishabh]

thank you so much for this amazing tutorial
appreciate it, pedro

[agpcreation]

thank you for this tutorial, can you make a simple library management?

[lnudxbn]

hello, i really love the video
but why didn't you include a delete button to clear out the previous transaction and also include the date or its monthly

[mftv]

Lot of love from Africa bro thank you for educative content

[imadel]

We miss you bro !

Great content as always 👏

[HighTechGeeks]

This was great video i was able to follow and build this app.

[mveuzqp]

Bro you the best in the world 🌎 thank you for everything 🙏 😊

[joaoarthurbandeira]

Hey Pedro, for NextJs, do you recommend deploying in Firebase or Vercel? Also, can i have my database in Firebase's firestore but deploy my website in Vercel? Are they the same in terms of performance? Finally, how can i add custom domain in firebase? Thanks!

[joaoarthurbandeira]

Hey, Pedro, also how can i turn the 'firebaseConfig' values into environment variables in a secure way? If i say, for example, apiKey: (which is definied in my '.env.local' file), would that protect it in any regard? Because i heard that when you put the 'NEXT_PUBLIC' prefix at the beginning, it still exposes the value...Would firebase's 'App Check' or Google cloud's 'key restrictions' be a good way to protect? Thanks!!

[L.TChannel]

Thank you Pedro for the amazing project. It is a perfect example of showing how to connect react and firebase, hope to see you to have more video.

[wei]

i think you cut out the portion on what we select after we do firebase init. not sure which one you chose