Be a Hero é o nome do projeto que está sendo desenvolvido durante a Semana OmniStack 11.0, um evento online 100% gratuito disponibilzado pela Rocketseat com o intuito de mostrar na prática o poder do uso das ferramentas Node.js no back-end, ReactJS no front-end e React Native no mobile juntas.
Durante a semana será desenvolvido uma plataforma para facilitar a comunicação entre as Ongs que necessitam de apoio financeiro com voluntários dispostos a ajudá-las. Essa plataforma contara com uma versão Web, que será utilizada pelas Ongs para cadastrarem as suas necessidades e uma versão Mobile que será usada pelos voluntários para encontrar as causas com que mais se indentificam, ou desejam ajudar.
O Projeto foi dividido em 5 aulas/dias, com o seguinte conteúdo:
- Apresentação da aplicação
- Configuração do ambiente de desenvolvimento
- Node.js & NPM
- Visual Studio Code
- Explicação sobre Backend e Frontend
- Criação de um projeto com Node.js
- Explicação sobre React & SPA
- Criação de um projeto com ReactJs
- Explicação sobre React Native & Expo
- Node.js & Express
- Rotas e recursos
- Métodos HTTP
- Tipos de parâmetros
- Utilizando o Insomnia
- Configurando Nodemon
- Diferenças entre bancos de dados
- Configurando banco de dados
- Pensando nas entidades e funcionalidades
- Construção do back-end
- Adicionando módulo CORS
- Enviando back-end ao Github
- 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
- Conectando aplicação à API
- Enviando projeto ao Github
- Instalando Expo
- Criando projeto React Native
- Executando projeto
- No celular
- Emuladores
- Expo Snack
- Diferenaç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
- Adicionando validação
- Adicionando testes
- Por que fazer testes?
- TDD (Test-Driven Develoment)
- Configurando Jest
- Tipos de testes
- Configurando banco dde dados
- Instalando supertest
- Testando rota de autenticação
- Deploy
- Alternativas
- Qual escolher?
- Estudos daque pra frente
- Padrões de código: ESLint, Prettier
- Autenticação JWT
- Styled Components
- Dicas para aproveitar melhor
- Github