Coletivo Enegrecer

Neste Wiki

• O Projeto
• Configurações
  • Rodando o projeto
  • Testes
  • Lint
  • Build
• Deploy
• Tech Stack
• Mais Informações

O Projeto

O coletivo nacional de Juventude Enegrecer é uma expressão do movimento social negro que luta contra as opressões da sociedade em favor da juventude negra. O projeto se propõe como uma plataforma para registrar denúncias de crimes raciais, a fim de se coletar dados para embasar e guiar ações e políticas antirracismo.

O Web App implementado neste respositório é uma das interfaces para essa plataforma, onde o usuário pode se informar mais a respeito e relatar um crime.

Configurações

Primeiro clone o repositório

git clone https://github.com/Enegrecer/enegrecer-web.git

em seguida entre na pasta do projeto clonado e rode yarn install para baixar todas as dependencias

cd enegrecer-web
yarn install

Rodando o projeto

Para subir um servidor local para desenvolvimento rode

yarn start

Isso irá subir um servidor com o aplicativo rodando em http://localhost:3000. Quando os arquivos dentro de src são alterados, automaticamente o código é recompilado e o aplicativo recarregado com as alterações.

Ao abrir o caminho http://localhost:3000, é normal a página aparecer em branco. Para acessar as opções, vá para http://localhost:3000/painel

Após efetuar login, a pessoa usuária ainda não está sendo redirecionada, então aguarde alguns segundos e acesse o menu novamente e escolha a opção desejada por favor.

Testes

O projeto está configurado para que o desenvolvimento seja feito em TDD, e assim o script:

yarn test

irá rodar todos os arquivos de teste (arquivos .test.js) e entrar em modo de watch. De forma que toda vez que arquivos são alterados, sejam eles testes ou não, os testes que possuem qualquer relação com tal arquivo são executados novamente.

Por exemplo, se o componente Signin for alterado, todos os testes de Signin.test.js serão executados, mas também os testes de Login.test.js, pois o componente de Login utiliza, ou depende, do componete de Signin, e assim por diante. O mesmo é válido para alterações em arquivos de teste.

O projeto está utilizando o Jest como framework de testes. O jest oferece praticamente tudo que é necessário para testes no projeto, definindo a sintaxe de escrita dos mesmos, provendo mocks, e atuando como test runner. Adicionalmente, o enzyme é utilizado como facilitador dos testes de componentes do React.

Lint

O eslint é utilizado como linter do projeto. É recomendado que um plugin do mesmo seja utilizado em seu editor de preferência durante o desenvolvimento. Além disso é possível executar o lint de todo o projeto rodando o comando:

yarn lint

E existe também o modo de watch que pode ser rodado com:

yarn watch-lint

Build

O comando

yarn build

roda o script de build, responsável por preparar o projeto para um deploy em produção. Os arquivos passam por um processo de minificação e bundling. Gerando arquivos mais concisos, e mais leves. Todo o resultado do script aparece na pasta build que será gerada dentro do projeto.

Deploy

Atualmente o projeto está rodando em https://enegrecer-e37b3.firebaseapp.com/, sendo o Firebase o host e também responsável pelo controle de usuários e banco de dados da aplicação. A atualização ocorre automaticamente através do Travis-CI, que monitora por modificações na branch master deste repositório, e executa passos de lint, testes e deploy para o Firebase.

Tech stack

Na nossa stack temos:

• React para criação do UI em componentes
• Redux para controle do estado da aplicação
• Redux-Saga para gerenciamento de chamadas assíncronas dentro do redux
• Babel como transpilador que permite que tais componentes sejam escritos utilizando ES8.
• Webpack para servidor local de desenvolvimento, compilação, e bundling do código
• Jest como framework de testes
• Enzyme para auxiliar nos testes
• Eslint como ferramenta de linter
• Firebase Como hosting e back-end mantendo controle de dados, usuários, etc
• Travis-CI para criar nosso CI, executar testes e build automaticamente
• Code Climate para cobertura de código e análise estática
• Materialize Como framework CSS responsivo

Como Contribuir

Para contribuir no projeto dê uma espiada no nosso Guia de Contribuição.

Mais Informações

Para mais informações, acesse a nossa wiki :).

Ou junte-se ao nosso espaço no Gitter.

Nós usamos o waffle para visualizar e organizar nossas issues.