/next-level-week

🚀 Aplicação construída durante o treinamento da Next Level Week da @rocketseat

Primary LanguageTypeScript


Tecnologias:

  • Node.js
  • React
  • React Native
  • Expo
  • Libs
    • Express

Conteúdo abordado:


1° Dia: Conceitos e ambiente

  • Apresentar aplicação
  • Ambiente de desenvolvimento
  • Node.js & NPM
  • Visual Studio Code
  • Por que criaremos uma API?
  • Conceitos do TypeScript
  • Criar base do projeto com Node.js
  • React & SPA
  • Criando projeto ReactJS
  • React Native & Expo

2º Dia: Back-end da aplicação

  • Entendendo conceitos > Rotas e recursos, Métodos HTTP, Tipos de parâmetros
  • Utilizando o insomnia
  • Qual banco de dados vamos utilizar?
  • Configurando conexão com o banco
  • Identificando entidades da aplicação
  • Funcionalidades da aplicação
    • Points (pontos de coleta)
      • image
      • name
      • email
      • whatsapp
      • latitude
      • longitude
      • city
      • uf
    • Itens (itens para coleta)
      • image
      • title
    • Point _Itens (relacionamento dos itens com um ponto de coleta)
      • point_id
      • item_id
    • Muitos para Muitos (N-N) (Pivot)
  • Construção do app
  • Adicionando CORS

3º Dia: Front-end web do app

  • Limpando estrutura da aplicação
  • Explicando conceitos
    • index.html e div#root
    • JSX
    • Componente (Header)
    • Propriedade
    • Estado e imutabilidade
  • Arquivos para Download (Layout, imagens e CSS)
  • Construção do HTML da primeira página
  • Configuração da navegação
  • Construção do HTML do formulário
  • Integrando mapa no formulário
  • Buscando itens de coleta da API
  • Buscando estados e cidades do IBGE
  • Carregar a localização atual do usuário no mapa
  • Cadastro de ponto de coleta na API
  • Mensagem de sucesso

4º Dia: Mobile do App

  • Instalar Expo CLI
  • Criar projeto com Expo
  • Executando projeto
  • Configurando emulador (caso necessário)
  • Diferenças do React Native para ReactJS
    • Elementos
    • Estilização
  • Criando página home
  • Criando página do mapa
  • Buscando items da API
  • Buscando pontos da API
  • Buscando detalhes do ponto da API
  • Busca de UF e cidade