- 1. Resumo do projeto
- 2. Definição do produto
- 2.1 Funcionalidades
- 2.2 Histórias de usuárias
- 3. Protótipo
- 3.1 Protótipo mobile
- 3.2 Protótipo desktop
- 4. Teste
- 5. Objetivos de aprendizagem
Social Network foi o terceiro projeto desenvolvido no bootcamo da Laboratoria. O principal objetico era construir uma rede social que permitesse à qualquer usuária criar uma conta de acesso e logar-se com ela, além de poder lodar-se com sua conta google. Para além do login era necessário que a usuária pudesse criar, editar, deletar e dar likes em publilcações.
A proposta do projeto era criar uma página SPA com JavaScript Vanilla e desenvolver habilidades sobre o Firebase.
A partir diss, construi-se a Mães e Vinhos: uma rede social para mães que desejam falar de maternidade real e para dicas e impressões sobre vinhos. Porque não há nada melhor que uma conversa franca e sincera acompanhada de uma taça de um bom vinho. Esse é um espaço para trocas reais.
Mães e Vinhos é uma rede social desenvolvida para mães e apreciadoras de vinho. O seu objetivo principal é construir uma comunidade segura para que mães possam compartilhar seus momentos e desafios da maternidade e caso sinta-se a vontade podem compartilhar também sua impressões sobre vinhos.
- Apenas pessoas cadastradas possuem acesso ao aplicativo;
- Ao criar um cadastro a pessoa será direcionada a página de login e entãom poderá logar no aplicativo;
- O acesso a timeline fornece funcionalildades como postar novos comentários, editar e deletar.
- Além disso poderá ver posts dos amigos e curtur ou descurtir um comentário.
Após análise dos requisitos do projeto e também do cenário escolhido para o desenvolvimento da aplicação, criou-se as histórias de usuárias.
Tela 1: Histórias de usuários.
Desde o início, a aplicação foi projetada com o conceito de Mobile First em mente, o que significa que a sua responsividade foi considerada uma prioridade desde o começo do desenvolvimento. Para garantir uma experiência consistente para todas as usuárias, a aplicação foi adaptada para funcionar bem em telas menores, mantendo todas as funcionalidades disponíveis na versão para desktop.
Durante o desenvolvimento da interface, todas as histórias de usuários foram consideradas cuidadosamente, assim como a fidelidade ao protótipo original. Isso garantiu que a interface atendesse às necessidades dos usuários de forma consistente com o que havia sido planejado previamente.
### 3.1 Protótipo mobile
### 3.2 Protótipo desktop
Foram realizados testes utilizando a ferramenta Jest, que abrangeu testes assíncronos e mocks, resultando em uma cobertura de 70%.
- Uso de HTML semântico
-
Uso de seletores de CSS
-
Modelo de caixa (box model): borda, margem, preenchimento
-
Uso de flexbox em CSS
-
Uso de seletores de DOM
-
Manipulação dinâmica de DOM
-
Routing (History API, evento hashchange, window.location)
-
Arrays (arranjos)
-
Objetos (key, value)
-
Variáveis (declaração, atribuição, escopo)
-
Uso de condicionais (if-else, switch, operador ternário, lógica booleana)
-
Funções (params, args, return)
-
Testes unitários (unit tests)
-
Testes assíncronos
-
Uso de mocks e espiões
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura e Semântica)
-
Callbacks
-
Promessas
-
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: Implantação com GitHub Pages
-
GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
- [x]Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro
-
[x]Criar protótipos para obter feedback e iterar
-
[x]Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
-
Firebase Auth
-
Firestore