Description

Welcome to this project-based course where you will build and deploy a realtor clone application using the latest version of React, Firebase, and Tailwind CSS. Learn to create and deploy a website professionally for showcasing to friends and clients, or adding it to your portfolio. Basic knowledge of HTML, CSS, and JavaScript is expected.

This is the best course to learn React.js, Firebase, and Tailwind CSS by creating a real estate website. In this course, you are going to learn how to build a realtor clone using ReactJS version 18, Firebase version 9, and Tailwind CSS version 3. In this course, we are going to create a stunning new listing section, custom categories, responsive design, listing 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 will gain the knowledge needed to build any website that uses CRUD operations including CRUD functions in React using Firebase Firestore database. You will 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 will add the Forgot Password functionality using Firebase auth to let the users get an email with the link to change their password. You will learn how to style the project using Tailwind CSS, including how to add custom classes. And finally, we will deploy the website to Vercel to be able to share it with others or put it on your portfolio. By the end of the course, you will learn to build a realtor clone using ReactJS version 18, Firebase version 9, and Tailwind CSS version 3. All resources and code files are placed here: https://github.com/PacktPublishing/React.js-and-Firebase-Project---ReactJS-18-Firebase-9-Project

What You Will Learn

Create a ReactJS project from scratch
Use Firebase Firestore to store and fetch data
Learn how to create pages and routes in a React project
Learn how to create a beautiful spinner and loader
Create a reusable component such as listing cards
Learn to create private route and custom hook for protecting the user profile page

Audience

This course can be taken by React developers who want to have a portfolio project or by programmers who have a basic knowledge of HTML, CSS, and JavaScript.

Approach

This is a complete hands-on course where you will be creating a website clone from scratch.

Key Features

Learn React Router version 6 (latest version) to create routes, get the params, and redirect * Learn CRUD operations including create, read, update, and delete using Firebase Firestore * Learn Google Geolocation API and how to convert an address to latitude and longitude

Github Repo

https://github.com/PacktPublishing/React.js-and-Firebase-Project---ReactJS-18-Firebase-9-Project

About the Author

Dr. Sahand Ghavidel

Sahand Ghavidel, with degrees in Mathematics, Electrical, and Computer Science, earned his doctorate from the University of Technology Sydney. He has over ten years of research experience in artificial algorithms and optimization, earning multiple awards and publishing 40+ articles in ISI journals. He's also a renowned presenter at global conferences. Sahand's work, with 1600+ citations on Google Scholar, reflects his significant impact. He was honored as an outstanding reviewer by the "International Journal of Electrical Power & Energy Systems" for his quality contributions. A programmer since 12, Sahand has 15 years of experience and has created numerous websites and apps, mastering languages like JavaScript and Python.

Course Outline

1. Introduction

This video is a brief introduction to the course, what to expect out of the course, and the course prerequisites.

2. Installation and First Template

1. Install ReactJS and Tailwind CSS and Create the First Template

This video explains the installation of ReactJS and Tailwind CSS and shows how to create the first template of the project.

2. Create Pages and Routes

This video explains how to create the pages and routes for the project.

3. Create the Header Component

This video explains how to create the header component of the project, the navbar.

3. Authentication Using Firebase Auth Version 9

1. Create Sign In, Sign Up, and Forgot Password Pages and OAuth Component

This video explains how to create sign in, sign up, and Forgot Password pages.

2. Install Firebase and react-toastify and Sign Up the User

This video explains the installation process of Firebase and how to sign up the user.

3. Complete the OAuth Functionality

This video explains the OAuth functionality in detail.

4. Complete the Sign-In Functionality

This video explains the sign-in functionality in detail.

5. Complete the Forgot Password Page Functionality

This video explains how to create the Forgot Password page functionality.

4. Profile Page

1. Create Private Route for Protecting the Profile Page and Logout Functionality

This video explains how to create a private route for protecting the profile page and the logout functionality.

2. Add the Edit Functionality to the Profile Page

This video explains how to add the edit functionality to the profile page.

3. Complete the Header Component and Make It Dynamic

This video explains how to make the header component of the project dynamic.

4. Create the Spinner Component

This video explains how to create the spinner component.

5. Create the Create Listing Page UI

This video explains how to create the listing page UI.

6. Add Functionality of onchange and onsubmit Functions to the Create Listing Page

This video explains how to add the functionality of onchange and onsubmit functions to the create listing page.

7. Add My Listings Section to the Profile Page and Create the listingItem Component

This video explains how to add my listings section to the profile page and create the listingItem component.

8. Complete the listingItem Component

This video explains the listingItem component.

9. Add Delete and Edit Functionality to the My Listing Section

This video explains how to add the delete and edit functionality to the my listing section.

10. Create EditListing Page

This video explains how to create the EditListing page.

5. Listing Page

1. Create Listing Page and Use Swiper to Add the Image Slider

This video explains the listing page and how to use Swiper to add the image slider.

2. Add Share Copy Functionality

This video explains how to add the share copy functionality.

3. Add the Listing Information to the Listing Page

This video explains how to add the listing information to the listing page.

4. Create the Landlord Contact Component

This video explains how to create the landlord contact component.

5. Add Map to the Listing Page Using Leaflet and react-leaflet Packages

This video explains how to add a map to the listing page using leaflet and react-leaflet packages.

6. Homepage

1. Create Slider Component and Add It to the Homepage

This video explains how to create a slider component and add it to the homepage of the project.

2. Complete Homepage By Adding Recent Offers, Places for Rent, and Places for Sale

This video completes the homepage by adding recent offers, places for rent, and places for sale.

7. Offers and Category Pages

1. Complete the Offers Page

This video explains how to fetch data for the offers page.

2. Create the Places for Rent and Sale Pages

This video explains the code for rent and sale pages of the projects.

8. Deployment

1. Deploy to Vercel

This video explains how to deploy the website that we have created to Vercel.

Course Images

ReactJS 18, Firebase 9 Project- Realtor Clone

By Packt

Booking options

Highlights