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
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy