🗺 ProviHack do Agora - Equipe 6 - EcoMaps

Projeto desenvolvido para o ProviHack do Agora (Abril/Maio 2022). Para o problema "Como a tecnologia pode combater as mudanças climáticas e seus impactos?" foi desenvolvido a plataforma EcoMaps, que consiste em uma aplicação que auxilia o usuário a trocar a utilização do carro por meios de transporte mais sustentáveis. Para isso foi utilizada a API do Google Maps para obter o trajeto que será percorrido.

👥Desenvolvedores:

🛠 Tecnologias e Ferramentas:

React JS
Styled-components
Google Maps API

⚙️ Funcionalidades:

Splash Screen

Contém um logotipo do produto animado que direciona o usuário diretamente à tela inicial.

Tela inicial

Tela que contém um botão de "me mostre como", que quando clicado abre um ESPAÇO informando o usuário sobre o que é o aplicativo. Também há um botão de login, que direciona à tela de login e um de cadastro, que leva à página de cadastro.

Login

A página de login contém um ícone que representa um usuário, inputs para colocar e-mail e senha e dois botões: uma para realizar o login e outro para voltar à tela inicial.

Cadastro

Na página de cadastro há um formulário para que o usuário possa cadastrar suas informações, além um botão para realizar o cadastro e outro para voltar para a página inicial.

Mapa

Tela que contém um mapa, ícones que representam os meios de transporte e inputs para colocar o trajeto a ser seguido. Após escolher o transporte e traçar a rota, aparecem a distância e o tempo da viagem, além de um botão para iniciar o trajeto.

Páginas de premiação

Após o trajeto ser iniciado na página do mapa, dependendo do meio de transporte escolhido para realizar a rota, o usuário é direcionado a uma das duas páginas de premiação: uma que parabeniza e dá pontos ao usuário e outra que não dá nenhum ponto, caso o transporte escolhido tenha sido o carro.

Dashboard

Nessa tela podemos ver a pontuação do usuário, os status com informações sobre a quantidade de gás carbônico emitido, a quilometragem percorrida e a quantidade de gás utilizado. Também há uma calculadora de gás carbônico emitido por cada categoria de carro que pode ser escolhida através de um select.

Loja

Na loja, o usuário consegue ver seus pontos, que poderão ser utilizados nessa página para serem trocados por produtos cadastrados. Há uma seção dedicada aos patrocinadores e os produtos separados por categoria.

👣 Próximos passos:

Queremos criar o backend da aplicação, para que cada usuário tenha um cadastro e login no site, podendo acumular seus pontos e ter uma experiência mais personalizada. No mapa, queremos implementar a rota em tempo real utilizando o GPS do dispositivo móvel do usuário.