Irei postar todos os meus projetos desenvolvidos durante o bootcamp FullStack na Kenzie Academy Brasil, a fim de mostrar meu progresso até aqui. Nesse repositório terão os projetos desenvolvidos no terceiro módulo ou M3
M1 | M2 | M3
O S significa SPRINT ou seja, S1 significa SPRINT 1, e todas as outras SPRINTS seguem a mesma lógica.
Os números são referentes aos números de cada atividade.
O M significa Módulo ou seja, M3 significa Módulo 3.
S1-14 - "PROPS: CARD DE PESSOAS"
Nesse projeto, eu desenvolvi uma lista de cards de pessoas, utilizando os conceitos de props em React.
React props modules +
S1-14 - "PRATICANDO CHILDREN"
Nesse projeto, eu desenvolvi uma lista de cards, utilizando os conceitos de props e children em React.
React props children modules +
S1-22 - "LISTA DE FRUTAS"
Nesse projeto, eu desenvolvi uma renderização de uma lista de frutas em React, utilizando o método map, bem como a soma dos valores da lista, utilizando o método reduce, e a filtragem de itens por categoria através do método filter, e foi adicionado um botão de adicionar novos itens à lista.
React props filter map reduce +
S1-25 - "FORMULÁRIO DE CADASTRO"
Nesse projeto, eu desenvolvi um formulário em React de cadastro de usuário, contendo nome, e-mail e senha, e um botão de envio. Possui também uma verificação caso os campos estejam vazios, retornar um alerta.
React form event onChange onSubmit +
S1-26 - "MANIPULANDO EVENTOS - NÚMEROS ALEATÓRIOS"
Nesse projeto, eu utilizei o useState do React para instaciar um valor aleatório de 1 a 100, e um botão para criar um novo número, que cada vez que é clicado, retorna outro número aleatório e renderiza na tela.
React form event onClick Math.floor Math.random +
Nesse projeto, eu utilizei o useState do React para instanciar a condiconal do usuário estar logado ou não, a função de login, ao clicar no botão, atualiza o state para true, e muda a mensagem que aparece na tela, a função de logout atualiza para false, e muda a mensagem que aparece na tela.
React event onClick useState props ternary operator +
Nesse projeto, eu utilizei o useState do React para instanciar a condiconal do usuário estar logado ou não, a função de login,depois de preencher o input e clicar no botão, atualiza o state para true, e muda a mensagem que aparece na tela, a função de logout atualiza para false, e muda a mensagem que aparece na tela.
React event onClick useState props ternary operator +
S1-33 - "CALLBACKS + SPREAD - TO-DO LIST"
Nesse projeto, eu desenvolvi uma lista de afazeres através do uso de callbacks e spread operator no React, onde, através de um form, é possível adicionar novas tarefas, que são renderizadas na lista, e ao clicar no botão de "Concluir", a tarefa é removida da lista.
React event onClick useState props +
S1-36 - "NU KENZIE"
Nesse projeto, eu desenvolvi uma aplicação para gerenciamento de gastos, cadastrando entradas e saídas de dinheiro. Ao adicionar alguma transação, um card é adicionado à lista de resumo financeiro, caso seja uma entrada, possui a borda verde, caso seja uma saída, possui a borda cinza. A soma do total de dinheiro também é atualizada à medida que ocorre as entradas e saídas. Também é possível excluir transações, dessa forma, a soma também é atualizada. A estilização está responsiva utilizando os conceitos de mobile first
React event modules onClick useState props ternary operator onChange onSubmit filter map reduce +
S2-08 - "BUSCANDO DADOS - API RICK AND MORTY"
Nesse projeto, desenvolvi uma interface que renderiza personagens da API do Rick and Morty, trazendo seu nome, imagem, status e specie
React event modules onClick useState useEffect API request responsive map +
Nesse projeto, dando continuidade ao anterior, adicionei dois botões com a funcionaliade de voltar ou passar de página, dessa forma, buscando mais personagens na API e renderizando em tela. A estilização foi feita utilizando a biblioteca Styled-Components e as requisições foram feitas através da biblioteca Axios.
React event modules onClick useState useEffect API request Styled-Components Axios responsive map +
S2-14 - "BURGUER KENZIE"
Nesse projeto, desenvolvi uma interface de uma hamburgueria, onde os dados eram renderizados através de API, utilizando a biblioteca Axios, é possível adicionar e remover itens do carrinho, e quando um item é adicionado mais de uma vez, é multiplicado no contador, possui um botão para remover todos os itens do carrinho, um input de pesquisa funcional e os dados do carrinho ficam armazenados no localStorage, logo, quando atualizamos ou saímos da página, os dados continuam armazenados, para uma melhor experiência do usuário. Toda a estilização foi feita utilizando a biblioteca Styled-Components e está responsiva para todos os tamanhos de tela.
React event modules onClick useState useEffect API request Styled-Components Axios responsive map +
S3-04 "ROTAS - ACESSO DE USUÁRIO"
Nesse projeto, desenvolvi uma interface simples para a prática de rotas, contendo um database. Na página inicial foram renderizados alguns botões contendo nomes de usuários e empresas, ao clicar em algum deles, era feita a verificação se se travava de um usuário ou empresa, e assim era feito o redirecionamento para a dashboard corerspondente, através das rotas, utilizando a biblioteca React Router DOM.
React event routes React Router DOM +
S3-08 "PRATICANDO FORMS"
Nesse projeto, desenvolvi um formulário de cadastro, com os campos de nome, e-mail e senha, utilizando a biblioteca React Hook Form, e uma validação utilizando a biblioteca Zod, para garantir que todos os campos fossem preenchidos antes de enviar o formulário, caso algum não fosse preenchido, era retornada uma mensagem de erro. Quando o formulário era devidamente preenchido e enviado, o usuário era redirecionado para outra página contendo seus dados.
React event Zod Reack Hook Form +
S3-11 "KENZIE HUB"
Nesse projeto, desenvolvi um sistema de login e cadastro. Os formulários foram feitos utilizando a biblioteca React Hook Form, e as validações foram feitas utilizando a biblioteca Zod. Dessa forma, foi possível garantir que todos os campos fossem preenchidos e atendessem aos requisitos antes de enviar a requisição de cadastro, também foi validada a confirmação de senha utilizando o método refine, para garantir que o usuário cadastrasse a senha correta. Da mesma forma, foi feita uma validação do formulário de login, para garantir que os campos de e-mail e senha fossem devidamente preenchidos antes de enviar a requisição. O resultado da requisição, de erro ou sucesso, foi exibido para o usuário através de um toast, utilizando a biblioteca Toastify. As requisições foram feitas utilizando a biblioteca Axios e a estilização, que está responsiva para todos os tamanhos de tela, foi feita utilizando a biblioteca Styled Components. A troca de rota entre as páginas foi feita utilizando a biblioteca React Router Dom.
React event routes toastify styled-components API request Axios Zod Reack Hook Form React Router DOM responsive mobile first toastify +
Nesse projeto, desenvolvi um contador simples utilizando os conceitos de Context API.
React Context API +
S4-06 "CRIANDO UM TEMA DARK/LIGHT"
Nesse projeto, desenvolvi uma interface simples de troca de tema dark/light utilizando os conceitos de Context API com styled-components.
React Context API styled-components +
S4-10 "KENZIE HUB - SEGUNDA PARTE"
Nesse projeto, dando continuidade à primeira parte do Kenzie Hub (S3-11), refatorei código antes feito, utilizando os conceitos de Context API, além disso, na dashboard adicionei a funcionalidade de adicionar uma nova tecnologia para a lista, editar e deletar tecnologias, através de modais. Os formulários foram feitos utilizando a biblioteca React Hook Form, os toasts de erro e sucesso foram feitos utilizando a biblioteca React Toastify. Foi feita também uma funcionalidade de AutoLogin e proteção de rotas utilizando o React Router DOM, dessa forma, quando não há usuário logado, não é possível acessar a dashboard e o mesmo é redirecionado para o login.
React event routes toastify styled-components API request Axios Zod Reack Hook Form React Router DOM responsive mobile first toastify Context API protected routes +
S5-13 "TYPESCRIPT - LISTA DE FRUTAS"
Nesse projeto, desenvolvi uma interface básica de uma lista de frutas utilizando TypeScript, renderizada através de uma requisição utilizando Axios, tipando devidamente a requisição, as passagens de props e states.
React TypeScript type API request Axios
S5-15 "TYPESCRIPT - TODO LIST"
Nesse projeto, desenvolvi uma interface básica contendo um formulário para adição de tarefas em uma ToDo List, onde a lista é renderizada em tela, contendo também a opção de deletar tarefa. Foi um exercício para a prática de tipagem em TypeScript e utlização das bibliotecas React Hook Form e Zod e o uso de Context API em TypeScript.
React TypeScript type React Hook Form zod Context API
S5-18 "KENZIE BURGER"
Nesse projeto, desenvolvi novamente o projeto Kenzie Burger, mas utilizando TypeScript, bem como adicionando funcionalidades de login e cadastro, , através de requisição de API ao efetuar o login,o usuário é redirecionado para a shop page, onde os produtos também são renderizados através de requisição de API, pode adicionar itens ao carrinho, remover e remover todos, possui uma barra de presquisa funcional e um botão de logout redirecionado para o login e limpano o localStorage. Foram utilizadas as bibliotecas: react hook form, zod, react toastify, axios e styled-components.
React TypeScript event routes toastify styled-components API request Axios Zod Reack Hook Form Styled-Components React Router DOM responsive mobile first toastify +
Nesse projeto, desenvolvi um modelo simples de fake API para praticar os conceitos aprendidos sobre banco de dados.
routes server database
PROJETO FRONTEND "HELPETS"
Esse projeto consiste em uma aplicação com sistema de login e cadastro para usuários e já possui um usuário admnistrador cadastrado. Na dashboard, são renderizados vários cards de ONGs da causa animal e um input de pesquisa onde é possível filtrar a ONG. Os usuários comuns podem fazer doações para as ONGs através de um modal e também podem clicar em um botão "Saiba mais" para ir para outra página onde são renderizados o nome, imagem e localização da ONG utilizando a API do Google Maps. Além disso, nessa página há um botão que leva ao site da ONG. Na página de usuário administrador, é possível adicionar, editar e deletar ONGs. Os cards são renderizados utilizando a lib Swiper para criar um carrossel. Toda estilização foi feita utilizando TailwindCSS e está responsiva para todos os tamanhos de tela.
React TypeScript event routes toastify styled-components API request Axios Zod Reack Hook Form TailwindCSS Swiper Google Maps API React Router DOM responsive mobile first toastify +
SPRINT-8 "PROJETO COM NEXT JS"
Esse projeto consiste em uma simples interface criada utilizando Next JS e SCSS para estilização.
Next JS TypeScript SCSS