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

Created by : Rated :4.3 573 views

Last Updated: 2022-10-13 04:10:52 English Course Type: Self Learning

Create a React js project from scratch
Use Firebase Firestore to store and fetch data
Add forgot password functionality using Firebase auth
Learn how to create pages and routes in a react project
Learn how to use react toastify to create nice notifications
Create a reusable component such as listing cards
Learn how to deploy to vercel
Learn useEffect and useState react hooks

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.

Basic knowledge of HTML, CSS, and JavaScript

React developers who want to have a portfolio project

Section 1 : Introduction 1 Lectures 00:04:06
Lecture 1 :
Introduction Preview
Section 2 : Installation and first template 3 Lectures 00:00:04
Lecture 1 :
Install React js and Tailwind CSS and create the first template
Lecture 2 :
Create pages and routes
Lecture 3 :
Create the header component
Section 3 : Authentication using Firebase auth version 9 5 Lectures 00:19:43
Lecture 1 :
Create Sign in, Sign up and Forgot password pages and OAuth component
Lecture 2 :
Install firebase and react-toastify and sign up the user
Lecture 3 :
Complete the OAuth functionality
Lecture 4 :
Complete the Sign in functionality
Lecture 5 :
Complete the forgot password page functionality
Section 4 : Profile page 10 Lectures 00:27:19
Lecture 1 :
Create private route for protecting the profile page and logout functionality
Lecture 2 :
Add the edit functionality to the profile page
Lecture 3 :
Complete the header component and make it dynamic
Lecture 4 :
Create the spinner component
Lecture 5 :
Create the create listing page UI
Lecture 6 :
Add functionality of onchange and onsubmit functions to the create listing page
Lecture 7 :
Add my listings section to the profile page and create the listingItem component
Lecture 8 :
Complete the listingItem component
Lecture 9 :
Add delete and edit functionality to the my listing section
Lecture 10 :
Create EditListing page
Section 5 : Listing page 5 Lectures 00:16:37
Lecture 1 :
Create listing page and use Swiper to add the image slider
Lecture 2 :
Add share copy functionality
Lecture 3 :
Add the listing information to the listing page
Lecture 4 :
Create the landlord contact component
Lecture 5 :
Add map to the listing page using leaflet and react-leaflet packages
Section 6 : Home page 2 Lectures 00:00:04
Lecture 1 :
Create slider component and add it to the home page
Lecture 2 :
Complete home page by adding recent offers, places for rent and place for sale
Section 7 : Offers and category pages 2 Lectures 00:13:11
Lecture 1 :
Complete the offers page
Lecture 2 :
Create the places for rent and sale pages
Section 8 : Deployment 1 Lectures 00:09:14
Lecture 1 :
Deploy to Vercel

How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?
Currently, we do not offer any free trial.
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Sahand Ghavidel,

573 Course Views

1 Courses

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.