Case para posição de Frontend Developer na Moray

Tarefas

• Renderizar as geometrias dos bairros no mapa;
• Exibir a evolução populacional dos bairros;

Melhorias

Tecnologias de ecosistema:

• Uso do PNPM, mais rápido e eficiente gerenciador de módulos node.
• Atualização das bibliotecas para sua versão mais recente versão.
• Adição de Typescript ao projeto.
• Update para nova versão do eslint 9.
• Adicionando formatador prettier.

Tecnologias de infraesturutra:

• Hospedagem Free na Vercel.
• Uso Zeabur para hospedar servidor simples colaborativo de sinalização.
• Uso de um servidor websockets simples para colaboração por WebRTC.

Bibliotecas:

• YJS (Tecnologia colaborativa com CRDT - Conflict-free replicated data type) com provider WebRTC.
• Typescript
• MUI 6
• Zustand - Sistema de Store
• React Router - Roteamento
• UseQuery Zanstack - Cache de queries
• Zod - Validação de formulários

Features:

• Paginação com React Router.
• Visualização de Bairros.
• Colaboração em tempo real (cursor com usuários online).
• Minimap com atualização de zoom seguindo o mapa principal.
• Gráfico mostrando evolução da população.
• Pesquisar na Web.
• Uso de layers nas features.
• Fallback em caso de não haver User Name (simulação de autenticação apesar de ser no client).
• Validação de formulários com Zod.
• Uso de Typescript em diferentes layers (app e node).

Acesso

Url: https://collaborative-map-ex4o.vercel.app/

OBS:

O servidor colaborativo de sinalização está em uma instância gratúita do serviço Zeabur, a cada 24h ela se deleta por conta da gratúidade. Por favor, entrar em contato sob demanda para o servidor collaborativo retornar.

Setup

Pré-requisitos

Certifique-se de que você tenha o Node (v18) instalado:

node -v

Caso não, você pode fazer isso utilizando o nvm. Na raiz do projeto, execute:

nvm install
nvm use

Rodando a aplicação

Na raiz do projeto, execute:

pnpm install
pnpm run dev