- 1. Introdução
- 2. Resumo do projeto
- 3.Pesquisa de usuários
- 4.Histórias de usuário
- 5. Objetivos de aprendizagem
- 6.Design
- 7. Linguagens e ferramentas utilizadas
- 8.Como Usar
- 9. Desenvolvedoras
3° Projeto desenvolvido no bootcamp de front-end da Laboratoria, neste projeto nós tinha o objetivo de desenvolver uma rede social, e assim construímos uma Single-page Application(SPA)[responsiva] (com mais de uma tela/ página) na qual seja possível ler e escrever dados.
Com tantos acontecimentos como, aquecimento global, queimadas, derretimento de geleiras, calor excessivo, frio excessivo e muitos outros fatores naturais, diversas as pessoas e empresas estão mais preocupadas com o meio ambiente e com a forma que estamos vivendo, para evitar e acabar com catástrofes naturais que são resultantes da ação dos próprios humanos. A partir disso surgiu a ideia de fazer a Eco Work Planet, que tem como objetivo principal ser uma rede social para pessoas interessadas no assunto, levantar o debate sobre assuntos voltados a vida sustentável, como alimentação sustentável, descarte adequado do lixo, proteção aos animais, entre outros assuntos ligados ao tema.Você pode acessar a aplicação clicando AQUI
Foi realizada uma pesquisa com 10 pessoas e esses foram os resultados:
Tem interesse em saber mais sobre como fazer o descarte adequado do lixo da sua casa?
Tem interesse em produtos naturais, veganos ou cruelty-free?
Tem interesse em melhorar a alimentação ou consumir produtos orgânicos?
Você utilizaria uma rede social sobre o meio ambiente?
Você acredita na forma de consumo consciente?
Acredita que sua comunidade tem um suporte para a valorização do meio ambiente em sua região?
Você sabe os pontos de reciclagem em sua cidade?
A informação de como podemos cuidar do nosso Meio-Ambiente chega fácil até você?
Com base nas pesquisas chegamos nas seguintes histórias de usuários:
- Uso de HTML semântico
-
Uso de seletores de CSS
-
Empregar o modelo de caixa (box model): borda, margem, preenchimento
-
Uso de flexbox en CSS
-
Uso de seletores de DOM
-
Gerenciamento de eventos de DOM
-
Manipulação dinâmica de DOM
-
Routing (History API, evento hashchange, window.location)
-
Manipular arrays (filter, map, sort, reduce)
-
Manipular objects (key | value)
-
Uso de condicionais (if-else, switch, operador ternário)
-
Uso de laços (for, for..of, while)
-
Uso de funções (parâmetros, argumentos, valor de retorno)
-
Testes unitários
-
Testes assíncronos
-
Mocking
-
Uso ES modules
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura | Semântica)
-
Diferença entre expression e statements
-
Uso de callbacks
-
Promise
-
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)
- Desenhar a aplicação pensando e entendendo a usuária
-
Criar protótipos para obter feedback e iterar
-
[x Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Planejar e executar testes de usabilidade
-
Firebase Auth
-
Firestore
Abaixo o protótipo de alta fidelidade da página home versão mobile que foi desenhado na ferramenta figma, que possibilitou a simulação do resultado da aplicação. Nossa intenção foi fazer uma interface simples, amigável e escolhemos cores que lembrasse o meio ambiente.
Paleta de cores
Você precisará usar o Node.js
Clonar o projeto $ git clone https://github.com/KarinaMel0/SAP007-social-network.git
Instalar as dependências do projeto $ npm install or yarn
Iniciar a aplicação $ npm start or yarn start
Realizar os testes unitários $ npm test or yarn test
 Karina Mel |
 Marione Pereira |