/linktr-front

Rede social de compartilhamento de links.

Primary LanguageJavaScript

Linkr

📑 Conteúdo

📌 Descrição do Projeto

Linkr é uma rede social de compartilhamento de links! Salve, compartilhe e descubra os melhores links da web! Nele pode-se fazer a busca por usuários e hashtags, buscar o rankings das hashtags mais usadas e ir à página de perfil dos usuários.

mockup

Principais funcionalidades:

  • Cadastro e login de usuário;
  • Um usuário pode publicar um link válido de sua preferência, através da caixa de postagem localizada na página principal, podendo ou não adicionar uma descrição/comentário. Essa descrição pode conter ou não hashtags que figurarão, possivelmente, na lista à direita;
  • Página principal com a listagem de todos os posts realizados pelos usuários que você segue;
  • Caso ainda não siga nenhum usuário, o usuário pode pesquisar pelo nome, por meio da barra de pesquisa situada no topo da página, que fará a busca no banco de dados, caso o usuário fique 500ms sem digitar nenhum outro caractere. Outro modo, é acessar a página de alguma hashtag do seu interesse e encontrar novos usuários por lá;
  • Botão Follow/Unfollow, situado na página de cada usuário (menos na sua própria página), através do qual é possível seguir/deixar de seguir um usuário e, assim, ver os posts criados ou repostados por ele;
  • Like/unlike nos posts, com a possibilidade de o usuário saber quem curtiu aquela postagem ao passar o mouse sobre a quantidade de curtidas;
  • Compartilhamento de posts, por meio do ícone de repost, situado na parte esquerda de cada post. O post repostado fica com uma barra informativa na parte superior de um post;
  • Comentários nas publicações, seção acessada através do botão "comentários", abaixo do botão repost;
  • Acessar a página de um usuaŕio específico, clicando em seu nome ou foto. Nela, é possível ver todos os posts feitos pelo usuário ou repostados por ele;
  • Acessar a página de uma hashtag específica, clicando sobre ela, em um post ou em lista própria localizada nas páginas da aplicação;
  • É permitido, apenas ao usuário que publicou um post, deletá-lo ou editá-lo, através dos botões localizados na parte superior do post;
  • E muitas outras funcionalidades!

Você pode visualizar o repositório do back-end aqui.

⚙️ Como rodar a aplicação

  1. Clone o repositório back-end através do endereço aqui.
  2. Clone este repositório.
  3. Instale as dependências:
npm i
  1. Rode o front-end através do comando:
npm start
  1. Rode o projeto:
npm start
  1. Finalmente, acesse http://localhost:3000 no seu navegador favorito.

🛠️ Tecnologias


📫 Contato

Carla Ferreira do Valle


Filipe Garrote


Ronaldo Andrade


José Roman


Victor Hugo de Souza