- 1. Tema
- 2. Resumo do projeto
- 3. Interface de usuário
- 4. Teste de usabilidade
- 5. Demonstração do Projeto
- 6. Como usar
- 7. Ferramentas Utilizadas
- 8. Desenvolvedoras
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 |
Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. As redes sociais invadiram nossas vidas. Nós as amamos ou odiamos, e muitas pessoas não conseguem viver 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 proto personas:
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.
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.
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/Tati-Mendonca/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
 Tatiane Mendonça |
 Larissa Moreira |
 Keila Hadama |
|---|