Reddact

Reddact é um simples aplicativo web que lê a Api do Reddit, e exibe dados do sub-reddit r/ReactJS, um forum online sobre a biblioteca de desenvolvimento front-end ReactJS.

Visite o app online

Acesse Reddact em: https://redd-act.netlify.app/

Status do Projeto

🚧 Em construção... 🚧

Tabela de conteúdos

• Tecnologias • Funcionalidades • Roteiro • Executar a aplicação • Licença • Autor • Contribuindo •

Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

• React.js
• Tailwind.css
• TimeAgo.js

Funcionalidades

• Botões para navegar entre os tipos de listagem de posts: Hot, New, Top e Rising.
• Botão "Ver mais" para carregar uma nova página de posts.
• Mostrar há quanto tempo atrás o post foi feito e o usuário que o fez, com link para o post e para o perfil do usuário.
• Mostrar a imagem do post se ele tiver uma e clicar para aumentar/diminuir o tamanho dela, ou uma imagem padrão caso contrário.
• Mostrar o número da página.
• Dark/Light mode.
• Projeto rodando no Netlify com deploy automático (https://redd-act.netlify.app/) .
• Mostrar a devida badge em posts que são uma coleção ou que foram fixados.
• Mostrar número de prêmios, de upvotes e de comentários no post.

Roteiro

Aqui estão as próximas etapas desse projeto e o que está sendo feito agora:

• Re-escrever Class Components como Hooks
• Aprender sobre os padrões do React e refatorar o projeto implementando-os (Responsabilidade Única, Imutabilidade, Composição, Reatividade)
  • Responsabilidade Única
  • Imutabilidade
  • Composição
  • Reatividade
• Implementar testes Unitários
• Implementar testes e2e
• Escrever Documentação

Executar a aplicação em modo de Desenvolvimento

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

• Git
• Node.js

Além disto é bom ter um editor decente para trabalhar com o código. Eu recomendo VSCode.

E um pequeno adendo: se você está usando o Google Chrome, talvez você precise ativar o modo de rolagem suave (visitando chrome://flags/#smooth-scrolling) para uma melhor experiência no app.

Executando a aplicação

Para executar a aplicação em sua máquina, siga os seguintes passos:

# Clone este repositório
$ git clone https://github.com/codigoisaac/reddact

# Acesse a pasta do projeto no terminal/cmd
$ cd reddact

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npm start

# O servidor inciará na porta:3000 - acesse http://localhost:3000

Licença

The Unlicense

Autor

Isaac Muniz

Contribuindo

Pull requests são bem vindos. ;) Para grandes alterações por favor abra um issue antes para discutirmos o que você quer fazer. Se você contribuir para esse projeto, seu perfil vai ser mostrado aqui.