7Além - Uma Rede Social de Teorias da conspiração

Í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.2 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.1 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.1 Pagina de login

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.2 Pagina Login

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