/SAP008-social-network-Wanderlust

Meu 4° projeto! A rede social Wanderlust foi criada para mulheres com o espirito viajante. Nesta rede elas poderão fazer isso de uma forma mais econômica, segura, podendo vivenciar a cultura do local, por conseguir encontrar outras mulheres dispostas a cederem um sofá, uma cama para que estas possam se hospedar.

Primary LanguageJavaScript

logo

Wanderlust: Viajar, viver e colecionar experiências!


HTML5 CSS3 JavaScript Firebase GitHub Figma



Para acessar o site clique aqui!


Social-network 🏖️🏞️ Wanderlust ✈️

Índice

🚀 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%)1 apontam a falta de dinheiro como principal empecilho para viajar. E no Booking.com 39%2 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

baixa fid Mobile

Desktop

Desk 1 Desk2 Desk 3

Alta fidelidade

Mobile

Prototipo mobile 1 Prototipo mobile 2

Desktop

Prot Desk 1 Prot Desk 2 Prot Desk 3 Prot Desk 4

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👩

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