SAP007-social-network

Índice

1. Sobre o projeto
2. Equipe do projeto
3. Planejamento
4. UX e UI do projeto
5. Tecnologias utilizadas

1. Sobre o projeto

Uma rede social onde você pode postar teorias e comentar sobre, sem julgamentos, com muito respeito a cima de tudo e reciprocidade. Oferece um espaço livre, para quem gosta do tema interagir e se sentir à vontade.

2. Equipe do projeto

Este projeto foi idealizado e criado pelas desenvolvedoras: Aline Rosa Cruz, Daiane Gonçalves Da Silva, e Isabela Soares.

Terceiro projeto proposto no bootcamp da @Laboratoria.

3. Planejamento

Este projeto projeto foi organizado utilizando o Trello: Trello Social Network

4. UX e UI do projeto

4.1 Definição do produto

Mapeamos as necessidades dos usuários, e chegamos à definição dos requisitos principais do produto, atráves das respostas mais frequentes no questionario criado no Google forms. Form do Google

4.2 Paleta de cores

Nossa paleta de cores foi definida no figma:

4.3 Histórias de usuário

Depois de entender as necessidades de seus usuários, escrevemos três Histórias de Usuário. Duas representam tudo o que ele precisa fazer/ver na Rede Social. A terceira seria Hacker edition, será utilizada em futuras refatorações.

4.3.1 Histórias de usuário 1

4.3.2 Histórias de usuário 2

4.4 Desenho da Interface de Usuário (protótipo de baixa fidelidade)

Definimos qual será o fluxo que o usuário seguirá dentro do nosso aplicativo e, com isso, criar a interface do usuário (UI) que siga este fluxo.

4.4.1 Pagina inicial

4.4.2 Aviso tela inicial

4.4.2 Pagina de feed

4.5 Protótipo de alta fidelidade

Os prototipos das telas de mobile foram desenvolvidas no Figma. Seguimos a técnica mobile first .

4.5.1 Pagina Home

4.5.1 Pagina Register

4.5.2 Pagina de feed

5. Tecnologias utilizadas

Objetivos de aprendizagem e tecnologias que nortearam nossa estratégia de trabalho:

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 en CSS

Web APIs

Uso de seletores de DOM
Gerenciamento de eventos de DOM
Manipulação dinâmica de DOM
Routing (History API, evento hashchange, window.location)

JavaScript

Manipular arrays (filter, map, sort, reduce)
**Manipular objects (key value)**
Diferenciar entre tipos de dados primitivos e não primitivos
Variáveis (declaração, atribuição, escopo)
Uso de condicionais (if-else, switch, operador ternário)
Uso de funções (parâmetros, argumentos, valor de retorno)
Testes unitários
Mocking
Uso ES modules
**Uso de identificadores descritivos (Nomenclatura Semântica)**
Diferença entre expression e statements
Uso de callbacks
Promise

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: Implantação com GitHub Pages
**GitHub: Colaboração pelo Github (branches forks pull requests code review tags)**

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