Teste/pedrofeitosa97

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,209 +1,35 @@
-# Teste Frontend estágio V3
-
-![Aiko](img/aiko.png)
-
-Neste teste serão avaliados seus conhecimentos em Javascript, HTML e CSS, a criatividade e metodologia aplicada no desenvolvimento, a usabilidade e design da aplicação final.
-
-## O Desafio
-
-Você é o desenvolvedor frontend de uma empresa que coleta dados de equipamentos utilizados em uma operação florestal. Dentre esses dados estão o histórico de posições e estados desses equipamentos. O estado de um equipamento é utilizado para saber o que o equipamento estava fazendo em um determinado momento, seja *Operando*, *Parado* ou em *Manutenção*. O estado é alterado de acordo com o uso do equipamento na operação, já a posição do equipamento é coletada através do GPS e é enviada e armazenada de tempo em tempo pela aplicação.
-
-Seu objetivo é, de posse desses dados, desenvolver o frontend de aplicação web que trate e exibida essas informações para os gestores da operação.
-
-## Requisitos
-
-Esses requisitos são obrigatórios e devem ser desenvolvidos para a entrega do teste.
-
-* **Posições dos equipamentos**: Exibir no mapa os equipamentos nas suas posições mais recentes.
-
-* **Estado atual do equipamento**: Visualizar o estado mais recente dos equipamentos. Exemplo: mostrando no mapa, como um pop-up, mouse hover sobre o equipamento, etc.
-
-* **Histórico de estados do equipamento**: Permitir a visualização do histórico de estados de um equipamento específico ao clicar sobre o equipamento.
-
-## Dados
-
-Todos os dados que precisa para desenvolver os requisitos estão na pasta `data/` no formato `json` e são detalhados a seguir.
-
-```sh
-data/
-|- equipment.json
-|- equipmentModel.json
-|- equipmentPositionHistory.json
-|- equipmentState.json
-|- equipmentStateHistory.json
-```
-
-### equipment.json
-Contém todos os equipamentos da aplicação.
-
-```JSONC
-[
-    {
-        // Identificador único do equipamento
-        "id": "a7c53eb1-4f5e-4eba-9764-ad205d0891f9",
-        // Chave estrangeira, utilizada para referenciar de qual modelo é esse equipamento 
-        "equipmentModelId": "a3540227-2f0e-4362-9517-92f41dabbfdf",
-        // Nome do Equipamento
-        "name": "CA-0001"
-    },
-    // ...
-]
-```
-
-### equipmentState.json
-Contém todos os estados dos equipamentos.
-
-```JSONC
-[
-    {
-        // Identificador único do estado de equipamento
-        "id": "0808344c-454b-4c36-89e8-d7687e692d57",
-        // Nome do estado
-        "name": "Operando",
-        // Cor utilizada para representar o estado
-        "color": "#2ecc71"
-    },
-    // ...
-]
-```
-
-### equipmentModel.json
-Contém todos os modelos de equipamento e a informação de qual é o valor por hora do equipamento em cada um dos estados.
-
-```JSONC
-[
-    {
-        // Identificador único do modelo de equipamento
-        "id": "a3540227-2f0e-4362-9517-92f41dabbfdf",
-        // Nome do modelo de equipamento
-        "name": "Caminhão de carga",
-        // Valor gerado por hora para cada estado
-        "hourlyEarnings": [
-            {
-                // Chave estrangeira, utilizada para referenciar de qual valor é esse estado
-                "equipmentStateId": "0808344c-454b-4c36-89e8-d7687e692d57",
-                // Valor gerado por hora nesse estado
-                "value": 100
-            },
-            // ...
-        ]
-    },
-    // ...
-]
-```
+# ForestFinder - Aplicativo de Localização de Máquinas Florestais
 
-### equipmentStateHistory.json
-O histórico de estados por equipamento.
+O ForestFinder é um aplicativo que permite aos usuários rastrear a localização de máquinas florestais em tempo real, bem como obter informações básicas e de histórico do equipamento.
 
-```JSONC
-[
-    {
-        // Chave estrangeira, utilizada para referenciar de qual equipamento são esses estados
-        "equipmentId": "a7c53eb1-4f5e-4eba-9764-ad205d0891f9",
-        // Histórico de estados do equipamento
-        "states": [
-            {
-                // Data em que o equipamento declarou estar nesse estado
-                "date": "2021-02-01T03:00:00.000Z",
-                // Chave estrangeira, utilizada para referenciar qual é o estado
-                // que o equipamento estava nesse momento
-                "equipmentStateId": "03b2d446-e3ba-4c82-8dc2-a5611fea6e1f"
-            },
-            // ...
-        ]
-    },
-    // ...
-]
-```
-
-### equipmentPositionHistory.json
-O histórico de posições dos equipamentos.
-
-```JSONC
-[
-    {
-        // Chave estrangeira, utilizada para referenciar de qual equipamento são esses estados
-        "equipmentId": "a7c53eb1-4f5e-4eba-9764-ad205d0891f9",
-        // Posições do equipamento
-        "positions": [
-            {   
-                // Data em que a posição foi registrada
-                "date": "2021-02-01T03:00:00.000Z",
-                // Latitude WGS84
-                "lat": -19.126536,
-                // Longitude WGS84
-                "lon": -45.947756
-            },
-            // ...
-        ]
-    },
-    // ...
-]
-```
-
-
-## O que é permitido
-
-* Vue, React e Angular.
-
-* Typescript.
-
-* Bibliotecas de componentes (Element-ui, Vuetify, Bootstrap, etc.)
-
-* Bibliotecas e APIs de Mapas (Leaflet, Openlayers, Google Maps API, etc).
-
-* Template engines (Pug, Ejs, etc).
-
-* Gerenciamento de estado (Vuex, Redux, etc).
-
-* Frameworks CSS (Tailwind, Bulma, Bootstrap, Materialize, etc).
-
-* Pré-processadores CSS (SCSS, SASS, LESS, etc).
-
-* Frameworks baseados em Vue (Nuxt.js, Quasar, etc).
+## Funcionalidades
 
-* Qualquer tecnologia complementar as citadas anteriormente são permitidas desde que seu uso seja justificável.
+- **Informações básicas do equipamento:** O aplicativo exibe informações básicas sobre o equipamento, como o nome, status.
 
-## O que não é permitido
+- **Preço do equipamento em cada estado:** O usuário pode verificar o preço atual do equipamento em cada estado e o lucro que ele gera por hora.
 
-* Utilizar componentes ou códigos de terceiros que implementem algum dos requisitos.
+- **Histórico de estados do equipamento:** O ForestFinder também exibe o histórico de estados pelos quais o equipamento passou, permitindo que o usuário saiba onde o equipamento esteve anteriormente e em que condições.
 
-## Recomendações
+- **Histórico de localização do equipamento:** Além disso, o aplicativo registra a localização do equipamento em tempo real e permite que o usuário visualize o histórico de localização por meio de um mapa interativo. Também há um botão de "Ver no mapa" que permite que o usuário veja a localização atual do equipamento.
 
-* **Linter**: Desenvolva o projeto utilizando algum padrão de formatação de código.
+## Tecnologias utilizadas
 
-* **Leaflet**: Para a exibição de informações no mapa recomendamos o Leaflet por ser uma biblioteca de código aberto e de fácil uso.
+O ForestFinder foi desenvolvido usando as seguintes tecnologias:
 
-## Extras
+- **React:** uma biblioteca JavaScript para construção de interfaces de usuário.
 
-Aqui são listados algumas sugestões para você que quer ir além do desafio inicial. Lembrando que você não precisa se limitar a essas sugestões, se tiver pensado em outra funcionalidade que considera relevante ao escopo da aplicação fique à vontade para implementá-la.
+- **TypeScript:** uma extensão de linguagem para JavaScript que adiciona tipagem estática opcional.
 
-* **Filtros**: Filtrar as visualizações por estado atual ou modelo de equipamento.
+- **Tailwind CSS:** uma estrutura de estilo CSS utilitária.
 
-* **Pesquisa**: Ser possível pesquisar por dados de um equipamento especifico.
+- **Google Maps API:** uma API de mapeamento que permite integrar mapas em aplicativos.
 
-* **Percentual de Produtividade do equipamento**: Calcular a produtividade do equipamento, que consiste em uma relação das horas produtivas (em estado "Operando") em relação ao total de horas. Exemplo se um equipamento teve 18 horas operando no dia a formula deve ser `18 / 24 * 100 = 75% de produtividade`.
+- **AnimateCSS:** uma biblioteca de animação CSS pronta para uso.
 
-* **Ganho por equipamento**: Calcular o ganho do equipamento com base no valor recebido por hora informado no Modelo de Equipamento. Exemplo se um modelo de equipamento gera 100 por hora em operando e -20 em manutenção, então se esse equipamento ficou 10 horas em operação e 4 em manutenção ele gerou `10 * 100 + 4 * -20 = 920`.
+## Design
 
-* **Diferenciar os equipamentos**: Diferenciar visualmente os equipamentos por modelo de equipamento na visualização do mapa.
+O design do ForestFinder foi criado no Figma. Você pode acessar o projeto e verificar o layout e fluxo da aplicação clicando neste [link](https://www.figma.com/file/LPoPVXaXkBwfX3qNbCmkcw/Untitled?node-id=0-1&t=ZisgbdEuamLYcaDq-0).
 
-* **Histórico de posições**: Que seja possível visualizar o histórico de posições de um equipamento, mostrando o trajeto realizado por ele.
+## Contato
 
-* **Testes**: Desenvolva testes que achar necessário para a aplicação, seja testes unitários, testes automatizados, testes de acessibilidade, etc.
-
-* **Documentação**: Gerar uma documentação da aplicação. A documentação pode incluir detalhes sobre as decisões tomadas, especificação dos componentes desenvolvidos, instruções de uso dentre outras informações que achar relevantes.
-
-## Entregas
-
-Para realizar a entrega do teste você deve:
-
-* Relizar o fork e clonar esse repositório para sua máquina.
-
-* Criar uma branch com o nome de `teste/[NOME]`.
-  * `[NOME]`: Seu nome.
-  * Exemplos: `teste/fulano-da-silva`; `teste/beltrano-primeiro-gomes`.
-
-* Faça um commit da sua branch com a implementação do teste.
-
-* Realize o pull request da sua branch nesse repositório.
+Se você tiver alguma dúvida ou sugestão, entre em contato comigo pelo meu [LinkedIn](https://www.linkedin.com/in/pedrofeitosa97/).