https://github.com/annaluizacamargo/comicstore

Projeto em React de um site de venda de Histórias em Quadrinhos da Marvel, consumindo API.
https://github.com/annaluizacamargo/comicstore

api css html javascript marvel marvel-api reactjs

Last synced: 18 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/annaluizacamargo/comicstore
Owner: annaluizacamargo
Created: 2023-01-25T02:33:34.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2025-03-05T22:18:49.000Z (3 months ago)
Last Synced: 2025-04-07T23:39:12.681Z (about 1 month ago)
Topics: api, css, html, javascript, marvel, marvel-api, reactjs
Language: JavaScript
Homepage: https://comic-store-five.vercel.app/
Size: 319 KB
Stars: 4
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

![Group 14](https://user-images.githubusercontent.com/100868704/215923042-a132d444-8a6a-4c88-af72-b7977765a747.png)

## 🚀✨ 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: .

![Resultado Final](https://user-images.githubusercontent.com/100868704/215923051-effc0991-a0ad-4570-91a6-dce40028586c.png)

## 🎯✨ 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](https://developer.marvel.com/).
É 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. Para acesso basta entrar em contato comigo.

## 🧠✨ 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