Projeto React.js & Firebase - Projeto ReactJS 18, Firebase 9

Projeto de Portfólio React.js e Firebase

Construa um clone de um corretor imobiliário usando React.js 18, Firebase 9 e Tailwind CSS 3.

Visão geral do curso

Bem-vindo ao novo projeto React.js 18 e Firebase 9! Neste curso, você aprenderá como construir um clone de um corretor imobiliário usando React.js 18, Firebase 9, Tailwind CSS 3 e React Router 6. Este curso foi projetado para ensinar os fundamentos do React.js, Firebase e Tailwind CSS enquanto cria um site imobiliário.

Neste projeto, criaremos uma nova seção de listagem impressionante, categorias personalizadas, design responsivo, cartões de listagem, páginas de aluguel e venda e, o mais importante, páginas de listagem com um mapa e um slider de imagens. Ao construir este aplicativo imobiliário totalmente funcional, você adquirirá o conhecimento necessário para construir qualquer site que utilize operações CRUD, incluindo criar, ler, atualizar e excluir, no React.js usando o banco de dados Firebase Firestore.

Você também aprenderá a autenticação do Firebase para autenticação completa do usuário, incluindo cadastro e login usando nome de usuário e senha, além do Google oAuth. Além disso, adicionaremos uma funcionalidade de redefinição de senha usando a autenticação do Firebase para permitir que os usuários redefinam suas senhas.

Ao longo do curso, você trabalhará com tecnologias em alta demanda, como React.js, Firebase e Tailwind CSS, além de outras dependências como Leaflet e Swiper.js. Usaremos pacotes Leaflet para adicionar um mapa e a API de geolocalização do Google para converter endereços em valores de latitude e longitude. O Swiper.js será usado para criar um incrível slider de imagens e o pacote React Toastify será usado para criar notificações personalizadas.

Como parte da construção de um site moderno, você criará um belo componente de spinner para efeitos de carregamento. Você também aprenderá a criar componentes reutilizáveis, como cartões de listagem, e implementar uma estrutura de arquivos e pastas para o seu projeto React.js. Eventos importantes do React, como onChange e onSubmit, serão abordados, assim como os hooks do React, como useEffect e useState para gerenciamento de estado e busca de dados no banco de dados Firestore.

Além disso, você aprenderá a criar rotas, obter parâmetros e redirecionar usando o React Router versão 6. Rotas privadas e hooks personalizados serão implementados para proteger páginas importantes, como a página de perfil do usuário. A estilização do projeto usando o Tailwind CSS versão 3 também será abordada.

Por fim, você aprenderá como implantar o site no Vercel, permitindo que você o compartilhe com outras pessoas ou o exiba em seu portfólio. Os pré-requisitos para este curso são conhecimentos básicos de HTML, CSS e JavaScript.

Instrutor

Meu nome é Sahand e tenho mais de 15 anos de experiência em programação. Serei seu instrutor ao longo deste curso e estarei disponível para responder a quaisquer perguntas que você possa ter na seção de comentários.

O que você aprenderá

• Criar um projeto React.js do zero
• Usar autenticação Firebase para autenticação completa
• Usar o Firebase Firestore para armazenar e buscar dados
• Aprender a cadastrar/entrar usuários usando nome de usuário/senha e Google oAuth usando autenticação Firebase
• Adicionar funcionalidade de redefinição de senha usando autenticação Firebase
• Trabalhar com as versões mais recentes como React.js 18, Firebase 9 e Tailwind CSS 3
• Aprender operações CRUD, incluindo criar, ler, atualizar e excluir usando o Firebase Firestore
• Aprender o React Router versão 6 para criar rotas, obter parâmetros e redirecionar
• Criar páginas e rotas em um projeto React
• Usar o React Toastify para criar notificações agradáveis
• Criar rotas privadas e hooks personalizados para proteger a página de perfil do usuário
• Criar um spinner e carregador bonitos
• Aprender importantes ouvintes de eventos do React, como onChange e onSubmit
• Criar componentes reutilizáveis, como cartões de listagem
• Criar um slider de imagens usando a versão mais recente do Swiper.js
• Adicionar um mapa à página usando os pacotes Leaflet e React Leaflet
• Aprender como implantar no Vercel
• Aprender a API de geolocalização do Google e como converter endereço em latitude e longitude
• Aprender a usar o Tailwind CSS 3 para estilizar um projeto React
• Aprender os hooks useEffect e useState do React para gerenciamento de estado