🌐 LogIn Flux
| 🇺🇸 English |
| 🇧🇷 Português |
🌐 LogIn Flux Project
Vídeo | Tecnologias | Sobre | Páginas | Componentes | Clone | Contato
📹 Apresentação em Vídeo do Projeto
Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI
🚀 Tecnologias Utilizadas
- ReactJS
- Firebase
- React Hook Form
- Yup
- Styled Components
- React Hot Toast
- React Router v6
- React Icons
- Vite + SWC
- NodeJS
- Javascript
- CSS
- HTML
📝 Sobre
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.
📄 Páginas
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.
📑 Demais Componentes
- 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.
📖 Clonando o Projeto
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/)
🤝 Contato dos Contribuintes
Vitrine.Dev 🪟
|
Lucas Maciel
|