Next Level Week | Projeto | Layout | Como rodar o projeto | Tecnologias | Contato
Criado pela Rocketseat, Next Level Week é um evento com muito código, desafios, networking e um único objetivo: levar o aluno para o próximo nível, independente do nível atual.
Programação é uma disciplina prática. Ou seja, para dominar uma tecnologia não basta apenas conhecer a teoria ou ler a documentação: é preciso colocar a mão no código.
Através do método da Rocketseat, aprendemos novas ferramentas, conhecemos novas tecnologias e descobrimos hacks que vão impulsionar a nossa carreira.
Um experiência online e totalmente gratuita para evoluir as habilidades em programação e colocar mais um trabalho completo no portfolio.
Nessa edição, feita entre os dias 3 e 9 de agosto de 2020, o foco foi o universo JavaScript: a tecnologia essencial para todos os devs que trabalham ou pretendem trabalhar com web.
Desenvolvemos a Proffy, plataforma de estudos online, que conecta alunos e professores para EAD.
Aula 01 | ReactJS e estrutura Web ✔️
Acelerando a sua Evolução: Nessa primeira aula do NLW #2, você vai conhecer o método que vai acelerar a sua evolução em direção aos seus maiores objetivos como programador. Entraremos em detalhes, conhecendo cada pilar desse método e como você pode utiliza-lo para ir direto ao ponto, na direção certa.
- Apresentação do projeto;
- Ambiente de desenvolvimento;
- Conceitos do ReactJS;
- Interfaces
- Construção de SPAs
- React/ ReactJS / React Native / ReactVR / ReactTV...
- Criação do projeto;
- Limpeza de estrutura;
- Explicação de conceitos;
- index.html e div#root
- JSX
- Componentes
- Propriedade
- Estado
- Criação de estilos globais;
- Criação da estrutura da landing page;
- Estilização da landing page;
- Configuração de navegação do app;
- Estruturação de listagem de professores;
- Estilização da listagem de professores;
- Criação de componentes comuns;
- Estruturação da página de cadastro;
- Estilização da página de cadastro;
- Preparação de cadastro de horários.
O foco foi a criação e estilização da estrutura do site.
Aula 02 | Back-end com Node.js ✔️
Olhando as oportunidades: No segundo dia do NLW #2, você vai descobrir como acessar as melhores oportunidades no mercado, que na maioria das vezes não são divulgadas.
- Ambiente de desenvolvimento;
- Conceitos de back-end e Node.js;
- Como funciona o back-end?;
- Particularidades da API REST
- Por que Node.js?
- Criando o projeto;
- Explicando conceitos;
- Rotas e recursos;
- Parâmetros;
- Identificando casos de uso;
- Configurando conexão com o banco;
- Criando tabelas no banco de dados;
- Criação de aulas;
- Listagem de aulas;
- Criação e total de conexões;
- Adição de cors.
Aprendemos a utilizar queries complexas no banco de dados; trabalhamos com transactions, relacionamento entre tabelas, migrations, try/catch, TypeScript e descobrimos um novo jeito de trabalhar no banco com a parte de horários.
Aula 03 | Finalizando o Front-End ✔️
A Escolha da Stack: Qual a melhor tecnologia? É sobre isso que vamos falar no terceiro dia do NLW #2. Vamos apresentar os critérios de avaliação para decidir quais tecnologias fazem sentido para você, dado o seu momento atual, o seu contexto e os seus objetivos. Além disso, você entender por qual razão utilizamos a nossa stack e como ela pode multiplicar as oportunidades de uma forma enxuta sem perder o foco.
- Estruturando a página de cadastro;
- Estilizando a página de cadastro;
- Preparando o cadastro de horários;
- Conceitos de estado e imutabilidade;
- Carregando o total de conexões na Landing;
- Cadastro de novas aulas;
- Listagem de professores.
Aula 04 | Estruturando o app Mobile ✔️
Até 2 Anos em 2 Meses: O que você acha de evoluir em 2 meses o que muitos devs levam 2 anos? No quarto dia do NLW #2, vamos entender o problema que desacelera a evolução de muitos devs e as principais dificuldades que atrapalham a evolução. Você vai ver como evitar esses problemas e acelerar na direção certa.
- Criando o projeto com Expo;
- Executando a aplicação;
- Particularidades do React Native;
- Elementos
- Estilização
- Estruturando a Landing Page;
- Estilizando a Landing Page;
- Navegação da Landing Page;
- Página de "Dar Aulas";
- Páginas internas;
- Navegação em abas;
- Componente PageHeader;
- Lista de professores.
Aula 05 | Finalizando o app Mobile ✔️
A Milha Extra: Na quinta e última aula do NLW #2, vamos mostrar como você pode ir além e se destacar, andando aquela milha extra. Vamos dar alguns sugestões práticas de como você pode fazer isso e aumentar incrivelmente os seus resultados.
- Lista de professores;
- Lista de favoritos;
- Filtro de professores;
- Conectando com a API;
- Total de conexões
- Lista de professores
- Contato via WhatsApp;
- Adicionando e removendo favoritos;
- Listando favoritos.
Para celebrar o Dia Nacional do Profissional de Educação (06 de Agosto), o projeto desenvolvido foi uma plataforma de estudos online, onde é possível tanto se cadastrar como instrutor quanto encontrar vários professores para ensinar.
Construído utilizando a metodologia mobile-first, esse projeto foi desenvolvido durante a Trilha OmniStack, desenhada para quem já domina o JavaScript, o CSS e o HTML, e tem uma boa base de SQL, ou seja, para quem já desenvolveu aplicações para web. Essa trilha foi guiada pelo instrutor Diego Fernandes, CTO da Rocketseat.
Você pode visualizar o layout do projeto Web através deste link e do projeto Mobile aqui. Ambos estão no Figma.
# Clone este repositório
$ git clone https://github.com/angelicaalbuquerque/proffy_nlw02-rocketseat
# Acesse o repositório
$ cd nlw-02-proffy/server
# Instale as dependências
$ yarn install
# Instale as Migrates
$ yarn knex:migrate
# Instale as Seeds iniciais do banco de dados
$ yarn knex:seed
# Execute a aplicação em modo de desenvolvimento
$ yarn start dev
# rodando na porta 3333# Clone este repositório
$ git clone https://github.com/angelicaalbuquerque/proffy_nlw02-rocketseat
# Acesse este repositório
$ cd nlw-02-proffy/web
# Instale as dependências
$ yarn install
# Execute a aplicação
$ yarn start
# rodando na porta 3000# Clone este repositório
$ git clone https://github.com/angelicaalbuquerque/ecoleta_nlwrocketseat
# Acesse este repositório
$ cd ecoleta-nlw/mobile
# Instale as dependências
$ yarn install
# Execute a aplicação
$ expo start
# O Expo abrirá uma nova janela no navegador; escaneie o qrcode no terminal ou na página aberta pelo Expo
# Caso tenha problema com as fontes, execute:
$ expo install expo-font @expo-google-fonts/archivo @expo-google-fonts/poppinsO projeto foi desenvolvido com as seguintes tecnologias:
Frontend
Mobile
Feito com ☕ e 🖤 por Angélica Albuquerque
