O projeto consiste na implementação de uma rede social real, com cadastro, login, posts, likes e comentários. Algumas inspirações e brincadeiras com a rede do reddit.com foram realizadas. Com o pensamento de mobile first, foi solicitado que o projeto fosse realizado para iphones 13 Pro-Max (w428px x h926px), conforme wireframe desenvolvido no figma (Figma).
-A página de login, ao fazer o login, o usuário deverá ser redirecionado para a página de feed. Há um botão "Cadastrar", que leva o usuário para a página de cadastro.
- A página de cadastro onde após cadastro de nome, email e senha, o usuário é redirecionado para a página de feed, já estando logado (ou seja, com o token salvo no LocalStorage).
- A página de feed mostra 10 posts, além de um formulário para a criação de novos.
- As páginas só pode ser acessada por um usuário logado. Caso o usuário não esteja logado, ele é redirecionado para a página de login.
- Cada post mostra o nome do 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.
- Quando o usuário clicar em um post, ele é redirecionado para a página do respectivo post onde pode comentar e votar (positiva ou negativamente) no post e nos comentários.
- Paginação do feed
- Responsividade em todas as páginas, usando media queries.
- Funcionalidade de Logout.
- Alerta de erro nas operações caso ocorram
- Página de erro caso navegue por uma página não existente
- Loading em todas as páginas
https://guttural-run.surge.sh/
Siga o passo-a-passo abaixo:
| Passo | Comando |
|---|---|
| Faça o Clone | git clone |
| Instale as Dependências | npm install |
| Utilize o Script Start | npm start |
Por padrão a aplicação rodará localmente na porta 3000.
- axios
- react-icons
- react-router-dom
- styled-components
- sweet-alert
Página de login para tela desk
Página de login para tela mobile
Página de cadastro para tela mobile
Efeito de loading
Página de feed com indicação de voto positivo em cor mais alaranjada
Página de post com indicação de ausência de comentários
