O linkr foi um projeto realizado por mim e pelos colegas José Roman, Ronaldo Andrade, Carla Valle e Victor Hugo de Souza, durante as duas últimas semanas do "Módulo 4: Bancos de dados relacionais", do bootcamp da Driven Education. Trata-se de uma rede social totalmente desenvolvida por nós. O front-end da aplicação foi inteiramente desenvolvido em React.js, utilizando tecnologias/ferramentas como styled-components, axios, react-router-dom, react-tooltip, react-debounce-input, react-infinite-scroller, dentre outros. Já o back-end foi feito em Node.js, utilizando express, para conexão do servidor, bem como as libs JOI, para a validação de inputs; bcrypt, para o armazenamento de dados sensíveis com segurança; url-metadata, para captura de metadata dos links utilizados; JWT, para configuração de um token de acesso expirável. Foi utilizado, também, banco de dados relacional PostgreSQL, para armazenamento de dados dos usuários, posts, hashtags e mais.
Teste a aplicação através do link: https://linktr-bay.vercel.app/
Essa aplicação foi desenvolvida para quaisquer dispositivos, de forma responsiva, através da qual é possível realizar quaisquer funcionalidades encontradas em redes sociais. Listo, a seguir, as principais funcionalidades implementadas:
- Cadastro de usuário;
- Login;
- 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á;
- Implementação do 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;
- Implementado a funcionalidade de 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;
- Implementada a funcionalidade de 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;
- Implementada a funcionalidade de comentários nas publicações, seção acessada através do botão "comentários", abaixo do botão repost;
- É possível 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;
- É possível 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 muito mais!!!
As seguintes ferramentas, tecnologias e frameworks foram utilizadas na construção desse projeto:
- Clone o repositório front-end através do endereço: https://github.com/FilipeGarroteDev/linkr-front
- Instale as dependências:
npm i- Rode o front-end através do comando:
npm start- Opcionalmente, a build do projeto pode ser feita através do comando:
npm run build- Clone o repositório back-end através do endereço: https://github.com/FilipeGarroteDev/linkr-back
- Instale as dependências:
npm i- Adicionae, no arquivo .env, na raiz do projeto, as seguintes linhas:
PORT = [PORTA DE SUA PREFERÊNCIA]
DATABASE_URL= [CONNECTION STRING DO SEU USUÁRIO POSTGRES]
JWT_SECRET= [QUALQUER PALAVRA PARA CONFIGURAÇÃO LOCAL DO JWT]- Rode o back-end através do comando:
node src/index.js- Finalmente, acesse http://localhost:3000 no seu browser favorito (a não ser que seja o Internet Explorer. Nesse caso, você precisa rever suas decisões)