Tabnews é uma plataforma de notícias e entretenimento, criada pelo youtuber Filipe Deschamps. Ela permite que os usuários curtam, compartilhem e discutam notícias e conteúdos interessantes, contribuindo para a construção de um pedaço de internet mais legal. A plataforma apresenta uma interface fácil de usar e oferece acesso a uma ampla variedade de conteúdos, incluindo notícias, artigos, vídeos e imagens. Além disso, a ferramenta permite que os usuários personalizem sua experiência de acordo com seus interesses, garantindo uma navegação mais eficiente e agradável.
Notícias e Conteúdos: Usuários podem acessar uma ampla variedade de notícias e conteúdos interessantes, incluindo artigos, vídeos e imagens.
Curtir e Compartilhar: Os usuários podem curtir e compartilhar notícias e conteúdos que gostarem em suas redes sociais.
Discutir: A plataforma permite que os usuários discutam notícias e conteúdos, criando um espaço para debates e interações sociais.
Personalização: Os usuários podem personalizar sua experiência de acordo com seus interesses, garantindo uma navegação mais eficiente e agradável.
Interface Fácil de Uso: A plataforma apresenta uma interface fácil de usar, tornando a navegação simples e intuitiva.
- JavaScript
- HTML
- CSS
Estas são as linguagens de programação mais comuns usadas para desenvolver aplicações web, especialmente aplicações front-end. JavaScript é uma linguagem de programação interpretada usada tanto no lado do cliente quanto no lado do servidor. HTML é uma linguagem de marcação usada para criar páginas da web. CSS é uma linguagem de estilo usada para estilizar páginas da web. Juntas, estas três linguagens permitem a criação de aplicações web completas e interativas.
- Node.js
- Express
- React
- Postgres
- React-dom
- React-router-dom
- React-scripts
Estas tecnologias são comumente usadas para desenvolvimento de aplicações web, especialmente aplicações de back-end e front-end. Node.js é uma plataforma de tempo de execução do lado do servidor baseada em JavaScript, enquanto Express é uma framework para aplicativos web do Node.js. MongoDB é um banco de dados NoSQL usado para armazenar dados não estruturados. React é uma biblioteca JavaScript para criar interfaces de usuário. React-dom, React-router-dom e React-scripts são pacotes de complementos do React. Juntos, estas tecnologias permitem a criação de aplicações web completas e interativas.
Com base nas informações fornecidas a arquitetura do projeto é típica de uma aplicação web usando Node.js, Express e React pode incluir as seguintes camadas:
- Front-end: responsável por exibir informações para o usuário e permitir a interação. O front-end é construído usando React e é executado no navegador do usuário.
- Back-end: responsável por fornecer dados e realizar operações de negócios. O back-end é construído usando Node.js e Express e é executado em um servidor.
- Banco de dados: responsável por armazenar dados persistentes. O projeto estar usando Postgres como banco de dados.
As informações foram obtidas a partir do arquivo package.json no repositório do projeto. Este arquivo lista as dependências do projeto, incluindo as tecnologias e frameworks usados. Além disso, as informações foram baseadas na compreensão geral das tecnologias e frameworks mencionados.
- Express
- React
Express é uma framework para aplicativos web do Node.js, que fornece uma estrutura para lidar com requisições HTTP, acessar o banco de dados e fornecer dados ao front-end. React é uma biblioteca JavaScript para criar interfaces de usuário, que fornece uma estrutura para criar componentes reutilizáveis e interativos para aplicativos web.
Em resumo, o Express é usado como framework para o back-end, enquanto o React é usado como framework para o front-end.
Repositório oficial: https://github.com/filipedeschamps/tabnews.com.br
Github: https://github.com/upe-garanhuns/msw-beta-2022
Regras de contribuição: https://opensource.guide/
IssueTraker: https://github.com/filipedeschamps/tabnews.com.br/issues
O TabNews tem como objetivo “Tentando construir um pedaço de internet mais massa”, todos os integrantes do grupo de imediato já compartilhavam ideias parecidas e tinham vontade de integrar mais desse ideal que o TabNews através do open source e colaboração tenta construir. Além disso, devido à identificação dos integrantes com as tecnologias utilizadas no projeto com o fato de ter uma comunidade brasileira ativa interagindo, a escolha do Tabnews foi imediata.
Em um primeiro momento de investigação foi necessário ir ao cerne do problema e saber porque nos identificamos tanto com o TabNews. A “Revolta” que leva ao autor do projeto a ação e que segue com vários internautas compartilhando esse questionamento é simples “a internet deixou de ser um lugar massa”
Para entender melhor o que nos leva ao Projeto é importante considerar as seguintes palavras do Deschamps:
"Não sei se você compartilha comigo a visão de que recentemente a internet deixou de ser um lugar massa, pelo menos em sites onde a mídia principal é primariamente texto. Tudo está com um ruído tão grande, é tanta propaganda e oferta – quando eu navego por sites assim me surge uma sensação que eu sou uma presa, com 10 predadores prontos para atacar – e a gente ali, no meio dessa confusão toda, tentando extrair algum valor.
Mas já de início não quero passar a impressão errada: não tenho nada contra propaganda, ofertas ou marketing. Produtos e serviços precisam de visibilidade e projetos na internet precisam ser viáveis. Essa é a única forma de algo parar em pé, caso contrário, é apenas uma questão de tempo para qualquer iniciativa sumir do mapa.".
Procurar conteúdo e valor como programador às vezes podem ser desconcertante, citando o criador do projeto Felipe Deschamps: "Conteúdos Com Valor Concreto Para Quem Trabalha Com Tecnologia
Quem trabalha com tecnologia de forma séria precisa consumir conteúdos com valor concreto. Então acho que chegou a hora de darmos um volta de 180 graus e ir na contramão do que está acontecendo atualmente nas redes sociais e voltar com o espírito dos fóruns de antigamente.
Nessa época era possível consumir threads (tópicos) que misturavam informações valiosas tanto na postagem principal, quanto nas respostas (e que muitas vezes traziam mais informações valiosas que a postagem principal).
E algo que contribui para isso acontecer é a plataforma dar o mesmo espaço de criação para quem está publicando o conteúdo originalmente e para quem está respondendo. E você pode fazer esse teste aqui e clicar no botão de responder e notar o tamanho da caixa que abre para você elaborar uma resposta (compare com o espaço que o Facebook ou Instagram dão para uma resposta).
E tão legal quanto isso, é que tudo no TabNews é considerado um conteúdo, tanto que uma resposta possui seu próprio link (a sua própria página exclusiva), independente se é a resposta, da resposta da resposta.
Então é aqui que entra uma mecânica importante: nós vamos desestimular comentários simples, como por exemplo um agradecimento "ah valeu! falou..." em favor de comentários que devolvam algum valor concreto. E caso isso não seja possível, será possível devolver valor ao autor do conteúdo através das TabCoins.".
Portanto, é evidente que a ideia que o Tabnews propõe é tentadora e chamativa, deixando claro que a escolha do grupo considera o questionamento principal do autor assim como a motivação de algo centralizado para a comunidade que curte tecnologia.
Nas próprias palavras do Felipe “Nós somos pessoas brutalmente exatas e empáticas, simultaneamente.” Certificando a identificação que o grupo tem com o projeto.
Rodar o TabNews em sua máquina local é uma tarefa extremamente simples.
Você precisa ter duas principais dependências instaladas:
- Node.js LTS v16 (ou qualquer versão superior)
- Docker Engine v17.12.0 com Docker Compose v1.24.1 (ou qualquer versão superior)
Utiliza nvm? Então pode executar nvm install na pasta do projeto para instalar e utilizar a versão mais apropriada do Node.js.
Clique aqui se precisar de ajuda para configurar o Node.js e o Docker em sua máquina
Então após baixar o repositório, não se esqueça de instalar as dependências locais do projeto:
npm installPara rodar o projeto localmente, basta rodar o comando abaixo:
npm run devIsto irá automaticamente rodar serviços como Banco de dados (incluindo as Migrations), Servidor de Email e irá expor um Serviço Web (Frontend e API) no seguinte endereço:
http://localhost:3000/
http://localhost:3000/api/v1/statusObservações:
- Para derrubar todos os serviços, basta utilizar as teclas
CTRL+C, que é o padrão dos terminais para matar processos. - Você pode conferir o endereço dos outros serviços dentro do arquivo
.envencontrado na raiz do projeto, como por exemplo o endereço e credenciais do Banco de Dados local ou o Frontend do Serviço de Email.
No ambiente de desenvolvimento você poderá tanto criar usuários manualmente (inclusive para receber e testar o email de ativação), quanto utilizar usuários pré-cadastrados e que já foram ativados para sua conveniência.
- Após subir os serviços, acesse http://localhost:3000/cadastro
- Preencha os dados e utilize qualquer email com formato válido, mesmo que este email não exista, por exemplo:
[email protected] - O backend irá enviar um email para o servidor local de emails e que pode ser acessado pelo endereço http://localhost:1080/
- Abra o email de Ativação e acesse o link para ativar sua conta de fato.
- Com a conta ativa, realize o login: http://localhost:3000/login
Por padrão, ao rodar o comando npm run dev será injetado dois usuários ativados, um com features padrões e outro com features administrativas como a habilidade de rodar as Migrations usando a API ou alterar o conteúdo de outros usuários. Segue abaixo as credenciais destes dois usuários ("email" + "senha"):
- Usuário Admin:
"[email protected]"+"password" - Usuário padrão:
"[email protected]"+"password"
Há várias formas de rodar os testes dependendo do que você deseja fazer, mas o primeiro passo antes de fazer qualquer alteração no projeto é rodar os testes de forma geral para se certificar que tudo está passando como esperado. O comando abaixo irá rodar todos os serviços necessários, rodar os testes e em seguida derrubar todos os serviços.
npm testCaso queira manter os serviços e testes rodando enquanto desenvolve (e rodando novamente a cada alteração), use o comando abaixo:
npm run test:watch:servicesOs logs do Serviço Web e Jest (dos testes) irão se misturar, então caso queira rodar eles de forma separada, abra dois terminais separados e rode o seguinte:
# Terminal 1
npm run dev
# Terminal 2
npm run test:watchCaso não queira dar watch em todos os testes e queira isolar apenas 1 arquivo de teste (ou um grupo de testes), você pode utilizar um simples regex para dar match no que quiser, por exemplo:
# Rodar apenas /tests/api/v1/_use-cases/registration-flow.test.js
npm run test:watch -- registration-flow
# Rodar todos os testes de "users" da api "v1"
npm run test:watch -- v1/users/
# Rodar apenas /tests/api/v1/users/[username]/patch.test.js
npm run test:watch -- username./patch
# tests/integration/api/v1/contents/[username]/[slug]/get.test.js
npm run test:watch -- contents/.username./.slug./getObservações:
- A forma como é tratado o caminho dos arquivos pode mudar dependendo do seu sistema operacional.
- A forma como o seu terminal interpreta caracteres especiais como
/ou[pode mudar, mas você poderá usarregexpara evitar usar esses caracteres, como por exemplo utilizar o.que representa omatchcom qualquer caractere. Isto foi utilizado nos exemplos acima para evitar os caracteres[e]dos arquivos.
Você pode utilizar o script migration:create, por exemplo:
npm run migration:create alter table users add tabcoins
Isto irá resultar em:
Created migration -- ./infra/migrations/1655399502254_alter-table-users-add-tabcoins.js
Caso esta nova migração esteja válida, ela será automaticamente executada na próxima vez que você rodar o comando npm run dev. Caso contrário, o serviço não irá subir e os logs de erro estarão registrados no arquivo migrations.log encontrado na raiz do projeto.
Após finalizar suas alterações e se certificar que todos os testes estão passando com o comando geral npm test, chegou a hora de fazer o commit das suas alterações.
Para ser auxiliado no padrão de commit que utilizamos, rode o comando abaixo e siga as instruções:
npm run commit
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent