viniciusanchieta / HackathonSmiles

Hackathon oferecido pela Smiles

Jornada do Viajante

Este projeto tem como objetivo informar e incentivar o planejamento de viagens através de uma plataforma gamificada com prêmios para engajar e atrair um público mais jovem. Durante a jornada, você ganha pontos que podem ser trocados por prêmios; com o planejamento, você viaja tranquilo e ainda consegue economizar. Se divirta liberando novos lugares no seu mapa e revisando viagens passadas; utilizando milhas você dobra sua pontuação no jogo.

Quais as vantagens para a empresa em se unir à plataforma da Jornada do viajante?

• Atrair o público jovem através da gamificação.
• Atrair novos clientes com a utilização de milhas.
• Fidelizar clientes ajudando no planejamento de suas viagens.

Roadmap

O que faremos no futuro?

• Primeiro passo: Permitir que as informações sobre pontos e milhas apareçam automaticamente na plataforma através do CPF do usuário.
• Segundo passo: Possibilitar a reserva de hotéis dentro da própria plataforma da Jornada do Viajante.
• Terceito passo: Tornar a plataforma o principal meio de planejamento de viagens.
• Quarto passo: Adicionar uma seção com dicas e indicações sobre o que fazer e lugares para visitar no destino.

O que essa aplicação faz?

Esta versão da aplicação foi feita mobile-first para que futuramente seja desenvolvida em React Native. Nesta versão é possível percorrer todo o caminho que o usuário faria dentro da rota de cumprir missões e arrecadar pontos para que no fim, desbloqueie uma das várias conquistas disponíveis no jogo. É possível acessar o perfil do usuário, os prêmios que podem ser trocados pelos pontos adquiridos e o mapa desbloqueado até aquele ponto. Conforme mais viagens forem feitas, mais pedaços do mapa mudam de cor.

Quais tecnologias foram usadas?

• Figma para prototipação;
• Miro para criação e planejamento;
• Discord para comunicação entre os membros da equipe;
• ReactJS e Javascript para o desenvolvimento;
• React-router-dom para integração das páginas através do hook useHistory();
• Hooks useState e useEffect para renderizações das páginas;
• Styled-components para estilização;

Instalação

Primeiro passo:

• Clone do repositório

git clone https://github.com/luizfbarbosa12/HackathonSmiles.git

Segundo passo:

• Acessar a pasta

cd HackathonSmiles
cd hackathon-smiles

Terceiro passo:

• Instalar as dependências do node-modules

npm install

Quarto passo:

• Executar a aplição no formato mobile com a largura de tela (width) em 360px. A aplicação foi criada utilizando a tela do Samsung Galaxy S9 como base.

npm run start

Link para a solução, o deploy foi feito no Surge: http://parched-birthday.surge.sh/