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.
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.
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.
- 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;
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/