Repositório referente a um sistema de gerenciamento de análise de qualidade de água.

Projeto de autoria própria, cujo principal objetivo desse projeto foi fazer uma aplicação Fullstack em node e ReactJs.

• Node/express
• Docker
• Typesctipt
• Eslint

• React
• Vite
• Mui
• Typesctipt
• Eslint
• Axios
• JSCookies
• react-toastfy

Para isto, foi criado um repositório chamado "Service", onde todas as informações do Backend estão armazenadas e com testes implementados e outra pasta chamada "Client", onde o Frontend foi construído.

Decidi por construir uma SPA com roteamento via React Router uma arquitetura simples baseada em páginas/componentes, buscando ainda ter componentes bem delimitados para facilitar a manutenção.

Utilizei o Vite como bundler/compilador por conta da sua velocidade se comparado ao Webpack, se tratando de uma ferramenta mais ágil e moderna para o desenvolvimento. Além disso, otimizando o tempo de trabalho e evitando o gargalo de tempo de desenvolvimento.

A autenticação é salva pela lib Cookies.js, onde a mesma é usada pra fazer o gerenciamento global do token.

A lógica de requisições foi separada em uma pasta de Service, e utiliza o framework Axios para executar as chamadas para o backend.

Como nao foi passado um padrão de design, para facilitar a estilização, utilizei a bilbioteca Material Ui, que traz um design-system moderno, fluido e responsivo. Também fiz algumas alterações no rão para que a aplicação tenha um fundo escuro, que passa uma impressão de maior seriedade, credibilidade e por conta do contraste, recebe imagens, logos e texto sem comprometer a experiência do usuário.

Por se tratar de uma API simples, decidi por uma arquitetura com um Modulo Service e Controller, separando cada contexto de aplicação, facilitando assim a manutenção de uma rota específica.

O banco de dados foi construído com Mongodb e para construir os schemas de forma mais simples, o Mongoose foi utilizado.

O banco foi urado para rodar em um container do Docker, junto com o backend, configurado através de um arquivo docker-compose.yml, o que facilita a sua execução.

Rotas:

Para inicializar a aplicação:

Certifique-se de possuir o Docker instalado

Execute o comando npm i ou npm install para instalar as dependencias do projeto

Abra o terminal na pasta raiz

Execute o comando docker-compose up --build

O banco de dados irá rodar na porta 3005 do localhost

Renomeie a pasta example.env para .env ou crie uma pasta .env com as mesmas variáveis de ambiente definidas

A aplicação irá rodar na porta 3005 do localhost

Para inicializar a aplicação:

É MUITO necessário que você utilize uma versão do node acima de 16, pois o bundle está programado para rodar acima dessas versões para isso, utilize o comando nvm use 16xxxx ou maior

Execute o comando npm i ou npm install para instalar as dependencias do projeto

Rode o comando npm run dev para startar a aplicação, que irá rodar na porta 5173.

OBS.: Para logar, utilize o email: [email protected] secretpassword

Implementa a autenticação do usuário, recebendo as informações de login no seguinte formato:

Caso a autenticação seja bem sucedida, será retornado um token JWT com validade de 1 dia, que poderá ser utilizado para testar as demais rotas da aplicação.

Retorna uma lista com todos as análises criadas pelo usuário.

Essa rota exige a autenticação através do token, gerado pela rota POST /login e a passagem do username no header da requisição para possibilitar a busca dos projetos, que só acontecerá caso o token seja compatível com o usuário.

Busca uma única análise, recebendo o id no corpo da aplicação:

Busca uma lista de análise filtradas pelo nome do agente

Uma amostra é atualizada ao passar um id como parâmetro

Cria uma análise para ser renderizada

É necessário setar os valores das envs com esses valores: PORT=3005 JWTSECRET='624e771f-f59d-4a24-8431-d92d119f0556'

Pois o sistema não existe um sistema de criação de usuários

Acredito que eu poderia melhorar essas aplicações e, abaixo, cito alguns pontos:

• Criar validações no Backend utilizando o Joi para diminuir complexidade das funções
• Criar testes para as validações
• Criar um hook customizado para a requisição da API
• Adição de um gerenciador de estado com Redux para deixar a aplicação escalável para um crescimento maior
• Criação de testes em Cypress no front para testar a jornada do usuário
• Documentação da API através do Swagger
• Criação de uma página de exibição de detalhe da coleta