Udemy

React.js & Firebase Project - ReactJS 18, Firebase 9 Project

Enroll Now
  • 4,872 Students
  • Updated 1/2024
4.5
(729 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
17 Hour(s) 5 Minute(s)
Language
English
Taught by
Dr. Sahand Ghavidel
Rating
4.5
(729 Ratings)
2 views

Course Overview

React.js & Firebase Project - ReactJS 18, Firebase 9 Project

React.js and Firebase portfolio project. Build Realtor (Real estate) clone using React js 18, Firebase 9, Tailwind CSS 3

NEW React.js 18 and Firebase 9 project.


Build Realtor (Real estate) clone using React js 18, Firebase 9, Tailwind CSS 3, and React router 6.


The best course to learn React.js, Firebase and Tailwind CSS creating a real estate website. In this brand new course, you are going to learn how to build the realtor clone using ReactJS version 18, Firebase version 9 and tailwind CSS version 3.


Welcome to the project where you'll build and deploy a realtor clone application using the newest version of react, Firebase and tailwind CSS. You'll learn how to develop a professional website and deploy it to the internet so that you can share it with your friends and potential clients or put it on your portfolio. In this brand new project, we going to create an stunning new listing section, custom categories, responsive design, listings cards, rent and sale pages, and most importantly listing pages where you can see the map and image slider. Realtor clone is the best modern fully functional real estate application that you can currently find. By building this single web app, you'll get the knowledge needed to build any website that uses CRUD operations including create, read, update and delete in react using Firebase Firestore database. You are going to learn Firebase auth for complete authentication and learn how to sign up or sign in the users using username and password and Google oAuth. Also, we going to add forgot password functionality using Firebase auth to let the users get the email with the link to change their password.


you'll be able to develop this website using the most in demand technologies today such as react.js, Firebase, tailwind CSS and with just a couple of other dependencies like leaflet and swiper js. We are going to add a map using leaflet packages, and use Google geolocation API to convert addresses to latitude and longitude values. We are going to  learn how to use Swiper.js latest version to add a super amazing image slider. and you will learn how to use react toastify package to create nice and customized notifications. and like all modern websites, you are going to create a beautiful spinner component and use it in all pages requiring loading effects. We are going to learn how create a reusable component such as a listing card that we can use in different parts of the website.


You'll build everything from scratch by watching this course. We're going to start simple and then we're going to move to more complex topics as we go alongside building this application. you'll learn react functional components and their re-usability, react file and folder structure. You are going to learn important react events like onChange and onSubmit event listeners. We are going to learn how to use useEffect and useState react hooks to control the states and fetch data from the Firestore database. Also, you are going to learn how to create routes, use useParams and useNavigate hooks using react router latest version version 6. We are going to work on creating private routes and custom hooks for protecting the important pages like user profile page. You'll achieve mastery using tailwind CSS version 3. and learn how to style the project using Tailwind CSS including how to add custom classes. And finally, we are going to deploy the website to Vercel to be able to share it with others or put it on your portfolio.


You might be wondering what are the prerequisites for building such an amazing website. You just need to know a bit of HTML CSS and JavaScript it would be great.


My name is Sahand, and I have over 15 years of programming experience.

I will be your instructor and answer any questions you may have in the comment section.

Course Content

  • 8 section(s)
  • 29 lecture(s)
  • Section 1 Introduction
  • Section 2 Installation and first template
  • Section 3 Authentication using Firebase auth version 9
  • Section 4 Profile page
  • Section 5 Listing page
  • Section 6 Home page
  • Section 7 Offers and category pages
  • Section 8 Deployment

What You’ll Learn

  • Create a React js project from scratch
  • Use Firebase auth for complete authentication
  • Use Firebase Firestore to store and fetch data
  • Learn how to sign up/in the users using username/password and Google oAuth using Firebase auth
  • Add forgot password functionality using Firebase auth
  • Work with latest versions like React js 18, Firebase 9 and Tailwind CSS 3
  • Learn the CRUD operations including create, read, update and delete using Firebase Firestore
  • Learn react router version 6 (latest version) to create routes, get the params and redirect
  • Learn how to create pages and routes in a react project
  • Learn how to use react toastify to create nice notifications
  • Learn to create private route and custom hook for protecting the user profile page
  • Learn how to create a beautiful spinner and loader
  • Learn important react event listeners like onChange and onSubmit
  • Create a reusable component such as listing cards
  • Create an image slider using Swiper js latest version
  • Add map to the page using leaflet and react leaflet packages
  • Learn how to deploy to vercel
  • Learn Google geolocation api and how to convert address to latitude and longitude
  • Learn how to use Tailwind CSS 3 to style a react project
  • Learn useEffect and useState react hooks


Reviews

  • V
    Vishal Gupta
    4.0

    thanku

  • H
    Harshana Prabhath
    5.0

    Great teacher! If you have completed the fundamentals of React and JavaScript, this course will give you a complete understanding of handling a project.

  • D
    Diyar Aydin
    4.0

    The course is well explained and understandable but is far too complicated for React beginners, especially the database functions for Firebase. Even though I already had experience with Angular, I simply had to skip some parts.

  • A
    Alifa Al Farizi
    3.5

    Good, -> explanation is good but sometimes when the teacher is thinking, it's also recorded and waste 3-5 seconds to wait the explanation. -> Video recording is good -> I was expecting optimized code too, there is some code that is repetitive which its good for beginner, but you may have to make it as reusable code too. So, we can expect that interns that learned from this course not only understand the study case but also how to write a clean code.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed