├── .babelrc
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── api
├── desafio
│ └── index.html
└── index.html
├── css
└── style.css
├── fundamentos
├── desafio
│ ├── css
│ │ └── style.css
│ ├── index.html
│ └── projeto
│ │ ├── css
│ │ └── style.css
│ │ ├── index.html
│ │ └── js
│ │ ├── script-babel.js
│ │ └── script.js
├── index.html
└── trabalho-pratico
│ ├── index.html
│ └── projeto
│ ├── css
│ └── style.css
│ ├── index.html
│ └── js
│ ├── script-babel.js
│ └── script.js
├── img
├── github.png
├── home.png
└── linkedin.png
├── index.html
├── mongodb
├── index.html
└── trabalho-pratico
│ ├── index.html
│ └── projeto
│ ├── app.js
│ ├── models
│ └── account.js
│ ├── package-lock.json
│ ├── package.json
│ └── routes
│ └── accountsRouter.js
├── package-lock.json
├── package.json
└── react
├── desafio
├── index.html
└── projeto
│ ├── .gitignore
│ ├── README.md
│ ├── package.json
│ ├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
│ ├── src
│ ├── App.css
│ ├── App.js
│ ├── components
│ │ ├── Form
│ │ │ └── Form.js
│ │ └── Installments
│ │ │ ├── Installment
│ │ │ └── Installment.js
│ │ │ └── Installments.js
│ ├── index.css
│ └── index.js
│ └── yarn.lock
├── index.html
└── trabalho-pratico
├── index.html
└── projeto
├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.css
├── App.js
├── App.test.js
├── Components
│ ├── InputFullSalary
│ │ └── InputFullSalary.js
│ ├── InputReadOnly
│ │ ├── Input
│ │ │ └── Input.js
│ │ └── InputReadOnly.js
│ └── ProgressBarSalary
│ │ └── ProgressBarSalary.js
├── SalaryCalculations
│ └── salary.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Testtzlaffe
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bootcamp Full Stack [em andamento / construção]
2 |
3 | Resultados
4 |
5 | Em maio de 2020 iniciei a participação no Bootcamp
6 | Full Stack da IGTI. O programa tem como objetivo oferecer uma formação
7 | prática e intensiva em algumas tecnologias para desenvolvedor full
8 | stack. São 148h de aulas, em pouco mais de 2 meses.
9 |
10 | O Bootcamp apresenta técnicas de construção de uma aplicação passando
11 | pelo back-end (Node.js e Express), front-end (vanilla JavaScript e
12 | React), persistência de dados NoSQL (MongoDB), controle de
13 | versionamento de código com Git e implantação em nuvem.
14 |
15 | Em vez de separar cada projeto desenvolvido neste bootcamp, centralizei em um único repositório do curso todos os arquivos. Para uma melhor visualização da evolução no bootcamp, organizei tudo neste site.
16 |
--------------------------------------------------------------------------------
/api/desafio/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
38 | O objetivo desta aplicação é pesquisar registros de usuários obtidos por uma API. O exercício era que a consulta fosse realizada após o clique em um botão, ou pressionar [enter], mas entendi que se a busca fosse realizada imediatamente ao digitar, haveria um ganho na experiência do usuário. Procurei também desenvolver uma aplicação responsiva.
39 |
40 |
41 | Gostei bastante deste desafio, principalmente por poder aplicar modernas features do JavaScript, tais como async/await, arrow functions e template literals, além de usar array methods como map, filter e reduce.
42 |
43 |
44 | Te convido a dar uma olhadinha no código, no qual tentei aplicar funções bem definidas. Qualquer envio de sugestão de melhorias será de muito valor para meu aprendizado! Preparado para o próximo módulo: APIs com Node.js.
45 |
38 | O objetivo desta aplicação é pesquisar registros de usuários obtidos por uma API. O exercício era que a consulta fosse realizada após o clique em um botão, ou pressionar [enter], mas entendi que se a busca fosse realizada imediatamente ao digitar, haveria um ganho na experiência do usuário. Procurei também desenvolver uma aplicação responsiva.
39 |
40 |
41 | Gostei bastante deste desafio, principalmente por poder aplicar modernas features do JavaScript, tais como async/await, arrow functions e template literals, além de usar array methods como map, filter e reduce.
42 |
43 |
44 | Te convido a dar uma olhadinha no código, no qual tentei aplicar funções bem definidas. Qualquer envio de sugestão de melhorias será de muito valor para meu aprendizado! Preparado para o próximo módulo: APIs com Node.js.
45 |
37 | Neste módulo foram apresentadas as noções de HTML e de CSS. Pude
38 | revisitar conceitos e práticas com JavaScript, além de aprender muitas
39 | coisas novas.
40 |
41 |
42 | O destaque desta etapa foi poder criar aplicações simples, porém
43 | efetivas na fixação de conteúdo, usando JavaScript sem frameworks ou
44 | bibliotecas desta linguagem de programação. Assim, consegui visualizar
45 | o quanto JavaScript evoluiu nos últimos anos.
46 |
47 |
48 | Vale mencionar que na maioria das aulas foram apresentadas e
49 | utilizadas as novas formas de programar com JavaScript moderno (ES6+).
50 | Com JavaScript moderno, está prazeroso o desenvolvimento web.
51 |
52 |
53 | Abaixo, seguem meus dois projetos práticos desenvolvidos nesta etapa.
54 |
36 | Neste pequeno projeto, construí uma aplicação para visualização de
37 | cores a partir da escala RGB. Nela, pude exercitar os conceitos
38 | básicos no desenvolvimento web, com HTML, CSS e JavaScript.
39 |
40 |
41 | Apesar do exercício ser aplicar as cores escolhidas nos ranges em um
42 | quadrado na tela, busquei trazer uma interface na qual há um rodapé
43 | com os ranges na vertical, o que permite um alcance melhor do dedo
44 | polegar em uma tela de smartphone. E a mudança de cor ocorre no
45 | background do espaço restante.
46 |
47 |
48 | Após concluir o projeto, o refatorei para JavaScript moderno, com uso
49 | de arrow functions, variáveis const e let, entre outras mudanças.
50 |
51 |
52 | Esta etapa foi importantíssima nos estudos do bootcamp, pois me
53 | deparei com um JavaScript mais poderoso do que presenciei em cursos
54 | passados, quando eu preferia utilizar JQuery.
55 |
35 | Em maio de 2020 iniciei a participação no Bootcamp Full Stack da IGTI.
36 | O programa tem como objetivo oferecer uma formação prática e intensiva
37 | em algumas tecnologias para desenvolvedor full stack. São 148h de
38 | aulas, em pouco mais de 2 meses.
39 |
40 |
41 | O Bootcamp apresenta técnicas de construção de uma aplicação passando
42 | pelo back-end (Node.js e Express), front-end (React), persistência de
43 | dados NoSQL (MongoDB), controle de versionamento de código com Git e
44 | implantação em nuvem.
45 |
46 |
47 | Em vez de subir separadamente ao Github cada projeto concluído neste
48 | bootcamp, preparei esta página e as demais explicando a jornada e a
49 | evolução no aprendizado.
50 |
51 |
52 | Abaixo estão listados os módulos do bootcamp. Em breve subirei todos
53 | os projetos desenvolvidos até aqui. Clicando em "Detalhes", você
54 | encontra informações específicas de cada etapa, bem como acesso aos
55 | códigos e o resultado final.
56 |
57 |
58 |
59 |
60 |
61 |
Fundamentos
62 |
Módulo 1 (34h)
63 |
64 | Desenvolvimento de aplicação simples com JavaScript puro e dados
65 | persistidos em memória.
66 |
36 | Neste trabalho prático, pude implementar uma API integrada ao MongoDB
37 | Atlas cujo o schema dos dados foi definido pela biblioteca mongoose.
38 | Esta API tem alguns endpoints para manipulação dos dados de contas
39 | bancárias.
40 |
36 | O objetivo desta aplicação é calcular parcelas de juros compostos
37 | baseadas nos inputs de capital inicial, taxa de juros e quantidade de
38 | parcelas.
39 |
40 |
41 | Este foi o desafio que mais gostei até o momento neste bootcamp. É
42 | muito prazeroso programar usando ReactJS.
43 |
44 |
45 | Aqui nesta aplicação, construí todos os componentes baseados em
46 | funções. Utilizei useState e useEffect, que tornaram o desenvolvimento
47 | muito mais ágil.
48 |
37 | Neste módulo foram apresentados os conceitos do ReactJS para
38 | construção de interfaces. Inicialmente criamos componentes baseados em
39 | classes de JavaScript. No segundo momento, transformamos todas as
40 | classes em functional components.
41 |
42 |
43 |
44 | Realizamos algumas integrações com o back-end e foi possível entender
45 | o poder do React no front-end, e visualizar como é bem performático.
46 |
47 |
48 |
49 | Abaixo, segue o trabalho prático com componentes usando classes e o
50 | desafio com React Hooks.
51 |
36 | Esta aplicação calcula algumas rubricas sobre salário. Neste projeto,
37 | os componentes são baseados em classes, e foi possível utilizar os
38 | conceitos de estado e props.
39 |