Skip to content

Desafio Aiko - Monitoramento de Equipamentos. Projeto realizado no desafio fontend-v4 da aiko

Notifications You must be signed in to change notification settings

m4rrec0s/TrackEquip

Repository files navigation

Desafio Aiko - Monitoramento de Equipamentos

Este projeto foi desenvolvido com foco em criar uma aplicação para monitoramento de equipamentos. A aplicação permite a visualização detalhada dos equipamentos, incluindo seus estados atuais, histórico de localização e estado, além de proporcionar uma interface de navegação intuitiva e interativa com mapas dinâmicos.

Apresentação do Aplicativo

Funcionalidades

Visualização de Equipamentos

A aplicação exibe uma lista de equipamentos, mostrando seus estados atuais e permitindo a filtragem por diferentes categorias de estado. Cada equipamento pode ser selecionado para visualizar detalhes adicionais, como o modelo, produtividade e ganhos.

  • Listagem de Equipamentos: Exibe todos os equipamentos com seus estados atuais.
  • Filtro de Estados: Filtra os equipamentos por categorias de estado (ex: operando, parado, manutenção).
  • Pesquisa por Nome ou Modelo: É possível pesquisar um equipamento tanto pelo seu nome quanto pela sua categoria de modelo.

Histórico de Localização e Estados

Os usuários podem visualizar o histórico de localização dos equipamentos em um mapa interativo, além de acompanhar os estados históricos de cada equipamento.

  • Mapa Interativo: Mostra o histórico de localizações com traçado de rotas (polylines) entre os pontos registrados.
  • Histórico de Estados: Exibe a linha do tempo dos estados de cada equipamento, permitindo um acompanhamento detalhado das alterações ao longo do tempo.

Mapa Dinâmico

A aplicação inclui um mapa dinâmico que exibe em tempo real as posições dos equipamentos. O usuário pode interagir com o mapa para visualizar as posições atuais, além de explorar as rotas percorridas.

  • ultimas posições do equipamento: Visualiza a localização mais recente dos equipamentos em um mapa interativo.
  • Rotas Percorridas: Mostra o trajeto dos equipamentos ao longo do tempo com polylines.

Página do Equipamento

A aplicação conta com uma página dedicada a mais detalhes sobre o equipamento selecionado. Por meio do ID do equipamento, várias informações sobre ele são coletadas.

  • Detalhes do Equipamento: Inclui informações detalhadas como modelo, produtividade e ganhos calculados.

Menu de Navegação

Um menu de navegação facilita o acesso a diferentes partes da aplicação, permitindo uma experiência de usuário fluida e intuitiva.

  • Navegação Simplificada: Ícones e labels ajudam a identificar rapidamente as diferentes páginas da aplicação.
  • Transições Suaves: Navegação entre páginas com transições suaves e sem recarregamento da página.

Responsividade

O projeto conta com uma interface responsiva para todos os tipos de telas, se adaptando ao tamanho da mesma. Para isso foi utilizado a tecnologia Tailwind CSS.

Tecnologias Utilizadas

typescript logo react logo next logo java logo

  • React: Biblioteca principal para construção da interface.
  • Next.js: Framework para renderização do lado do servidor e geração de páginas estáticas recomendado pela documentação do react.
  • TypeScript: Superset do JavaScript para tipagem estática, garantindo maior segurança e previsibilidade no código.
  • Tailwind CSS: Framework de CSS para estilização, permitindo uma customização rápida e responsiva.
  • Shadcn UI: Conjunto de componentes acessíveis e estilizados, garantindo uma melhor experiência de usuário.
  • Lucide Icons: Conjunto de ícones utilizados para enriquecer a interface.
  • Leaflet & React-Leaflet: Bibliotecas para criação de mapas interativos e integração com React.
  • Dynamic Imports: Para carregamento dinâmico de componentes, melhorando a performance da aplicação ao carregar somente o necessário.

Como Executar o Projeto

Clone o repositório:

git clone https://github.com/m4rrec0s/TrackEquip.git

Navegue até o diretório do projeto:

cd TrackEquip

Instale as dependências:

npm install

Inicie o servidor de desenvolvimento:

npm run dev

Abra o navegador e acesse:

http://localhost:3000

About

Desafio Aiko - Monitoramento de Equipamentos. Projeto realizado no desafio fontend-v4 da aiko

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published