pageProcess

Repositório criado para armazenar os dados da landing page de consulta processual, criada com ReactJs utilizando o Vite.

🧠 Contexto

O objetivo era criar um projeto de front-end, utilizando o vite que se torna uma ferramenta muito útil para a geração desse ambiente. Em seguida, foi necessário criar cada componente e fazer testes para verificar a funcionalidade.

No projeto inicial, tinha em mente criar rotas com o react-router-dom, mas foi abandonado por falta de conhecimento nessa criação, e então resolvi criar algo mais simples, porém funcional.

Criei duas "páginas", mas como sabemos no react estamos trabalhando com SPA (single page application), logo no final das contas, é apenas uma página, que retorna um outro componente quando acionado o botão de busca e quando o campo de pesquisa é preenchido com a cnj para consulta processual.

Criei uma função chamada "setBusca" para capturar o que estava sendo digitado dentro do input.

Unifiquei os componentes da página inicial, em um componente que se chama "SearchPage", sendo a nossa página principal. Utilizei os hooks useState e useEffect para controlar os estados, importando de dentro do react essas funções.

Para consumir a API criada com nodeJS e expressJS, utilizei as funções assíncronas do javascript (async e await) mais o fetch. Para testar o retorno da API, utilizei o console.log.

Adicionei um form para envolver o input e o botão, adicionei uma função "onSubmit={handleSearchProcess}" para que os resultados fossem retornados.

Em "SearchPage" foi necessário criar um operador ternário para que as informações só fossem exibidas na página quando fossem buscadas, além de criar as props e o que retornaria em cada uma a partir das informações da minha API, e em caso de não haver nenhuma busca, o componente não sofre alterações.

Na segunda página que se chama "ResultPage", criei uma main para abraçar o conteúdo que iria retornar, criei para cada uma destas informações e utilizei a props para organizar como essas informações iriam chegar dentro dos spans.

Resultado da nossa página inicial sem busca:

Resultado da nossa página com os dados:

PROCESSOS QUE PODEM SER CONSULTADOS:

5001682-88.2020.8.13.0671

5001682-88.2020.8.13.0672

5001682-88.2020.8.13.0673

5001682-88.2020.8.13.0674

5001682-88.2020.8.13.0675

5001682-88.2020.8.13.0676

5001682-88.2020.8.13.0677

5001682-88.2020.8.13.0678

Tecnologias usadas

Ferramenta	Descrição
ReactJS	framework web
Vite	gerador de projeto de front-end
npm	gerenciador de pacotes
Github	Hospedagem do código fonte integrado com gerenciador de versionamento

|

Como rodar o projeto localmente

Siga os passos e inclua as informações abaixo:

Passo	Comando/informação
Faça o fork	botão de forkar
Faça o clone	git clone
Instale as dependências após acessar a pasta projeto	npm i
Rode o projeto	npm run dev

|

😎 Próximos passos mapeados

• Incluir Testes utilizando o vitest.
• Revisar acessibilidade
• Revisar responsividade
• Melhorar o layout