Semana 01 | Semana 02 | Semana 03 | Como executar os projetos | Como contribuir | Licença
O LaunchBase 2.0 é um treinamento no formato de bootcamp online. É ofertado pela Rocketseat e tem o objetivo de guiar o aluno pelas ferramentas e conceitos mais modernos de desenvolvimento que permitirá construir as melhores aplicações e avançar na direção certa no desenvolvimento web.
- HTML5
- CSS3
- JavaScript
- Node.JS
- Express
- Postgres
- SQL
Na primeira semana foram abordados conceitos de introdução a programação, iniciando com front-end e iniciando com back-end.
- Conceitos abordados:
- Variáveis
- Condicionais
- Operadores
- Objetos
- Vetores
- Funções e métodos
- Estruturas de repetição
- Escopos
- Booleanos
- Organização
- Padronização
- Escrita.
O desafio 01 consistia em aplicar todos esses conceitos em questões que foram elaboradas pela Rocketseat. A cada término de um conceito, tinha um desafio para praticá-lo. Ao todo foram 6 questões.
Abordou os principais elementos do HTML e as principais propriedades de estilização CSS.
O desafio 02 consistia em 4 partes, onde eram propostos desafios. Nas partes 1, 2 e 3 tínhamos que criar uma página de apresentação da Rocketseat, onde o layout era livre e o aluno poderia exercitar a sua criatividade, apenas tinha que seguir algumas instruções. Na parte 4 era dado o layout para construção de um site completo para uma empresa de receitas chamada Foodfy.
Desafio 02.1 - Site da Rocketseat
- Parte 01
- Criação do menu
- Parte 02
- Página de descrição da Rocketseat
- Parte 03
- Página de cursos da rocketseat e iframes
Desafio 02.2 - Site do Foodfy
- Parte 04
- Criação do layout do Foodfy
Desafio 03 consistia em 4 partes, onde foi realizado a refatoração do código do site da Rocketseat e do Foodfy.
Desafio 03.1 - Refatoração do site da rocketseat
-
- Criação do servidor
- Definição de rotas
- Instalação e configuração do Nunjucks
- Trazendo o front-end do site para o servidor
- Tornar todas as páginas dinâmicas com Nunjuck
- Criação da página de erro 404
-
- Exportando e importando JavaScript
- Passando dados do Back-end para o front-end
- Atualizando página cursos e sobre
-
- Pegando o id do curso via route params
- Filtrando elementos do array de courses
- Estruturando a página de cursos
- Criação da página de descrição de cada curso
- Reconfigurando o iframe
- Redirecionando URL com JavaScript
Desafio 03.2 - Refatoração do site do foodfy
- Parte 04
- Criação do servidor
- Criação das rotas
- Tornando os dados mais dinâmico
- Criação da página de descrição das receitas
O Desafio 04 consistia em 8 partes, onde foi desenvolvido um site de aulas particulares e a criação de uma área administrativa para o Foodfy.
Desafio 04.1 - Site de aulas particulares
-
- Criação de um header com dois links: teachers e students
-
- Utilizar o browser-sync
- criar um card para apresentação das informações do professor
-
- Criar um formulário de cadastro do professor
- Criar uma rota do tipo post que realiza as validações e salva os dados enviados
-
- Criar duas rotas: uma para apresentar os dados do professor (show) e outra para a edição dos dados cadastrados (edit)
- Formatar os dados cadastrados para a correta exibição no HTML
-
- Implementar duas rotas: PUT e DELETE para a atualização e remoção, respectivamente, dos dados cadastrados de um professor
-
- Listar todos os professores salvos no arquivo json e apresentá-los em formato de tabela
-
- Criar toda a estrutura de estudantes, baseado na estrutura de professores
Desafio 04.2 - Administração do Foodfy
-
- Criar uma área administrativa para o Foodfy, que será responsável por cadastrar, editar e deletar os dados do arquivo.
O Desafio 05 consistia em 5 partes, onde foi realizado a persistência dos dados do site de aulas particulares e do foodfy.
Desafio 05.1 - Site de aulas particulares
-
- Refator o código da aplicação e preparar o ambiente para trabalhar com banco de dados
-
- Refatorar os CRUDs dos professores e estudantes para que eles utilizem o banco de dados
-
- Criar um relacionamento entre professor e estudante
- Implementar filtros na listagem da tabela de professores
- Criar um campo de busca de professores
-
- Implementar a lógica de paginação dos resultados do BD
Desafio 05.2 - Site do Foodfy
- Parte 05
- Criar um banco de dados
- Criar novas páginas de cadastro, listagem e edição de chefs
- Criar um campo de busca de receitas
- Adicionar a funcionalidade de paginação na listagem de receitas
O Desafio 06 consistia em uma sequência de mini desafios para o fortalecimento dos conceitos de DBML, footer, funções assíncronas e máscaras de Input.
-
Parte 01 - DBML
- Criar no site dbdiagram.io a modelagem de um banco de dados que represente um sistema de locação de carros.
-
Parte 02 - Footer
- Implementar um footer no resultado final do desafio 03.
-
Parte 03 - Funções assíncronas
- Implementar uma função que receba como parâmetro um número e após x milissegundos mostre no console o dobro do parâmetro recebido, mas tem que fazer utilizando o conceito de callback, Promise e async/await.
- Implementar uma função que receba dois parâmetros, o primeiro será o valor a ser dobrado e o segundo o valor a ser somado ao dobro do primeiro, também utilizando o conceito de callback, Promise e async/await.
-
Parte 04 - Mascara de input
- Implementar uma mascara de input para CPF
- Clone este repositório
git clone https://github.com/RuthMaria/launchBase2.0.git
- Instale todas as dependências do projeto
npm install
- Baixar o nodejs
- Digitar o comando referente a questão que deseja executar, por exemplo:
node technology.js
- Baixar a extensão "watch in chrome" no Visual Studio Code e no Chrome
- Abrir no VSCode o arquivo index do respectivo challenge
- Pressione Ctrl + Shift + P no Visual Studio Code e selecione a opção "watch in chrome"
✔️ Challenge03.1_rocketseat, challenge03.2_foodfy, challenge04.1_privateLessons ou challenge05.1_privateLessons
Substituia as linhas 07 e 08 do arquivo package.json pelas linhas seguintes (referente ao challenge que deseja executar):
- challenge03.1_rocketseat
"nodemon": "nodemon challenge03.1_rocketseat/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public, views'"
- challenge03.2_foodfy
"nodemon": "nodemon challenge03.2_foodfy/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public, views'"
- challenge04.1_privateLessons
"nodemon": "nodemon challenge04.1_privateLessons/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public, views'"
- challenge04.2_foodfy
"nodemon": "nodemon challenge04.1_foodfy/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public, views'"
- challenge05.1_privateLessons
"nodemon": "nodemon challenge05.1_privateLessons/src/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public,src/app/views'"
Em seguida, crie o banco de dados no postgres e configure a conexão.
- challenge05.2_foodfy
"nodemon": "nodemon challenge05.2_foodfy/src/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public,src/app/views'"
Em seguida, crie o banco de dados no postgres e configure a conexão.
- challenge06_rocketseat
"nodemon": "nodemon challenge06_rocketseat/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public, views'"
- launchstore
"nodemon": "nodemon launchstore/src/server.js",
"browsersync": "browser-sync start --proxy http://localhost:5000 --files 'public,src/app/views'"
- Rodar o projeto
npm start
- Dê um Fork neste repositório,
- Crie uma branch com sua feature:
git checkout -b my-feature - Commit suas mudanças:
git commit -m 'feat: My new feature' - Push sua branch:
git push origin my-feature
Este projeto está sobre a licença MIT. Veja o arquivo LICENSE para mais detalhes.