Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fernandoans/meusclientes-front
FrontEnd com React para o projeto Meus Clientes
https://github.com/fernandoans/meusclientes-front
Last synced: 28 days ago
JSON representation
FrontEnd com React para o projeto Meus Clientes
- Host: GitHub
- URL: https://github.com/fernandoans/meusclientes-front
- Owner: fernandoans
- Created: 2024-11-06T03:56:22.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T04:20:59.000Z (about 2 months ago)
- Last Synced: 2024-11-06T05:20:00.390Z (about 2 months ago)
- Language: JavaScript
- Size: 570 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto Meus Clientes: Front-End
Este é um projeto que exemplifica como trabalhar com "React + Spring Boot". A arquitetura deste foi montada conforme o seguinte esquema:![Tela Inicial](FigArquitetura.png)
Ativar o Back acessar a aplicação em: http://localhost:3000
Mais Detalhes do Back: https://github.com/fernandoans/meusclientes-back
## Ferramentas Utilizadas
Para esta parte foram utilizadas as seguintes tecnologias:
* Java - versão 21
* Sprint Tool Suite 4
* Spring Boot - versão 3.3.5
* SpringDoc - versão 2.1.0
* Lombok - versão 1.18.34
* Chamada ao serviço de CEP da viacep.com.br com o WebFlux
* Banco Postgres (detalhes abaixo)Para a parte do front-end (MeusClientesFront) foram utilizadas as seguintes tecnologias:
* React.js 18.3.1
* Node.js 18.20.4
* npm 18.3.1
* Bootstrap 5.3.3
* Axios 1.7.7## Compilar
Este projeto utiliza o Node e NPM para o gerenciamento dos pacotes, para iniciar o projeto:
```
npm start
```Uma vez ativado, o navegador será chamado e redirecionado para a porta 3000, tenha certeza que o back já está ativo e respondendo corretamente, e a seguinte tela será mostrada:
![Tela Inicial](FigTelaInicial.png)
Existem dois usuários:
```
Usuário: admin
Senha: 123qwe!@#
```Que possui permissão de acesso total ao sistema, podendo Visualizar, Incluir, Alterar e Excluir Clientes. o outro usuário é:
```
Usuário: padrão
Senha: 123qwe123
```Que pode apenas Visualizar os dados.
## Detalhes do Projeto
O primeiro serviço que deve ser chamado no momento do login é um serviço GET: http://localhost:8080/meusclientes/login/Este retornará um TOKEN válido que será guardado na seção para acesso aos serviços do cliente. Uma vez recebido e decodificado esse Token outras informações serão obtidas e entre elas o modo de acesso. Para o usuário "admin" a tela mostrada será:
![Tela Inicial](FigTelaAdmin.png)
e para o usuário "padrão":
![Tela Inicial](FigTelaPadrao.png)