Cadastro, Login e Página do Usuário - Aplicação React
Sobre o Projeto
- Tipo: Sistema de Autenticação
- Stack Principal: React, Firebase Auth, React Router Dom
- Autor: Diêgo Ferreira
- Deploy: Vercel
Objetivo
Fluxo completo de autenticação de usuários utilizando React, Firebase Auth, React Router Dom e Styled Components, com base em um protótipo visual do Figma da DIO. A aplicação implementa formulários, validações e navegação utilizando react-hook-form para controle de formulários, yup para validação dos dados, react-router-dom para rotas, firebase para autenticação na nuvem e styled-components para estilização baseada no protótipo Figma.
Ferramentas & Tecnologias
React, Firebase Auth, React Router Dom, Styled Components, React Hook Form, Yup, Figma, Vercel
Deploy
Funcionalidades e Aprendizados
Formulários com React Hook Form: Implementação de controle eficiente do estado dos inputs, melhorando a performance e facilitando a gestão de formulários complexos com múltiplos campos de validação.
Validação com Yup: Sistema de validação baseado em esquemas de dados, garantindo que os dados de cadastro e login estejam corretos antes de serem enviados ao Firebase, com mensagens de erro claras e intuitivas para o usuário.
Autenticação com Firebase: Integração completa com Firebase Authentication para cadastro e login de usuários, armazenamento seguro de credenciais na nuvem e gerenciamento de sessões de autenticação.
Navegação com React Router Dom: Implementação de rotas declarativas entre páginas (Home, Cadastro, Login e Página do Usuário), protegendo rotas autenticadas e redirecionando usuários conforme seu estado de autenticação.
Reutilização de Componentes: Criação e reaproveitamento de componentes com styled-components, seguindo o design do protótipo Figma da DIO e mantendo consistência visual em toda a aplicação.