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

学习 React.js、Firebase 和 Tailwind CSS 创建房地产网站的最佳课程。在这个全新的课程中，您将学习如何使用 ReactJS 版本 18、Firebase 版本 9 和 Tailwind CSS 版本 3 构建房地产经纪人克隆。

欢迎来到这个项目，您将在其中使用最新版本的 react、Firebase 和 tailwind CSS 构建和部署一个房地产经纪人克隆应用程序。您将学习如何开发专业网站并将其部署到互联网上，以便与您的朋友和潜在客户分享或将其添加到您的投资组合中。在这个全新的项目中，我们将创建一个令人惊叹的新列表部分、自定义类别、响应式设计、列表卡、出租和销售页面，以及最重要的列表页面，您可以在其中看到地图和图像滑块。Realtor clone 是您目前可以找到的最好的现代全功能房地产应用程序。通过构建这个单一的 Web 应用程序，您将获得构建任何使用 CRUD 操作（包括创建、读取、使用 Firebase Firestore 数据库更新和删除反应。您将学习 Firebase 身份验证以进行完整身份验证，并学习如何使用用户名和密码以及 Google oAuth 注册或登录用户。此外，我们将使用 Firebase 身份验证添加忘记密码功能，让用户收到包含更改密码链接的电子邮件。

您将能够使用当今最需要的技术（例如 react.js、Firebase、tailwind CSS）以及其他一些依赖项（例如 Leaflet 和 swiper js）来开发这个网站。我们将使用传单包添加地图，并使用 Google 地理定位 API 将地址转换为纬度和经度值。我们将学习如何使用 Swiper.js 最新版本来添加一个超级棒的图片滑块。你将学习如何使用 react toastify 包来创建漂亮的自定义通知。和所有现代网站一样，您将创建一个漂亮的微调器组件并在所有需要加载效果的页面中使用它。我们将学习如何创建一个可重用的组件，例如我们可以在网站的不同部分使用的列表卡。

通过观看本课程，您将从头开始构建所有内容。我们将从简单开始，然后在构建此应用程序的同时转向更复杂的主题。您将学习 react 功能组件及其可重用性、react 文件和文件夹结构。您将学习重要的反应事件，如 onChange 和 onSubmit 事件监听器。我们将学习如何使用 useEffect 和 useState react hooks 来控制状态并从 Firestore 数据库中获取数据。此外，您将学习如何使用 react router 最新版本 6 创建路由、使用 useParams 和 useNavigate 挂钩。我们将致力于创建私有路由和自定义挂钩以保护重要页面，例如用户个人资料页面。您将使用 tailwind CSS 版本 3 精通。并了解如何使用 Tailwind CSS 设置项目样式，包括如何添加自定义类。最后，我们将把网站部署到 Vercel，以便能够与他人分享或将其放入您的投资组合中。

Published 09/2022
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English | Duration: 29 lectures (17h 48m) | Size: 10.2 GB

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

Requirements
Basic knowledge of HTML, CSS, and JavaScript

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.

Who this course is for
React developers who want to have a portfolio project