React Expense Tracker App - Build & Deploy A React Firebase Beginner Project
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- The first 1000 people to click on the link will get 1 month free trial of Skillshare skl.sh/pedrotech08231
In this video we build an expense tracker app using react and firebase.
Code: github.com/machadop1407/expen...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
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 - วิทยาศาสตร์และเทคโนโลยี
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](/img/n.gif)
The first 1000 people to click on the link will get 1 month free trial of Skillshare skl.sh/pedrotech08231
Please create an app where people can download images. Without API. Like a gallery but where people can view images and download it
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!!
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!
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!
Great to hear!
Looking forward to your Next.js full course Pedro🎉
Congrats on graduating🥳🥳
and Thank you for such amazing projects.
thank you so much for this amazing tutorial
appreciate it, pedro
Thanks for this project tutorial it will add some weightage in our resume ❤
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..
Thanks a lot man!
I really love your video Pedro! I hope you will make more Nextjs and MERN videos
This was great video i was able to follow and build this app.
Very helpful content. Thank you!
loved your video
thank you for this tutorial, can you make a simple library management?
Awesome tutorial!
great project
Bro you the best in the world 🌎 thank you for everything 🙏 😊
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 :)
Did you make it work ?
Thank you so much 💜
Thanks for the video .
Great video! Thanks for sharing! 😉🔥
Thanks for watching!
We miss you bro !
Great content as always 👏
I appreciate that! Happy to be back :) Now im officially working full time and graduated college so I have more time to plan my vids!
@@PedroTechnologies ❤️
thank u so much, god bless you
DAMN NICE
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
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.
Lot of love from Africa bro thank you for educative content
Thank you!!
Proud of you my bro
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!
❤❤, More projects on react + Firebase , and MERN
Thanks a lot for the video Pedro!!! If you have free time pls make MERN tutorial Pedro💯
great video
i think you cut out the portion on what we select after we do firebase init. not sure which one you chose
Hey, Pedro, also how can i turn the 'firebaseConfig' values into environment variables in a secure way? If i say, for example, apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY (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!!
So all the users will be storing their expenses in a single collection, just that each document will have a different userid? Wouldn't it be better if we made a separate collection for each user?
I think this video is good for beginners ...
Thank you :)
Is there a recomendation not to use CRA anymore? Isn't it?
which backend is used here??
if i delete the document it also delete the collection?
when i try to login using google popup it show an error Cross-Origin-Opener-Policy policy would block the window.close call.
what should i do please answer this question, Thank you
Can't see the transactions at 1:18
Uncaught Error in snapshot listener: FirebaseError: [code=failed-precondition]: The query requires an index.
Shows in my dev tools
I think you accidentally left out the part where you explain which features to install at around 17:28. What did you end up choosing? Thanks!
I do all of that in the end of the video :)
thank you for the quick reply! I'm watching it from start to end first, then I'll actually copy it.
Cheers man, have a good weekend!@@PedroTechnologies
why are you still using create-react-app instead of vite?
Tbh this is just cause I find it simpler to relate to a bigger audience. Since what i am teaching is more of the functionality and the react part of things, it shouldn't be that big of an issue. But i might use vite in future vids :)
this course is soooo complicated. i need to probably watch this 100 times to get it. hahahaha
Hahaha you mean complicated as my explanation is not clear or the topic in itself is hard? Either way I hope you enjoyed it :)
@@PedroTechnologies its complicated because im coding along with next.js and since the file structure is a lot different, its adds a layer of challenge on top of it. you explain everything very well, the reason i watch your channels is because your explanations are to the point at the same pace my brain can process :P. Would be great if you can translate this video to next.js since there are a lot of "client" and "server" components.
How to delete all document of a specific user
16:44 install firebase CLI
17:14 deploy to firebase hosting
21:04 Exact
Can you make nextjs full course and application thank you
This is already in the works ;)
Not sure if it makes much sense to use Javacript, everyone wants Typescript, plus why firebase and create react app? Wed learn much more if you taught modern tech, like Nextjs 13, or React with exprss and sql. Thank you.
That is a great point! Tbh I think every technology has its merit. Just bc NextJS is more modern then CRA, it doesn't mean everyone should stop learning CRA. I try to make different videos for different skill levels. This was more beginner (CRA, JS, firebase), but like the next one will be more advanced (MERN, TypeScript, State management)... I want to make content for everyone, but I get what you mean and I appreciate ur feedback :)
@@PedroTechnologiesOk thanks you just have endless firebaee videos on your channel, but none of the newer stuff most people actually want to learn. I feel like beginners will be fine with your previous firebae videos they are great.
I think it's time to write in Typescript by default..
Next vid is in TypeScript! I change it based on the difficulty of the project.
Thank you like bruh
hey i'm stuck at 1:17:00, my map function is not working for some reason and after looking over the code multiple time everything seems to be correct, would anyone happen to know why?
Hey there...I am facing the same error too.After enabling the index the transaction should be displayed..but only the currency alongwith the black dot is being visible...the description,transactionAmount and type are not being printed...by any chance were you able to resolve this issue...if yes then can u kindly tell me the error.
make sure u write transactions in place of transaction, I was doing the same error, but later figured it out
hey Pedro ,typescript projects
How can i delete transaction
Unfortunately, it can only be done from the database itself in this one.
1 project with mern please
Next video :)
@@PedroTechnologies 😳 really thankew thankew thankew sooooo much for that am beginner in that please make liken in which forget password or a if a user do something his name show that he do that am soo confused in that please
woww great.Thank youu🎉❤
Hey Pedro at 57:00 I am getting the error addDoc() "Function addDoc() called with invalid data. Unsupported field value: undefined (found in field userID in document transactions/ZryPQKuRKqLAXLECvv0g)
FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field userID in document transactions/ZryPQKuRKqLAXLECvv0g)"
hello i am having the same error wondering if you fixed it or know how too. Please let me know thanks
got the same thing too @@VictorSandoval-nq8hf
Check the index file inside the expensetacker folder. I had missspelling inside the onSubmit function @@VictorSandoval-nq8hf
i am also facing same problem can you help out
hey did you find any solutions if yes plss help?
is Express.js is used here???? pls reply anyone
its firebase..
51:13
Do you think AI will replace us ?!😢
No lol
❤❤❤ from.🇵🇰👍✌️
Could you work on the youtube like button... i wish i could give you a thousand Thumbs up on a click to make it 1198 brooo💣💢💥
..
the tutorial cuts in the middle and resumes idk where!!! wasted an hour on this
Nope it doesn't, worked well from start to end for me !
This is the most gay UI I have ever seen!
Create react app ewwwww
Vite master race
It makes no difference in the tutorial hahaha but since a lot of people are asking for vite, this might be the way to go. I don't use CRA on my own projects, I just use it in vids cause I assumed it would be what most people are familiar with. More videos on vite and nextjs coming :)
Hey Pedro I'm having an issue with the authentication after clicking on the "Sign in with Google" button. I'm getting this error: Uncaught (in promise) FirebaseError: Firebase: Error (auth//static/media/firebase-config.82c018796117d2e15dcc). I think it has something to do with "const results = await signInWithPopup(auth, provider);" since changing the auth value results in a different error. Could this be an issue with my Firebase setup?
Also when importing auth and provider from the firebase-config I have to import it like this for some reason or else I'm hit with an error: import { default as auth, default as provider } from "../../config/firebase-config";
@@bradleylim3558you can try using console.log and check at every step if everything is coming the right way or not then just use those things.
At 1:22:13 I'm getting error for {name}. Following is the error:
'name' is deprecated.ts(6385)
lib.dom.d.ts(27236, 5): The declaration was marked as deprecated here.
Unexpected use of 'name'.eslintno-restricted-globals
const name: void
@deprecated