Sistema de login criada utilizando React, NodeJS, Express com banco de dados MongoDB, Context API, Styled Components e autenticação em JWT.
https://sistema-de-login.netlify.app/
Iniciando o projeto
- Clone o repositório na sua máquina.
- No terminal integrado digite o comando
npm installpara instalar os pacotes e dependências. - Crie um arquivo com o nome
.envna pastaservere insira os seguintes campos:
PORT = 8080
MONGO = [observação: crie um banco gratuito no MongoDB e insira o link do banco aqui]
JWTSecret = [coloque uma senha aleatória aqui (apenas para teste)]
server inicie o servidor com o comando node server (ele será iniciado na porta 8080).client e rode o comando npm start, que abrirá a aplicação pelo localhost no seu navegador padrão.A página contém os campos de e-mail, senha e de redirecionamento para a página de cadastro caso seja um novo usuário.
Imagem 01: Página de login do sistema.
Toda autenticação da página é feita em JWT e para integração com o banco de dados foi utilizado o banco NoSQL MongoDB.
A página foi destinada a novos usuário e contém os seguintes campos:
- Nome;
- Email;
- Senha.
Assim que o usuário concluir o cadastro, ele será redirecionado para a Homepage do sistema.
Imagem 02: Página de cadastro do sistema.
Como conferência da efetividade do sistema de login, assim que o usuário for autenticado, ele será redirecionado automaticamente para essa página cujo o intuito é informar que a ação de login foi concluída com sucesso.
Imagem 03: Página inicial do sistema.
- React;
- NodeJS;
- Express;
- MongoDB;
- JWTWebToken;
- React Router Dom;
- Context API;
- Styled Components;
- Mongoose;
- BCrypt;
- Axios;
- Dotenv.
Wesley Santos |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent