Next Level Week #3 🚀

O NLW (Next Level Week), em tradução livre, Semana do Próximo Nível, é um evento online organizado e realizado pela Rocketseat com o intuito de elevar os conhecimentos e habilidades de Devs em apenas uma semana.

A 3º edição do evento, ocorreu entre os dias 12 e 16 de Outubro, no qual foi proposto e realizado o desenvolvimento do projeto Happy, tanto aplicação web como mobile, utilizando ReactJS e React Native.

Projeto   |    Cronograma   |    Desafios   |    Ambiente   |    Tecnologias utilizadas   |    Licença

💡 Projeto

O Happy é uma aplicação desenvolvida com motivação pelo Dia das Crianças, e tem como objetivo aproximar e conectar pessoas à casas de acolhimento institucional (orfanatos), para tornar o dia dessas crianças ainda mais especial.

📅 Cronograma

1º Dia | Conceitos e Estrutura Web

• ✅ Apresentação do projeto
• ✅ Ambiente de desenvolvimento
• ✅ Conceitos de back-end, front-end e API
• ✅ O que é React e por que utilizar?
• ✅ Por que vamos utilizar Typescript?
• ✅ Criando projeto com ReactJS
• ✅ Componentes, JSX e propriedades
• ✅ Criando a landing page
• ✅ Trabalhando com rotas
• ✅ Página com mapa

2º Dia | Back-end com Node.js

• ✅ Criando projeto com Node.js
• ✅ Rotas, parâmetros e métodos HTTPS
• ✅ Configurando banco de dados
• ✅ Criando orfanato sem imagem
• ✅ Abstraindo em controller
• ✅ Listando orfanatos
• ✅ Upload de imagens
• ✅ Trabalhando com views
• ✅ Detalhe do orfanato
• ✅ Lidando com exceções
• ✅ Validação de dados

3º Dia | Finalizando front-end

• ✅ Finalizando página de mapa
• ✅ Copiando páginas faltantes
• ✅ Criando navegação entre telas
• ✅ Abstraindo componentes
• ✅ Conectando front-end com back-end
• ✅ Listando orfanatos no map
• ✅ Detalhe do orfanato
• ✅ Criação de um orfanato

4º Dia | Estruturando App Mobile

• ✅ Conceitos do React Native
• ✅ Por que vamos usar Expo?
• ✅ Criar o nosso projeto
• ✅ Diferenças pro ReactJS
• ✅ Criando tela de mapa
• ✅ Trabalhando com rotas

5º Dia | Finalizando App Mobile

• ✅ Criando fluxo de cadastro de orfanato
• ✅ Adicionando telas faltantes
• ✅ Buscar orfanatos da API
• ✅ Detalhe do orfanato
• ✅ Criando orfanato
• ✅ Desafios
• ✅ Surpresa especial 💜

🎯 Desafios

• 🚧 Acesso restrito
• 🚧 Recuperação de senha
• 🚧 Aprovação de novo cadastro de orfanatos
• 🚧 Splash screen
• 🚧 Onboarding
• 🚧 Localização real do usuário
• 🚧 Cadastro de orfanato em múltiplas etapas
• 🚧 Logout da aplicação
• 🚧 Deploy da aplicação

💻 Ambiente

• Yarn - Gerenciador de pacotes
• Visual Studio Code - IDE (Ambiente de Desenvolvimento Integrado)
• Insomnia Core - Software OpenSource que facilita interação com APIs baseadas no protocolo HTTP
• Beekeeper Studio - Gerenciador OpenSource de banco de dados SQL

Para baixar, instalar e configurar o ambiente, acesse o guia de apoio Configurando Ambiente desenvolvido pela própria @Rocketseat.

⚡ Tecnologias Utilizadas

Para o desenvolvimento do projeto foram utilizadas as seguintes tecnologias:

• Node.js
• React
• React Native
• Expo
• TypeScript

📃 Licença

Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para obter mais detalhes.