Desenvolvimento de aplicações completas, incluindo frontend Web com React e backend com Node.js.
Projeto em dupla com Rosana Rezende (https://github.com/rosanarezende/)
Site do projeto: link
Documentação da API: link
Versão Web
Versão mobile
Iremos implementar um rede social realmente funcional (com cadastro, login, posts, likes e comentários) baseada no reddit.com.
OBS: A disposição dos elementos nos wireframes abaixo é só uma sugestão. Vocês podem fazer o layout e organização como bem entenderem.
A rede social terá 4 páginas:
A página de login possui dois campos de texto: email e senha. Comportamento esperado: ao fazer o login, o usuário deverá ser redirecionado para a página de feed.
A página possui também um botão "Cadastrar", que leva o usuário para a página de cadastro.
A página de cadastro possui 3 campos: nome de usuário, email e senha. O endpoint de cadastro retornará as mesmas informações do endpoint de login. Portanto, após cadastrar, o usuário deverá ser redirecionado para a página de feed, já estando logado (ou seja, com o token salvo no LocalStorage).
A página de feed deverá mostrar todos os posts, além de um formulário para a criação de post. O formulário possui apenas o campo de texto. Cada post mostrará o nome de usuário que postou, o texto do post, o número de votos (positivo ou negativo) e o número de comentários. Caso o usuário tenha votado positiva ou negativamente, isso deverá estar indicado. Todas essa informações serão fornecidas pela API.
Quando o usuário clicar em um post, ele deverá ser redirecionado para a página do respectivo post.
Quando um usuário clicar em votar (positiva ou negativamente), uma requisição deverá ser feita indicando a "direção" do voto. Um voto positivo é indicado com o número 1. Um voto negativo é indicado com o número -1. Para remover um voto, a direção deve ser 0.
Essa página só pode ser acessada por um usuário logado. Caso o usuário não esteja logado, deverá ser redirecionado para a página de login.
A página de um post mostrará o mesmo card de post da página de feed, com o usuário, texto, curtidas e número de comentários. Abaixo, terá um formulário para criação de comentários e os cards de comentários. A estrutura é muito similar à do post, mas comentários não possuem outros comentários dentro deles. A lógica de votos é a mesma do post.
Essa página só pode ser acessada por um usuário logado. Caso o usuário não esteja logado, deverá ser redirecionado para a página de login.
-
Garantir responsividade em todas as páginas, usar media queries, comparar a como o Reddit de verdade se comporta. Fazer deploy no surge e usar os celulares de verdade para testar as páginas.
-
Implementar funcionalidade de Logout.
-
Implementar funcionalidade de "Compartilhar", que permite mandar o post para outra rede social.
-
Implementar busca por nome/texto do post no feed.
-
Implementar loading em todas as páginas que esperam dados da API (lista de posts, detalhe de post, criação de post)
OBS: Todos os desafios foram implementados.
No terminal, clone o projeto:
git clone https://github.com/EloisaFagundes/4eddit
Navegue para dentro da raiz do projeto
cd 4eddit
Instale as dependências
npm i
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent