Tutorialspoint

React.Js 18 and Firebase 9 Project

person icon Sahand Ghavidel Jirsaraie

React.Js 18 and Firebase 9 Project

Build Realtor (Real estate) clone using React.Js 18, Firebase 9, Tailwind CSS 3

updated on icon Updated on Oct, 2023

language icon Language - English

person icon Sahand Ghavidel Jirsaraie

architecture icon Development,Web Development,React JS

Lectures -29

Duration -17.5 hours

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 19,000+ top Tutorialspoint courses anytime, anywhere.

Course Description

React.Js 18 and Firebase 9 can be used to build and develop websites with minimum code. Through this course, you will learn how to create a real estate website by learning and using React.js 18, Firebase 9, and Tailwind CSS3.

Using the most recent versions of React, Firebase, and Tailwind CSS, you will develop and release a realtor clone application in this project. You'll discover how to create a polished website and publish it online so you can share it with friends and potential clients or add it to your portfolio. A magnificent new listing section, bespoke categories, responsive design, listing cards, rent and sale pages, and most importantly, listing pages where you can see the map and image slider will all be created for this brand-new project.

React.Js 18 and Firebase 9 Project Overview

Realtor Clone is the greatest contemporary, fully functional real estate app available right now. By developing this single web application, you will learn the skills required to build any website that performs CRUD activities, such as creating, reading, updating, and deleting in React using the Firebase Firestore database. For comprehensive authentication, you will learn Firebase auth. You will also learn how to register or login users using a username, password, and Google oAuth. Also, we'll add a forgotten password feature that uses Firebase auth to send users an email with a link to change their password.

The most popular technologies of today, including react.js, Firebase, and tailwind CSS, can be used to create this website with only a few additional dependencies, such as Leaflet and Swiper Js. We'll utilize leaflet packages to create a map and the Google geolocation API to translate addresses into latitude and longitude coordinates. We will learn how to add an incredibly stunning picture slider using the most recent version of Swiper.Js.

You will discover how to build fantastic and personalized notifications using the React Toastify library. Also, you'll create a stunning spinner component and use it on all pages that call for loading effects, just like all contemporary websites do. In this lesson, we'll learn how to make a reusable element that may be used throughout the website, like a listing card.

In this course, you will create everything from scratch. As we proceed with developing this application, we'll start with simpler themes before moving on to more complicated ones. React functional components and their reuse, as well as react file and folder structure, will be covered. React events like onChange and onSubmit event listeners will be taught to you. We'll learn how to manage the states and retrieve data from the Firestore database using the useEffect and useState react hooks.

Also, you will learn how to use the most recent version 6 of react-router to create routes, use params, and use traverse hooks. For securing crucial pages like the user profile page, we'll concentrate on developing private routes and unique hooks. You'll gain proficiency with Tailwind CSS version 3 and discover how to use it to style the project, including how to apply custom classes. The website will then be deployed to Vercel so that you can share it with others or add it to your portfolio.

Who this course is for:

  • React developers who want to have a portfolio project

Goals

What will you learn in this course:

  • Make a brand-new ReactJS project and use Firebase auth for full authentication

  • Learn how to register/login users using username/password and Google oAuth using Firebase auth. Utilize Firebase Firestore to store and retrieve data.

  • With Firebase auth, add a forgotten password feature.

  • Use modern software such as React js 18, Firebase 9, and Tailwind CSS 3.

  • Learn how to use Firebase Firestore's CRUD operations, which include creating, reading, updating, and deleting.

  • Create routes, obtain parameters, and redirect using React-router version 6 (the most recent version).

  • Discover how to build routes and pages in a React project.

  • Learn how to generate attractive alerts using React Toastify.

  • Find out how to build a private route and a unique hook for securing the user profile page.

  • Find out how to make a stunning spinner and loader.

  • Recognize crucial react event listeners, such as onChange and onSubmit.

  • Make a reusable element, like listing cards.

  • Use the newest version of Swiper js to create an image slider.

  • Using the leaflet and react leaflet packages, add a map to the page.

  • Learn how to deploy to Vercel

  • Learn how to convert an address to latitude and longitude using Google's geolocation API.

  • Learn how to style a React app using Tailwind CSS 3

  • Learn how to use the State and Effect react hooks

Prerequisites

What are the prerequisites for this course?

  • Basic knowledge of HTML, CSS, and JavaScript

React.Js 18 and Firebase 9 Project

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction
1 Lectures
  • play icon Introduction 04:06 04:06
Installation and first template
3 Lectures
Tutorialspoint
Authentication using Firebase auth version 9
5 Lectures
Tutorialspoint
Profile page
10 Lectures
Tutorialspoint
Listing page
5 Lectures
Tutorialspoint
Home page
2 Lectures
Tutorialspoint
Offers and category pages
2 Lectures
Tutorialspoint
Deployment
1 Lectures
Tutorialspoint

Instructor Details

Sahand Ghavidel Jirsaraie

Sahand Ghavidel Jirsaraie

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from the 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 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 a 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.

Course Certificate

User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.

sample Tutorialspoint certificate

Our students work
with the Best

Feedbacks

J

Jerald Roy j

The instructor demonstrated a deep understanding of the subject matter and explained the concepts clearly. They were engaging and kept the pace of the course appropriate, allowing learners to grasp the material without feeling overwhelmed.

P

Priya Nemani

Great course, sir! I am still learning the course and found everything useful

M

Martins Mathias

This course has been amazing. Conscise, Clear and Informative. I look forward to stretching out on this topic.

E

Ebuka Daniel

wonderful course, since i enrolled to the course i have seen alot of improvement..

G

Gabite

I just wanted to say that I just recently started this course and so far I'm really enjoying it. The instructor is clear and easy to follow, and the content is relevant and practical. I look forward to learning more and applying the skills I gain from this course. Thanks for this course!

S

Syn Mitchell

Super excited to get my certificate!!

T

Tahir Hussain

The React.Js & Firebase Project course by Sahand Ghavidel Jirsaraie is great resource to upskill your ReactJS 18 and Firebase 9 knowledge. Clear and Concise Instructions is provided through out the course. you will learn in detail about hooks and is beginner friendly course. I highly recommend this

I

Idowu Blessing

Thank you so much for an amazing course! I learned so much and you made even the more complex topics interesting and easier to follow. The course is 100% explanatory and informative. Kudos to the instructor for job well done.

S

Saidul Islam Pantho

I bought the Complete React.js and Firebase Project by Dr. Sahand Ghavidel. I am a beginner in React, and I was looking for a comprehensive course that would teach me the basics and beyond. I am happy to say that this course has exceeded my expectations.

M

Marouane IZEM

goood

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
People having fun around a laptop

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
People having fun around a laptop

Talk to us

1800-202-0515