Projeto full-stack de uma tela de login e cadastro, desenvolvido como projeto pessoal com o intuito de estudar sobre desenvolvimento web com React e Node.
Front-end:
O front-end foi feito utilizando React, TailwindCSS para a estilização, React Router para o roteamento das páginas e Axios para as requisições http.
Back-end:
O back-end foi feito utilizando Node.js com o Express, e o banco de dados escolhido para o projeto foi o PostgreSQL. Também foram utilizadas algumas outras dependências, como a bibliotecas jwt, para gerar o token e autenticar o usuário, bcrypt para encriptação de senha, uuid para gerar o id único dos usuários e dotenv para acessar as variáveis de ambiente.
A aplicação tem apenas duas telas, a tela de login onde o usuário efetua sua autenticação e uma tela home, onde o usuário pode ver e editar suas informações e também ver algumas informações dos outros usuários registrados.
OBS: É possível que o design das imagens a seguir não esteja 100% fiel ao design atual do projeto, pois estou sempre ajustando algo.
A tela de login é a primeira que o usuário vê ao abrir a aplicação, nela é possível realizar o login, caso já possua cadastro, ou realizar seu cadastro. Também será possível acessar um método para recuperação de senha, caso o usuário tenha esquecido a sua.
Cadastro:
Ao clicar no botão de "Cadastre-se" é mostrado este modal na tela, onde o usuário pode preencher as informações necessárias para realizar seu cadastro na aplicação.
Aqui todas as informações precisam ser preenchidas, no front-end possui verificação de preenchimento de todas elas, uma validação básica do formato do E-mail usando um regex e também uma validação do tamanho da senha, que deve ser de no mínimo 8 caracteres, além disso verifica se as senhas dos campos "Senha" e "Confirmar Senha" coincidem. Importante mencionar que essas verificações também são feitas no back-end.
Recuperar Senha:
Esta parte ainda não está feita, mas a ideia é que ao clicar no botão "Esqueci minha senha" este modal seja aberto pedindo para o usuário informar seu E-mail e solicitar uma recuperação de senha.
O objetivo é que a requisição seja feita para o back-end informando o E-mail, para ser verificado se existe um cadastro com o mesmo e enviar um código para que o usuário possa cadastrar uma nova senha.
Após fazer o login o usuário é direcionado para esta tela, onde é possível visualzar suas informações e também uma lista dos usuários cadastrados, mostrando algumas de suas informações. Aqui é possível editar suas informações, fazer logout e também "excluir" seu cadastro.
Logout:
Ná página inicial, ao clicar no botão "Sair" no canto superior direito, é aberto este modal para confirmar a intenção do usuário de realizar logout na aplicação. Ao clicar em "Sim" o usuário é redirecionado para a página de login e seus dados são removidos do LocalStorage.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent