Computers for all - manager

O Computadores para todos é um projeto social que recebe doação de computadores usados, os renova, e doa para jóvens de comuinidades menos favorecidas. Atualmente o projeto acontece apenas em Juiz de Fora, mas, através deste sistema, poderá expandir para outras cidades.

Este repositório

Este repositório contém dois projetos; a API (backend node) e o sistema de gestão (frontend react).

Como colaborar

O primeiro é assistir (mesmo que por alto) o video abaixo para entender o projeto, entender o sistema e saber como serão geridas as tarefas. Clique para abrir no Youtube.

Vantagens de participar

Como participar

• Veja as tarefas atuais (coluna "To do"), pelos boards do projeto
• Leia as tarefas em "To do" e veja se pode pegar alguma delas
• Comente na issue, ou até fale diretamente conosco pelo grupo do whatsapp, para entender melhor o que precisa ser feito, como fazer, conhecer os detalhes
• Se estiver tudo ok, marque a issue para você e mova para "Doing"
• Crie um branch a partir do dev, de acordo com o ID e nome da issue, exemplo: 30-preparar-ambiente-producao
• Trabalhe no seu branch e interaja sempre que achar necessário
• Ao final, de push no seu branch para o repositório e abra um Pull Request do seu branch para dev
• Mova o card da sua issue no projeto para "Validating" e aguarde os comentários e observações
• Se tudo estiver certo seu PR será aceito, e seu código será mergeado para o branch principal dev
• Sucesso, você mandou bem demais 🎉

Como começar

Você precisará rodar a API e o frontend em dois terminais diferentes, ao mesmo tempo, para ver o projeto funcionar. Opcionalmente você pode executar o Storybook, que é onde todos os componentes estão organizados.

Segue um passo a passo para rodar o projeto localmente:

1 - Clone o projeto

git clone https://github.com/Computadores-Para-Todos/computers-4-all-manager.git

2 - Instale o NVM (ou garanta que esteja usando o node versão 11.x)

https://github.com/nvm-sh/nvm

3 - Vá para o branch dev, e criae um novo branch para a issue que está. Exemplo:

git checkout dev
git checkout -b 12-criar-form-usuario

Setup da API

1 - Instalar pacotes da API

cd api
npm install

2 - Criar uma cópia o arquivo .env.sample para .env

cp .env-sample .env 

3 - Criar database local e informar os parâmetros de conexão no arquivo .env (caso tenha Docker/Compose instalado, pode usar e configurar o banco de desenvolvimento no arquivo api/docker-compose.yml - npm run database)

4 - Rodar a API

nvm use
npm run dev

5 - 🎉🎉🎉 - Neste momento seu terminal deve dizer que a API está rodando em http://localhost:3001/, e informando sucesso ou falha em conexão com o banco de dados.

Para gerar um build de produção e executá-lo, basta rodar:

npm run build
npm start

Setup do frontend

1 - Instalar pacotes do front

cd pwa
npm install

2 - Criar uma cópia o arquivo .env.sample para .env

cp .env-sample .env 

3 - Rodar o PWA

nvm use
npm start

4 - 🎉🎉🎉 - Seu terminal irá iniciar o servidor local do frontend react e abrirá http://localhost:3000/ em seu navedor.

Executar o Storybook

1 - Abra um novo terminar na mesma pasta do PWA e execute:

npm run storybook

2 - 🎉🎉🎉 - Seu terminal irá iniciar o servidor local do storybook e abrirá http://localhost:9009/ em seu navedor.

Mais detalhes técnicos e ferramentas

Lint

O projeto tem um padrão de códigos que é imposto pelo ESLint, é preciso ativar o ESLint e o Prettier na sua IDE para que ela te avise quando algo estiver faltando ou fora do padrão. Todos alertas devem ser resolvidos, porque o Husky não irá deixar subir código fora do padrão.

Estas são as regras em uso:

ESLint backend

• eslint-plugin-jsdoc
• eslint-plugin-node

ESLint frontend

• eslint-plugin-react

JSDoc

O ESLint irá pedir que use comentários em vários lugares, seguindo o padrão JSDoc, pedindo para informar os tipos de parâmetros, retornos, etc.

dotenv

O projeto utiliza o dotenv para carregar os arquivos de configurações (.env) em cada um dos projetos.

Rollbar

Os erros do projeto (em produção) serão logados no Rollbar, que é uma ferramenta bem útil. Não é obrigado utilizar em desenvolvimento.

Husky

O Husky irá validar todas as regras do ESLint antes de cada commit, e só deixará subir códigos que estejam 100% dentro das regras definidas.

Semantic Ui

A interface está sendo construída usando Semantic Ui.

Integração contínua

Foi utilizado o Github Actions para algumas ações relevantes:

• A cada novo pull request será verificado se o código está de acordo com as regras do ESLint e Prettier, só permitindo o merge ser realizado se estiver tudo de acordo
• A cada merge para branch dev o projeto será "buildado" e enviado para o Heroku, ficando disponível como ambiente para validação online
• A cada merge para branch stagging o mesmo acontece, ficando disponível em url de stagging
• A cada merge para branch master o mesmo acontece, ficando disponível na url de produção