Semana OminiStack 11.0 - Rocketseat 🚀

---

🦸‍♀️ Be the Hero 🦸‍♂️

---

Propósito do projeto

Conectar ONGs a pessoas que possuem vontade de ajudar e muitas vezes não tem tempo, mas podem ajudar financeiramente.

Executando as aplicações

Após clonar o repositório:

💽 Backend:

• Acesse a pasta 'backend'

  cd be-the-hero-semana-omnistack-11/aulas/backend

• Iniciar aplicação

  npm start

• Rodar testes

  npm test

• Endpoints => http://localhost:3333
  • POST - "/sessions"
  • GET - "/ongs"
  • POST - "/ongs"
  • GET - "/profile"
  • GET - "/incidents"
  • POST - "/incidents"
  • DELETE - "/incidents/:id"

---

💻 Frontend:

• Acesse a pasta 'frontend'

  cd be-the-hero-semana-omnistack-11/aulas/frontend

• Iniciar aplicação

  npm start

• Endpoints => http://localhost:3000
  • "/"
  • "/register"
  • "/profile"
  • "/incidents/new"

---

📱 Mobile:

• Instalar o app Expo no celular
• Acesse a pasta 'mobile'

  cd be-the-hero-semana-omnistack-11/aulas/mobile

• Altere o endereço da baseURL de acordo com o seu IP no arquivo api.js

  • Caminho do arquivo:

      be-the-hero-semana-omnistack-11/aulas/mobile/src/services/api.js

• Iniciar aplicação

  yarn start

• Escaneie o QR Code com a câmera do celular na página que irá abrir após executar o "yarn start"

---

📌 Primeiro dia - 23/03/2020

• Apresentar aplicação
• Configurar ambiente de desenvolvimento
  • Node.js & NPM
  • Visual Studio Code
• Entender sobre back-end e front-end
• Criar projet ocom Node.js
• Entender sobre React & SPA
• Criar projeto com ReactJS
• Entender sobre React Native & Expo

📌 Segundo dia - 24/03/2020

• Node.js & Express
  • Rotas e recursos
  • Métodos HTTP
  • Tipos de parâmetros
• Utilizando Insomnia
• Configurando Nodemon
• Diferenças entre bancos de dados
• Configurando banco de dados
• Pensando nas entidades e funcionalidades
  • Entidades
    • ONG
    • Caso (incident)
  • Funcionalidades
    • Login de ONG
    • Logout de ONG (Front-end)
    • Cadastro de ONG
    • Cadastrar novos casos
    • Deletar casos
    • Listar casos específicos de uma ONG
    • Listar todos os casos
    • Entrar em contato com a ONG (Front-end)
• Construção do back-end
• Adicionando módulo CORS
• Enviando back-end ao Github

📌 Terceiro dia - 25/03/2020

• Limpando estrutura
• Conceitos do React
  • Componente
  • JSX
  • Propriedades
  • Estado
  • Imutabilidade
• Página de login
• Configurando rotas
• Cadastro de ONGs
• Listagem de casos
• Cadastro de um novo caso
• Conectanto a aplicação à API
• Enviar projeto ao Github

📌 Quarto dia - 26/03/2020

• Instalando Expo
• Criando projeto React Native
• Executando projeto
  • No celular
  • Emuladores
  • Expo Snack
• Diferenças para o ReactJS
  • Elementos HTML
  • Semântica
  • Estilização
    • Flexbox
    • Propriedades
    • Herança de estilos
    • Estilização própria
• Estrutura de Pastas
• Ícone e Splash Screen
• Configurando navegação
• Página de casos
• Detalhe do caso
• Abrindo Whatsapp & E-mail
• Conexão com a API
• Enviando projeto ao Github

📌 Quinto dia - 27/03/2020

• Adicionando validação
• Adicionando testes
  • Por que fazer testes?
  • TDD
  • Configurando Jest
  • Tipos de testes
  • Configurando banco de testes
  • Instalando supertest
  • Testando rota de autenticação
• Deploy
  • Alternativas
  • Qual escolher?
• Estudos daqui para frente
  • Padrões de código: ESLint, Prettier
  • Autenticação JWT
  • Styled Components
• Dicas para aproveitar melhor
  • Github
  • Linkedin

---