React Firebase Tutorial | AUTH - CRUD - Image Upload
Vložit
- čas přidán 27. 07. 2024
- Firebase 9 React authentication, crud operation, image uploading to Firebase storage. Firebase Crash Course for beginners.
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code: github.com/safak/youtube2022/...
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
0:00 Introduction
01:06 Installing Firebase to a React App
05:07 React Firebase Authentication
10:26 React Firebase Login
17:19 React advanced auth with Firebase
30:28 Firebase Crud: How to create data?
44:10 React upload file to Firebase Storage
54:50 Firebase Crud: How to fetch data?
01:00:46 Firebase Crud: How to delete data?
01:04:10 Firebase React Real-time data
01:10:32 How to use Firebase query?
01:27:16 Outro - Věda a technologie
I've been learning React from many youtube channels and honestly your tutorials are the best. Straight to the point, high density of information and clear explanations. Thank you Lama!
All I can say is THANK YOU!!! YOU ARE TRULY A MASTER AND A LEGEND WITH REACT AND TEACHING!! MUCH RESPECT!!
This is what I've been waiting for. Liked for later review. Thanks for the tutorial.
I’ve been waiting for this! Thanks for sharing. It is very helpful for me as a beginner to React. As you said in the video, I also agree with you. React Hooks crash course would be great for your next content 👍🏻👍🏻
Thanks for the course from Poland. You are a great teacher :)
Absolutely amazing tutorial! I can say you are my the best teacher! I learn a lot of things from you! Thanks a lot!
Hey thanks so much!! I've been searching all over youtube for a way to query my data. Finally stumpled upon a video that shows how to do so. Thanks again for showing the get data website!
One of the best firebase and react tutorials. Thank you.
Awesome, I'm improving my skills a lot thanks to you dude.
Hi {Lama || Safak}😅 Your videos have been really helpful for me. After learning the concepts of MERN stack, I have been looking for real-world projects and I found your channel. These projects have really helped me learn how to implement hooks, context and all the other stuff. Truly said, when the student is ready, the teacher appears 😁
I really want to show some support for you but I can't do it right now because I am a student and still in the learning phase. Once I get to a decent position in my career, I will return here and support you as a gesture of thanks. Promise !! 🤞
I was waiting for firebase tutorial from some great teacher and here it is... Thanks
Literally I was Searching for this from yesterday! And It Came... Thanks A Lot Sir ❤️
Thanks for making this video. I really love this video. It made me understood firebase more in advance. Thank you!!
Great work Lama ! Super usefull for Uni students
Finally some tutorial that's not rushed, outdated or 30 hour long.
thank you for keep updating this project, thank you lama, really appreciate this.
This is the best tuturial on the youtube , The developer always explaoining what are we doing and why we did this that was really helpful :) THANKSS
AMAZING tutorial !!! I have finished this one and I have learned ALOT !! Thank you very very very muchhhhhh
Earlier I have gone through some React Tutorials, however this is the best teaching experience I had. Also please i request you to do some tutorials on React Native
Thank you lama dev. I'm learning a lot watching ur videos. .. I hope you also make a video creating a user Authentication with Roles using firebase
This is amazing! Have you ever thought of programming a blog system full stack or MERN with react and nodejs? I think it would be great!
You are great, providing free source to learn
One of the best content on web, Thanks for your efforts
You make my day lama 🔥
Awesome again. Appreciate to do also short video for Next.js and firestore
Kardeshim cok yardimci oluyon , tesekkur ederim.
Thanks bro, your videos helps a ton
Great Firebase - CRUD tutorial
Nice, man !!!!!! Thank for that content !!
this is an amazing tutorial, thank you so much :)
abi verdiğin çok büyük bir hizmet, içeriklerinde çok kaliteli teşekkürler
Thank you very much.Your tutorial is masterpiece :)
Love it, thanks for sharing bro 👍
i'm so greatful to saw this video,
thank you very much.
perfect, avesome info for beginner dev
I've watched the whole video, and your videos are amazing! If you could make finance or real estate type of app, that would be great
Thank you for this great tutorial ❤
4:20 - hiding API key using env
17:19 - Advance Auth (useContext/useReducer)
59:20 - Adding the doc id to the notes array
hey lama, i do love your tutorials and i'm just wondering why not use firebase's onAuthStateChanged to handle your currentUser instead using localStorage? dispite the unsafety of localStorage
This tutorial is amazing, especially the way you're using state with context. Which do you prefer these days? Redux toolkit or context with useReducer?
Super fan of your videos ❤️
Exactly what I was looking for
I always support u Ms.lama dev 🔥🔥🔥🔥🔥🔥🔥🔥
Thank you Professor Lama.
These is amazing video thanks so much for the great content
Thank you for your interesting tutorial !
That is a great example and thanks for sharing your knowledge. Do you think you have time to show how to register a user in a different way? For example, instead of manually entering the fields, can you do it using a bar code scan gun? or a QR code scan gun? Thanks, if you can and have time. In any case, thanks for all your examples and explanations!
Dude you killin' it! thx
Fantastic tutorial!!
Thank you for this! Super cool video! A+++
@Lama Dev, your tutorials and coding style are great, you make everything seem simple and relaxed. I enjoy all of your content. One issue with this tutorial I have though is: if a user is not logged in but tries to access an compent from a link from the outside, instead of rerouting to '/' in the RequireAuth, I get a console error that the protected component tried to render and since there is no user data to access, it crashes. Now if I do auth via Firebase getAuth(), if solves the issue, but when you page refresh it ends your session. What is a possible solution for this?
You helped me a lot to learn react and get a job as react Developer. Please make a video on protected router using REST api
Lama, you're simply the best ReactJS tutor I have seen atleast here on CZcams. With your courses, there is not a single boring moment. Everything is simple and straight to the point.
Let me tell you for free, I owe my developer journey and successes to your courses.
Thank you chief. I hope I get to meet you some day.
LAma is genius
Thank you for amazing information. Please show an tutorial on firebase access controls with similar application.
awesome go ahead react firebase videos
And as you can see, it's a great tutorial
Good Learning Experience!!! Lama. If possible can you make any video tutorial using Breadcrumb Navigation explanation.
Thanks for this great knowledge. Please kindly talk about Strapi with the dashboard. thanks
my friend it's not far to get 100k sub wish you luck this video give me some knowledge of firebase and i think for 540 people also & i will be waiting full tutorial
Love you from Bangladesh. I am One of your fan.
Nice tutorial. Thank you. What do you think guys. Firebase or Mongodb?
Thk u lama dev , u very well ❤️❤️❤️
Thank You. I really appreciate it.
Great tutorial again! Kindly let us know how to secure our React-based websites?
I loved the video. I'm just starting a small project using firebase. But I would like to see on your next videos how to secure authenticate users using firebase and node js and react. Not storing the user details or token on the local storage because it's not secure, but in the backend using http only cookies or session. Thank you.
Ya this is best suggestion
Will love to see this too.
Love you man ❤
Awesome dude 👍🇳🇵
Perfect! 👌🔥
LamaBest ✊🏼
Thanks a lot Lama, just wonder how would you upload multiple files ?
Value value simply value! Thank you 😊
👆Send a direct message for help 🆙 ⬆️..
you are awsome bro..❤️❤️❤️
Very awesome video! Please can you do a tutorial on how you can use this dashboard to manipulate data on a front end ecommerce store
perfect 🔥🔥
Where's outro?! Great tutorial as usual :)
Hi Lama,
Can you help me out with how we can avoid concurrent editing? Or is there a way to show other users that USER A is editing or on this entry?
Hey Lama Dev! I love your tutorials! Super informative! I have a question: do you have a tutorial where you discussed the state of component (e.g. visible or hidden) based on user role ? Thanks a lot!
just ternary operator it would be fine? I wonder about the best way about this too
@@chewannuramirah3248 hello i did some digging, and yes ternary operators are the way to go, but implementing it can be done in conjunction with custom claims from firebase. I suggest you check the firebase authentication playlist from the net nonja it's the most complete one i could find.
Hey lama !;) thank you for tutorial but i have one question : Is it safe to store user data in local storage? in real applications it is also stored like this?:) thank you :)
Please Lama, Create a Node API using Firebase Admin. Pls pls pls... You're so great.
can you please make a separate tutorial for how to store fields and files in mongdb(MERN).
Could you please continue with multiple auth and role wise permission in 2nd part?
Big fan of you from india
Why only 96K subs man!
we want moreeee
Wow 🤩nice, hello sir can you make a attendance system with qr scanner in mern stack
Lama is my bible
Hi Lamadev can you implement role based Auth in this application like user admin moderator
This was such an awesome video, I love all your videos you have asuch a great way of explaining and demoing things. Do you have a video or somewhere to send me for the Update/edit of the single page. I'm can read the data from Firebase but I'm struggling to dynamically render the data based on a sourcefile
Thank you sir😘😘
Hi Lama Dev, I want to know why you add db, storage constants in separate firebase file please. Is calling getDatabase getStorage in different components affect performance?
Thanks😍 kindly do a Mern stack e-commerce and connect it with this dashboard.
Perfect👍
Nice Project ...
i was looking for the update function on CRUD i hope you make one using this ui
error at 29:49 replace line 5 of AuthContext.js with currentUser: JSON.parse(localStorage.getItem('currentUser') || "{}"),
Hi,
How did you set rule for storage? When I put allow read, write: if request.auth!=null, then I get Permission denied when getting image from firebase storage. I just want authorized user get the image.
Hi, Thank you for providing detailed project from design to implementation. I want to ask in your status you enter status in db schema separately, If I have a product with some id whose status I've saved as "Purchased" in my products inventory but then I have sold that product that with the same id then the status should be "Sold" of that product and show disable in inventory.
Will be greatly thankful if you will help me regarding this context.
👆Send a direct message for help 🆙 ⬆️..
Is it ok to use Sublime rather than Visual studio or visual basic?
Hi Lama! I really love this tutorial. However, I couldnt get update part to work with the formSources.js, i want to store the data i get from Firebase to defaultValue but I couldnt. Could you please help me :)
Can u add drop Down menu in exiting sidebar...plz i followed the first video and completed 🙂.
Lama, please when will you start react native course