Wanderlust: Viajar, viver e colecionar experiências!

Terceiro projeto da turma SAP008 da Laboratoria - https://

Social-network 🏖️🏞️ Wanderlust ✈️

Índice

• 1. Definição de produto
• 2. Planejamento
• 3. História de usuário
• 4. Protótipo
• 5. Usabilidade
• 6. Objetivos de aprendizagem

---

🚀 1. Definição de produto

O Wanderlust vem para ajudar as mulheres a poderem "Viajar, viver e colecionar experiências!" Percebemos em pesquisas que as pessoas estão buscando mais as viagens após a pandemia. E numa pesquisa do IBGE com o Ministério do Turismo, a grande maioria das pessoas (48,9%)¹ apontam a falta de dinheiro como principal empecilho para viajar. E no Booking.com 39%² dos viajantes brasileiros afirmaram que planejavam fazer uma viagem solo no futuro.

Aliando essas informações, encontramos uma forma de viagem que é chamada de 'couchsurfing', onde as pessoas viajam para outros locais e se hospedagem em casas de conhecidos para, assim, ter uma economia.

Assim, foi a ideia do produto Wanderlust, um website, voltado para mulheres que desejam viajar, de uma forma mais econômica, mais segura, podendo vivienciar a cultura do local, e assim possam encontrar outras mulheres dispostas a cederem um sofá, uma cama para que estas possam se hospedar.

📑 2. Planejmaneto

Todo o planejmaneto do projeto foi feito no NOTION, em Quadro Kanban, com tasks em 'baby steps', divididas em 'to do' (por fazer), 'doing' (fazendo) e 'done' (feito).

Notion

📋 3. Histórias de usuários

• Quero poder me cadastrar e participar de uma rede social, para encontrar mulheres como eu, que estão disposta a ceder um local em sua casa ou se hospedar em casa de outras mulheres, e para isso gostaria de entrar me cadastrando com meu email e senha ou acessar através da minha conta google. (Cadastro / Login / Login com o Google / Esqueci minha senha)

• Quero poder disponibilizar meu local para que outras mulheres possam se hospedar com segurança e conforto, tendo assim a oportunidade de trocar experiências, conhecer pessoas novas e novas culturas através delas. Uma rede social que me permita publicar posts. (Publicar Posts no Feed / Editar Post / Deletar Post)

• Pensando em economizar na viagem e conhecer novas culturas e pessoas de diferentes locais do mundo, quero poder, com a rede social, achar ver facilmente posts de outras mulheres que estejam cedendo um espaço em sua casa e após a hospedagem poder curtir o post do local gerando assim mais confiança para a escolha de todas. (Like / Dislike)

🖼️ 4. Protótipo

Baixa fidelidade

Mobile

Desktop

Alta fidelidade

Mobile

Desktop

5. Usabilidade

Após fazermos os testes manuais e de usabilidade, incorporamos os feedbacks dados pelos usuários, e fizemos as seguintes mudanças:

• Inserimos a página de 'esqueci minha senha', para casos que o usuário esqueça a senha e receba um email para poder alterar a mesma.
• Trocamos o layout e as cores da palheta, para tornar o visual mais clean.
• Colocamos os botões de editar e excluir o post somente para as usuárias que publicaram o post.

6. Objetivos de aprendizagem

HTML:

• Uso de HTML semântico

CSS:

• Uso de seletores de CSS;
• Empregar o modelo de caixa (box model): borda, margem, preenchimento;
• Uso de flexbox em CSS

Web APIs

• Uso de seletores de DOM
• Manipulação de eventos de DOM (Objeto Event: EventTarget.addEventListener(), EventTarget.removeEventListener() )
• Manipulação dinâmica de DOM (Node.appendChild(), Document.createElement(), Node.textContent, Element.innerHTML)
• Routing (History API, evento hashchange, window.location)

JavaScript

• Diferenciar entre tipos de dados primitivos e não primitivos
• Manipular arrays (filter, map, sort, reduce)
• Manipular objects (key | value)
• Variáveis (declaração, atribuição, escopo)
• Uso de condicionais (if-else, switch, operador ternário, lógica booleana)
• Uso de laços (for, for..of)
• Uso de funções (parâmetros, argumentos, valor de retorno)
• Testes unitários (Introdução ao Jest)
• Testes assíncronos
• Uso de mocks e espiões
• Módulos de ECMAScript (ES modules: import, export)
• Uso de linter (ESLINT)
• Uso de identificadores descritivos (Nomenclatura | Semântica)
• Diferença entre expression e statements
• Callbacks
• Promessas

Controle de Versões (Git e GitHub)

• Git: Instalação e configuração
• Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
• Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
• GitHub: Criação de contas e repositórios, configuração de chave SSH
• GitHub: Implantação com GitHub Pages
• GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
• GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)

user-centricity

• Desenhar a aplicação pensando e entendendo a usuária

product-design

• Criar protótipos para obter feedback e iterar
• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

Firebase

• Firebase Auth
• Firestore

Desenvolvedoras👩

• Aghatha Silva Linkedin | GitHub
• Andresa Vieira Linkedin | GitHub
• Ariane Costa Machado Linkedin | GitHub

Footnotes

1. Resultados da PNAD Contínua Turismo – 3º trimestre de 2019, divulgada 12/08/2020 pelo IBGE, em convênio com o Ministério do Turismo. ↩

2. Booking.com https://viagemegastronomia.cnnbrasil.com.br/noticias/dia-das-mulheres-o-turismo-especializado-no-publico-feminino-ganha-espaco/. ↩