Vídeo   |    Tecnologias   |    Sobre   |    Páginas   |    Componentes   |    Clone   |    Contato

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

• ReactJS
• Firebase
• React Hook Form
• Yup
• Styled Components
• React Hot Toast
• React Router v6
• React Icons
• Vite + SWC
• NodeJS
• Javascript
• CSS
• HTML

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

A aplicação se consiste num fluxo de autenticação completo, onde é possível criar uma conta, fazer LogIn e LogOut, atualizar os dados da conta, e redefinir a senha em caso de esquecimento, isso utilizando Firebase para armazenar os dados dos usuários e realizar todo o sistema de autenticação, e React para a interface.
A aplicação conta com as validações necessárias para que todos os erros sejam tratados, assim como mensagens de feedback para criar uma melhor experiência para o usuário, além de outras boas práticas relevantes para esse contexto de autenticação.

A aplicação tem um total de 5 componentes de páginas, sendo eles:

• Home: Essa é a página privada de perfil do usuário, contendo nela os dados do usuário juntamente com a possibilidade de alterá-los e fazer LogOut.
• ForgotPassword: Essa página é responsável por enviar um email de redefinição de senha para o usuário a partir do email inserido.
• Login: Essa página é responsável por logar o usuário a partir dos dados inseridos.
• Register: Essa página é responsável por cadastrar um usuário a partir dos dados inseridos.
• UpdateProfile: Essa página é responsável por possibilitar o usuário de alterar seus dados cadastrados.

• Os componentes Button, Form e Input são respectivamente os componentes dos Botões, Formulários, e Inputs que são reaproveitados periodicamente pela aplicação.
• MyToast: Esse componente se consiste numa forma de agilizar e padronizar os alertas que aparecem pela aplicação.
• AuthContext: Esse componente é responsável pela disseminação das informações dos usuários e funções de autenticação pela aplicação.
• Routes: Esse componente é responsável pela criação e administração das rotas da aplicação.
• PrivateRoute: Esse componente é responsável por privar uma rota, sendo usado nas rotas de / e /update-profile.

Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v18.12.1 ou superior previamente instalados.
Feito isso, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/login-flux.git

# Entre no repositório com:
> cd login-flux

# Instale as dependências com:
> npm install

# Execute o projeto com:
> npm run dev

# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 🌐 LogIn Flux 🏷️ Tecnologias reactjs, firebase, react hook form, styled components, yup, react router, react hot toast, react icons, vitejs, javascript, css, html, swc 📷 Img

Voltar ao Topo