Skip to content

Projeto em React de um site de venda de Histórias em Quadrinhos da Marvel, consumindo API.

Notifications You must be signed in to change notification settings

annaluizacamargo/ComicStore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Group 14

🚀✨ Proposta do Desafio

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/.

Resultado Final

🎯✨ Objetivos

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.

🧠✨ Dificuldades e o que aprendi

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).

🔧✨ Tecnologias utilizadas

Anna-React Anna-Js Anna-HTML Anna-CSS API da Marvel disponível em = https://developer.marvel.com/.


💻✨ Rodando o projeto

Observação: os testes referente ao layout e responsividade foram realizadas somente utilizando o Google Chrome e Android.

2023-01-31.22-35-15_Trim.mp4

🌺✨ Forma de contato

Anna-pic
Caso tenha alguma sugestão ou queira entrar em contato, fico a disposição 🥰💖


About

Projeto em React de um site de venda de Histórias em Quadrinhos da Marvel, consumindo API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published