Data Population é uma interface web para exibir os dados de população de um determinado bairro da cidade de São José dos Campos.

A aplicação possui um banco de dados feito com json-server para fazer as requisições do front end e expor os dados na tela.

O front-end foi criado com react-router, e através dos requests na api mock, ele monta os polígonos no mapa que foi criado com react-leaflet. Ao executar o clique em qualquer polígono marcado no mapa, ele abre a evolução populacional daquela determinada área, sendo 4 áreas demarcadas no mapa.

Nesse projeto foi utilizado algumas tecnologias, sendo elas:

Mock-server

Mock Service Worker

UI, Mapa e os gráficos

• react-router
• tailwindcss
• react-google-charts
• react-leaflet

Ferramentas utilitárias

• typescript
• domain-functions
• zod

Testes

• vitest
• react-testing-library
• cypress

⚠️ A versão do node para rodar o projeto é a versão 18+ lts

Para instalar as dependências, é só executar o comando

npm install

Antes de executar o projeto, crie um arquivo .env na raiz do projeto e adicione a seguinte configuração:

VITE_API_DEV_URL=http://localhost:5173

Após instalar as dependências do projeto, é só executar o projeto

npm run dev

Para rodar os testes, é só executar o comando

npm run test

E para os testes e2e, só seguir os passos a seguir:

• Executar o script para abrir o cypress

npm run cypress:open

Após isso, clique na opção

Depois escolha em qual irá abrir

⚠️ Se utiliza o wsl / wsl2, dependendo da sua distribuição linux, é necessário instalar as dependências pra se rodar o cypress

Para instalar, digite no terminal:

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

Para executar os testes, na aba Spec, clique no teste que queira executar