Bem-vindo(a) ao "ComicStore", um site onde é possível comprar as revistas de história em quadrinhos da Marvel, estando disponível para acesso no link: https://comic-store-five.vercel.app/.
Este foi meu primeiro projeto utilizando React, após menos de uma semana de estudos para a sua implementação. Além disso, busquei desenvolver um site utilizando conceitos de LocalStorage e integração com a API da Marvel.
É válido ressaltar que todo planejamento, elaboração, estudos e desenvolvimento foi realizado ao longo de nove dias, possuindo funcionalidades ainda em andamento (cadastro, perfil do usuário e compras).
Caso queira saber um pouquinho mais do processo de elaboração e criação, fiz um breve benchmarking, elenquei possíveis referências e ideias de layout, escolhi as cores que possuíssem acessibilidade visual, e todo esse trajeto até chegar neste resultado final é possível visualizar no meu repositório do Figma.
Tive a oportunidade de consolidar alguns conceitos de =
- JavaScript (arrow function, return, map, filter, some e findIndex).
- CSS (referenciar classes e tags de pai para filho para não interferir em outros componentes).
- API (explorar documentação, utilização de token (chaves pública e privada) e criptografia com md5).
- LocalStorage (onde minha maior dificuldade foi a junção do componente (useState e useEffect) com o LocalStorage).
Quanto ao React aprendi e implementei conceitos de =
- Criação de componentes;
- Utilização dos Hook’s com a elaboração de uma página reativa (wishlist) ao estado (state) da aplicação;
- Utilização do import e export para variáveis e funções;
- Estruturação de pastas e arquivos do projeto com a utilização do index.js;
- Substituição do eventListener do JS;
- Referenciar função, definindo a função no componente pai para ser executada no componente filho (Comic.js e WishList.js).
Por fim, pude descobrir um pedacinho do universo incrível das bibliotecas do Node, com a utilização do Axios (de forma superficial utilizei para fazer a requisição da API), MD5 (utilizei para criptografar informações do token da API), Carrousel (utilização de um componente pronto ao invés de criar um do zero) e React-router (de forma superficial para navegação entre as páginas).
Observação: os testes referente ao layout e responsividade foram realizadas somente utilizando o Google Chrome e Android.