Olá, como estão? Esse repositório tem o objetivo de servir como um registro da minha jornada no programa "Desenvolve 2024" do Grupo Boticário. Com mais de 30 mil inscritos, fui um dos escolhidos para fazer parte da formação FullStack.
Vou documentar meu desenvolvimento, semana a semana, centralizando aqui os projetos, aulas, e resolução de estudos de caso. Estou muito feliz com essa jornada. O curso iniciou no dia 29/01/2024 e tem previsão para ser concluído até 07/2024, com uma carga horária acima de 350 horas.
- Semana 1 | 29/01 - 05/02
- Semana 2 | 05/02 - 12/02
- Semana 3 | 12/02 - 19/02
- Semana 4 | 19/02 - 26/02
- Semana 5 | 26/02 - 04/03
- Semana 6 | 04/03 - 11/03
- Semana 7 | 11/03 - 18/03
- Semana 8 | 18/03 - 25/03
- Semana 9 | 25/03 - 01/04
- Semana 10 | 01/04 - 08/04
- Semana 11 | 08/04 - 15/04
- Semana 12 | 15/04 - 22/04
- Semana 13 | 22/04 - 29/04
- Semana 14 | 29/04 - 06/05
- Semana 15 | 06/05 - 13/05
- Semana 16 | 13/05 - 20/05
- Semana 17 | 20/05 - 27/05
- Semana 18 | 27/05 - 03/06
- Semana 19 | 03/06 - 10/06
- Semana 20 | 10/06 - 17/06
- Semana 21 | 17/06 - 24/06
- Semana 22 | 24/06 - 01/07
- Semana 23 | 01/07 - 08/07
- Semana 24 | 08/07 - 15/07
- Projeto Final - A Apotecária - Fullstack
Na semana 1 aprendi sobre HTML e CSS. Comecei com ambientes de desenvolvimento e a estrutura de arquivos e tags do HTML. Depois, aprendi sobre classes em CSS, como posicionar elementos e como usar Flexbox para layouts responsivos.
- Projeto personalizado com paletas de cores pessoais e disposição de itens
- Imagem pessoal
- Projeto com intenção de ser usado como portfolio pessoal
- O site está disponível para visualização no seguinte link: Página pessoal
Na semana 2, estudo focado em HTML e CSS, na estruturação de páginas web com elementos como cabeçalho e rodapé. Aprendi a aplicar estilos utilizando CSS, incluindo o uso de variáveis para facilitar a manutenção do código. Apliquei conceitos de responsividade, estilização e acessibilidade.
semana2.mp4
- Projeto desenvolvido com características pessoais
- Vídeo adicionado ao fundo como um diferencial para o estilo do projeto
- Responsividade para acesso dos mais diferentes tipos de tela.
- O site está disponível para visualização no seguinte link: Página pessoal
- O projeto pode ser encontrado aqui: Repositório
Na semana 3, o foco foi em responsividade utilizando a abordagem mobile-first, que permite que os projetos se adaptem melhor a dispositivos móveis. Além disso, iniciei o aprendizado sobre Git e GitHub para compartilhar e colaborar em projetos.
A semana 4 foi dedicada ao JavaScript e HTML, onde desenvolvi um jogo simples para praticar lógica de programação. Este projeto serviu como uma introdução ao JavaScript, abordando conceitos básicos como variáveis, funções e manipulação de arrays.
Nesta semana, aprofundei o conhecimento em JavaScript, com foco em tipos, variáveis, funções, arrays, e objetos. Aprendi a estruturar e manipular dados de forma eficiente e a implementar funcionalidades mais complexas nos projetos.
Na semana 6, dei os primeiros passos com Node.js, criando uma biblioteca personalizada. Essa experiência inicial com Node.js foi fundamental para entender o backend e preparar para os próximos desafios.
Estudos avançados em JavaScript foram o foco da semana 7, explorando programação orientada a objetos (POO) e o funcionamento do HTTP para entender melhor como a web opera nos bastidores.
Iniciei o primeiro projeto prático, construindo um site responsivo completo para uma empresa de cosméticos. O desafio foi criar um layout flexível, adaptável a dispositivos móveis e desktops, aplicando tudo o que foi aprendido em HTML e CSS até agora. Porém como o primeiro projeto é o início do projeto final, vou apresentar apenas o projeto final. Segue os requisitos dessa primeira parte:
a. Estrutura do Site: Crie uma estrutura de arquivos e defina a estrutura HTML básica.
b. Cabeçalho e Rodapé: Desenvolva um cabeçalho e rodapé atraentes, aplicando estilos CSS.
c. Variáveis CSS: Utilize variáveis CSS para melhorar a manutenção do design.
d. Responsividade: Garanta que o site seja responsivo e se adapte a diferentes tamanhos de tela.
e. Publicação: Publique o projeto em um servidor ou plataforma de hospedagem.
Explorei a manipulação do DOM em JavaScript, criando páginas dinâmicas e interativas. Também aprendi a utilizar localStorage para armazenar dados no navegador.
Nesta semana, estudei mais sobre manipulação de elementos e trabalhei com APIs para consumir e tratar dados. Isso adicionou uma camada de interatividade e funcionalidade aos projetos.
Continuei com JavaScript, focando em métodos de array e requisições, essencial para manipular grandes volumes de dados e criar interfaces dinâmicas e responsivas.
O foco da semana 12 foi a validação de formulários com JavaScript, garantindo que os dados inseridos pelo usuário sejam corretos e seguros.
Introdução ao Figma, onde aprendi a utilizar essa ferramenta para design, incluindo a criação de componentes, auto layout e máscaras.
Semana dedicada ao estudo de Design System, abordando a definição de estilos, tokens e a criação e documentação de componentes reutilizáveis.
Estudos em banco de dados PostgreSQL, onde aprendi sobre comandos DML, DDL, e a utilização de views, sub-consultas e funções para otimizar consultas.
Finalizei os estudos em PostgreSQL e iniciei o aprendizado em MongoDB, um banco de dados NoSQL, essencial para aplicações que exigem flexibilidade na estrutura de dados.
Estudos em Node.js continuaram com a criação de uma API Rest utilizando Express e MongoDB. Aprendi a lidar com buscas, filtros, paginação e tratamento de erros.
A semana 18 focou em testes unitários e de integração em Node.js, essenciais para garantir a qualidade e o funcionamento correto das APIs. Também iniciei o segundo projeto prático, que era um aprofundamento e a finalização do primeiro projeto prático e o qual é o projeto final do curso. Segue os requisitos dessa segunda parte:
a. Funcionalidade Avançada: Implemente funcionalidades dinâmicas com JavaScript.
b. Formulários: Crie e valide formulários utilizando HTML, CSS e JavaScript.
c. Integração com APIs: Realize a integração do projeto com APIs externas, como geolocalização e redes sociais.
d. Testes: Realize testes de usabilidade e funcionalidades no projeto.
Consolidei os conhecimentos em Node.js, explorando middlewares, autenticação e autorização em APIs Rest, além de práticas de segurança.
Iniciei os estudos em React, criando componentes funcionais e utilizando hooks. Aprendi a estrutura básica de um projeto React e como gerenciar o estado da aplicação.
Aprofundei o conhecimento em React, trabalhando com Context API para gerenciamento de estado global e integrando o frontend com a API Rest desenvolvida anteriormente.
Continuei os estudos em React, abordando roteamento com React Router e otimização de performance em aplicações React.
Trabalhei na implementação de testes em aplicações React utilizando Jest e React Testing Library, garantindo a qualidade do código.
Finalização do projeto final e apresentação. Refatoração de código e aplicação das melhores práticas aprendidas ao longo do curso.
O Apotecaria é um projeto FullStack desenvolvido como parte do desafio do programa Desenvolve 2024 do Grupo Boticário. Ele integra uma API robusta de gerenciamento de usuários, criada com Express.js e MongoDB, com um site responsivo e interativo, desenvolvido em HTML, CSS e JavaScript.
No backend, destacam-se a implementação de funcionalidades essenciais, como o cadastro de usuários, autenticação segura com hashing de senhas via bcrypt, e a validação rigorosa dos dados com express-validator. Já no frontend, o foco está na criação de uma interface intuitiva e adaptável a diversos dispositivos, com elementos interativos e manipulação dinâmica do DOM, proporcionando uma experiência de usuário aprimorada.
- O projeto pode ser encontrado aqui: Repositório