Skip to content
UdemyReactPaid courseIntermediate levelCertificate

React.js & Firebase Project - ReactJS 18, Firebase 9 Project (Udemy.com)

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

Created by: Dr. Sahand Ghavidel

Last updated January 2024

icon
What you will 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

How it compares

Against the other 173 rated Udemy courses in React on CourseDuck:

  • Rating4.5 out of 5higher than 53% of them
  • Reviews730#71 of 174 by number of reviews
  • Length17.1 hourslonger than 56% of them
  • Last updatedJanuary 2024earlier than 50% of them

icon
Course Description

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.

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Dr. Sahand Ghavidel

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from Faculty of Engineering and IT, University of Technology Sydney.

Sahand has researched for more than 10 years about artificial algorithms and  optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended to many international conferences.

The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with CiteScore of 5.79 in recognition of his contributions added to the quality of the journal.

Sahand has more than 15 years of programming experience. The first programming language he learned was visual basic when he was just 12 years old. Since then, he has made hundreds of websites, and apps with different programming languages like JavaScript and Python.

icon
More courses by Dr. Sahand Ghavidel

$84.99

$79.99

$64.99

$10.99

$49.99

$10.99

icon
More React courses

$139.99

$94.99

$74.99

$69.99

$89.99

$99.99

icon
Reviews

4.5

730 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Alifa Al Farizi on 1/24/2024

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.

By Ursula H on 11/24/2023

Project is really good for learning, but execution of teaching can be cleaned up. There are a lot of the stop-and-go pauses (i.e. some random bug comes up and he spend 2-3 mins with long pauses trying to figure out what went wrong, or he's trying to explain a concept but pauses a lot and glosses over a lot of details), which really killed the momentum. I think the instructor can benefit from writing out key points if he's trying to explain concepts or write out a rough transcript. Course is okay. He really hand-holds you through writing every line, but he doesn't really explain the "why" he's searching for things or how he's solving an error. Just shows you the solution or writes the code down and his "explanations" are re-reading what he just wrote (again, not explaining concepts). I think explanations can benefit from explaining in a more macro-sense and connecting to future projects/features that someone would encounter in their career. Captions also don't help make you go through this course any faster. There's a lot of typos in his speech-to-text transcription. (i.e. "tailwind" gets transcribed into "terr0rist")

By Gary M. on 11/18/2023

Too advanced for a beginner, I can NOT reccomend this to anyone that is not familiar with REACT already. This is a really bloated broject also, where things were made unneccasarily complicated. The Create listing and edit listing pages were a mess and damn near impossible to follow, had there not been a completed github for them I would have had to rewrite them using a different method. Good luck!

By Nidhi Yashavanta on 7/1/2023

I must say the course was an exceptional learning experience.It provided a comprehensive understanding of building a real estate application using the latest technologies, including React.js 18, Firebase 9, and Tailwind CSS 3. Dr. Sahand Ghavidel's teaching style is clear, concise, and engaging. His explanations were easy to follow, even for someone like me who had limited prior knowledge of React.js and Firebase. Building a Realtor clone from scratch was not only fun but also incredibly useful in solidifying the concepts taught. I'd like to thank instructor for making such an amazing course.

By Binh Nguyen on 6/7/2023

Recommend for people who already have studied React. This is the course that I expect to learn and practice my React skills like I have studied some fundamental React theories and did homework; however, I didn't know how React is applied for real projects. This course is extremely useful for me to revise and review what I have learned before. I wish the instructor can make the lecture video clearer without using a blur tool, though the screen is good for the eyes.

By Anakor Joshua on 5/6/2023

This is a very practical course and would be very useful for people who know a bit about React and is looking to get a practical experince in ReactJs or adding projects to their portfolio. This is also very useful to people learn by actually practical experince

By Agus Siswanto on 4/21/2023

Awesome project based React course! I like the way this course is presented. Sahand starts with creating the UI component from scratch followed by creating it's functionality, all delivered with a detail and clear explanation. I learn a lot and feel more confident in using React, Tailwind and Firebase. You need to understand at least the basic React Hook concept like useState, useEffect, to follow this course smoothly. At the end of each chapter, Sahand commits the lines of code he just wrote to GitHub and reviews them again. This is quite helpful in understanding and getting used to the flow of using the version control system for beginners. Thanks, Recommended course!

By Aazil Riyaj on 4/6/2023

I found the course content to be extremely useful, as it covered a range of topics that were both relevant and practical. Your teaching style made it easy for me to learn and understand the concepts, and I appreciated the clear and concise explanations provided during the lectures. It was evident that you have a deep understanding of the subject matter, and your passion for teaching was inspiring. Through your course, I have gained a solid understanding of topics covered, including Tailwind CSS, React, and Firebase. These skills have already proven to be invaluable in my work, and I am excited to continue using them in the future.

By Victor on 2/18/2023

Prior to this course, I had no solid foundation on ReactJs as I was just starting out, but at the completion of this course, I could hold on my own without much difficulty in React. Now, I'm much more better at ReactJs and I can attribute a greater part of my success with this technology to Dr. Sahand and his amazing teaching skills.

By Jeffery Hammer on 10/20/2022

Excellent course. I liked that the instructor explained what we would be doing prior to starting the lecture. When learning a new language, it is really important that the code presented works. I am was pleased that all the code worked as shown. You may have to let the instructor find mistakes that he has made, but the fact that he left them in the video to show what they were and how he fixed them was more real life. If you are looking for a great course to learn about React / Firestore & Authentication, I would highly recommend this course.

Showing all 10 reviews on CourseDuck

Read all 730 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 90 / 100