Full-Stack Firebase Authentication & CRUD with React and Tailwind CSS | Build a Complete Web App!
HTML-код
- Опубликовано: 28 окт 2024
- Github repo for complete project - github.com/Cod...
In this tutorial, I will guide you through the process of building a full-stack web application using React, Firebase, and Tailwind CSS. Starting from scratch, I'll cover each step, from setting up a React app to implementing Firebase authentication and Firestore for data storage. Learn how to manage user authentication, create a robust context system, and set up secure Firebase rules.
We'll also add Tailwind CSS to enhance the visual appeal of your app after you set it up, making it responsive and stylish.
This tutorial also covers routing with React Router, creating context for user authentication, and implementing a complete user interface with various pages like Home, Login, Create Account, and a User Dashboard.
The Firebase integration includes setting up Firestore, creating a functions directory for universal CRUD operations, and configuring your Firestore rules. Watch as we create, read, update, and delete data seamlessly using Firebase Firestore. Explore the power of Firebase authentication functions for user sign-in, sign-up, and logout.
Throughout this tutorial, we'll test the functionality of our app, ensuring that routes, authentication, and CRUD operations work flawlessly. By the end, you'll have a fully functional web app, complete with authentication, data storage, and a blank slate ui to create sleek looking app. Whether you're a beginner or an experienced developer, this tutorial provides valuable insights into building modern web applications. Join me on this coding adventure and let's code!
Thanks a lot, huge help for my project! Great balance between detailed description of functional components and not-too-much reducer magic, so it can be easily extended and reapplied. There are a lot of similar tutorials, but they either do too much magic, or have insufficient functionality.
This is a great tutorial for react + firebase . Keep going.🎉🎉👏👏
man thank you so much, that was such an amazing tutorial.
Thank you! I really appreciate the feedback
cool tutorail bro, keep going
Thank you! Truly appreciate the feedback! It means a lot.
return () => {
unsubscribe();
}; why is the call to unsubscribe written in the cleanup function of the useEffect , we can call this just after declaration of the function "const unsubscribe = " within the function of useEffect, can you explain the usage? and thanks for the tutorial , very nice introduction.
Calling inside the useEffect like that will trigger it to run each time the current user is changed or auth status is updated. You can run it a number of different ways, but this acts more as a listening function to listen to the auth changes. You can run it outside and create a separate listening function, the reason I do it this way is because usually the auth change will trigger multiple events. So I can run those event functions inside to trigger on a page refresh or auth change. For example, if I need to get data for the user from other collections, or run any third party APIs I can call it inside the unsubscribe function that will trigger each time I need it to. It acts as a listening function that I can control on the front end without having to worry about unnecessary reads and writes.
Hi. Yes I want to ask, after this amazing video, how to make the app open on the register page (when a new user goes to the app). And then when the user is logged in, to start at the home page. I understand this might be super simple to do. But this is my first real tutorial on using React.
No problem! Thanks for the feedback! Really appreciate it.
To answer the question:
In the NonUserRoutes.jsx page change the lines
You taught very well. I followed every step and didn't encounter any errors. Is there any other way to contact you? It seems there is no delete system yet.
I’ll add a delete function tutorial
❤ I am from Indonesia. I'm looking for a way to create an application for data analysts
Can you pls make a video about how to connect components in the project because i tried to make connections between them with react-router-dom and it seems i made a mistake somewhere that i can not find so when i try to go to another component through Link button in App.jsx it gives me 404 error
Sure thing! I’ll put that down as one I need to make here soon. I’ll go over that.
👍👍👍
Nice but try to increase the size of your code editor
Will do!
can I get the source code?
Sure thing! Forgot to post it in the video, I'll get that updated. Here is the github link
github.com/CodeTega/reactFirebaseCRUD
This is a great tutorial except it is nearly impossible to read your screen.
I’ll make sure on my future tutorials to enlarge my text. Thank you for the feedback! Appreciate it!