Login Signup Form Firebase

Form validation on login signup and details page with React.js, Tailwind CSS and Firebase.

Demo Download

This app consists of total 4 webpages i.e. (Login page, Register Page, Form/Home Page, Profile Page).
For the frontend, I have used React.js with Tailwind CSS, react-icons, react-router-dom for navigating between the pages and react-toastify for notification pop-ups.
For the backend (authentication and database), I have used Firebase Authentication(google auth provider, github auth provider and email & password auth) and Firebase Firestore for storing the details of the user & storage for storing the profile pictures of the user.

Functionalities

When user go to the website, user will be redirected to login page first where user can login if have account registered or if not user can go to the registeration page where user can create his/her account. User can also login or register either using Google Account or Github Account.
Once a user get registered or logged in, user will be redirected to the home page(form page) where he/she can fill the form to create their profile. Here the submit button is disabled until the user uploads his/her profile picture. Once the user fills all the details and uploads the picture, a notification pops with "profile picture uploaded successfully" and button becomes enabled. Once the user click on it all the data gets stored in the firebase firestore and a custom modal shows up displaying message "Congratulations username, You have successfully submitted the form and will be directed to the profile page" and then user will be navigated to the profile page.
State of the app is managed using react-firebase-hooks so only if user is logged in then only the home page and profile page is accessible or else will be redirected to login page.
All components and pages are responsive i.e. works well on all the devices.
Form Validation and error handling is implemented i.e. you can only submit the form if all the input fields are filled, validate whether the email is registered or not, whether the password is correct or not. If any error occured during storing data or authentication it will be displayed using notification pop-ups.