Skip to content

hadamakei/SAP007-social-network

 
 

Repository files navigation

Criando o Friendsound

Índice


Você pode acessar a aplicação utilizando o usuário de teste abaixo ou criando sua própria conta na aplicação:

🎵 Login
👤 teste@teste.com
🔑 123456

1. Tema

Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. As redes sociaisinvadiram nossas vidas. Nós as amamos ou odiamos, e muitas pessoas não conseguemviver sem elas. Há redes sociais de todo tipo para todos os tipos de interesse. E para escolher o tema que iriamos trabalhar, enviamos um formulário a usuários de rede sociais, para compreender quais eram suas necessidades e identificar quem seria nosso público alvo e que tipo de rede social o nosso usuário gostaria que fosse criada.

Através dessa pesquisa criamos 2 photo personas:

2. Resumo do projeto

O objetivo deste projeto foi construir uma plataforma que conecta-se às pessoas através da música. Criamos a rede social FriendSound como um espaço onde pessoas com o mesmo gosto musical possam trocar ideias, fazer amizades, conhecer novos artistas e ficar sabendo de shows. Nela o usuário pode criar uma conta de acesso, logar-se com ela, realizar postagens, editar, apagar e dar like nas publicações de seus amigos. Nosso desafio como desenvolvedoras foi construir uma Rede Social usando Single Page Application e utilizando um banco de dados remoto, para salvar, ler e modificar os dados existentes. O projeto todo foi desenvolvido utilizando Firebase, Vanilla JavaScript, HTML5 e CSS3.

3. Interface do usuário

Protótipo mobile

Captura de tela 2022-04-16 133159

Protótipo desktop

Prototyping in Figma (2)

4. Teste de usabilidade

A princípio nosso projeto tinha apenas 3 páginas, e o usuário poderia realizar o cadastro e logar no aplicativo na mesma tela, porém durante o teste de usabilidade identificamos que manter a página de cadastro e login juntas deixava o layout muito poluído e fluxo ficava um pouco confuso para o usuario. Sendo assim pensando na experiência do usuário, optamos por criar uma tela adicional de registro para facilitar o fluxo de autenticação do usuário.

Além disso nos foi reportado que as mensagens de erro de acesso da tela de login eram pequenas e não chamavam muita atenção, podendo passar despercebido pelo usuário. Pensando nisso optamos por alterar o tamanho das letras e as cores dessas mensagens para que elas tivessem mais destaque e o usuário pudesse facilmente identificar o motivo pelo qual ele não conseguiu logar no aplicativo.

5. Demonstração do Projeto


login


Feed


Responsividade

6. Como usar

Visualize o projeto aqui: (https://tati-mendonca.github.io/SAP007-social-network/)

Você precisará usar o Node.js

Clonar o projeto

$ git clone https://github.com/Lud-ic/pokemon-arena.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

7. Ferramentas Utilizadas

Js HTML Css Figma Firebase

8. Desenvolvedoras


Tatiane Mendonça

Larissa Moreira

Keila Hadama

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.7%
  • CSS 18.8%
  • HTML 1.5%