{"id":19966721,"url":"https://github.com/annaluizacamargo/comicstore","last_synced_at":"2025-07-09T23:15:07.375Z","repository":{"id":65594863,"uuid":"593014235","full_name":"annaluizacamargo/ComicStore","owner":"annaluizacamargo","description":"Projeto em React de um site de venda de Histórias em Quadrinhos da Marvel, consumindo API.","archived":false,"fork":false,"pushed_at":"2025-03-05T22:18:49.000Z","size":327,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T23:39:12.681Z","etag":null,"topics":["api","css","html","javascript","marvel","marvel-api","reactjs"],"latest_commit_sha":null,"homepage":"https://comic-store-five.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/annaluizacamargo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-25T02:33:34.000Z","updated_at":"2025-03-05T22:18:52.000Z","dependencies_parsed_at":"2023-02-16T13:45:52.684Z","dependency_job_id":null,"html_url":"https://github.com/annaluizacamargo/ComicStore","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annaluizacamargo%2FComicStore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annaluizacamargo%2FComicStore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annaluizacamargo%2FComicStore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/annaluizacamargo%2FComicStore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/annaluizacamargo","download_url":"https://codeload.github.com/annaluizacamargo/ComicStore/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252272944,"owners_count":21721831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","css","html","javascript","marvel","marvel-api","reactjs"],"created_at":"2024-11-13T02:37:55.899Z","updated_at":"2025-05-04T00:31:31.810Z","avatar_url":"https://github.com/annaluizacamargo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Group 14](https://user-images.githubusercontent.com/100868704/215923042-a132d444-8a6a-4c88-af72-b7977765a747.png)\n\n## 🚀✨ Proposta do Desafio\nBem-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: \u003chttps://comic-store-five.vercel.app/\u003e.\n\n![Resultado Final](https://user-images.githubusercontent.com/100868704/215923051-effc0991-a0ad-4570-91a6-dce40028586c.png)\n\n## 🎯✨ Objetivos\nEste 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/).\nÉ 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).\nCaso 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.\u003cbr\u003e\u003cbr\u003e\n\n## 🧠✨ Dificuldades e o que aprendi\nTive a oportunidade de consolidar alguns conceitos de =\n- JavaScript (arrow function, return, map, filter, some e findIndex).\n- CSS (referenciar classes e tags de pai para filho para não interferir em outros componentes).\n- API (explorar documentação, utilização de token (chaves pública e privada) e criptografia com md5).\n- LocalStorage (onde minha maior dificuldade foi a junção do componente (useState e useEffect) com o LocalStorage). \u003cbr\u003e\u003cbr\u003e\n\nQuanto ao React aprendi e implementei conceitos de =\n- Criação de componentes;\n- Utilização dos Hook’s com a elaboração de uma página reativa (wishlist) ao estado (state) da aplicação;\n- Utilização do import e export para variáveis e funções;\n- Estruturação de pastas e arquivos do projeto com a utilização do index.js;\n- Substituição do eventListener do JS;\n- Referenciar função, definindo a função no componente pai para ser executada no componente filho (Comic.js e WishList.js).\n\nPor 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).\u003cbr\u003e\u003cbr\u003e\n\n\n## 🔧✨ Tecnologias utilizadas\n\u003cdiv style=\"display: inline_block\"\u003e\n  \u003cimg align=\"center\" alt=\"Anna-React\" height=\"30\" width=\"40\" src=\"https://camo.githubusercontent.com/48d099290b4cb2d7937bcd96e8497cf1845b54a810a6432c70cf944b60b40c77/68747470733a2f2f7261776769742e636f6d2f676f72616e67616a69632f72656163742d69636f6e732f6d61737465722f72656163742d69636f6e732e737667\"\u003e \n  \u003cimg align=\"center\" alt=\"Anna-Js\" height=\"30\" width=\"40\" src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg\"\u003e\n  \u003cimg align=\"center\" alt=\"Anna-HTML\" height=\"30\" width=\"40\" src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg\"\u003e\n  \u003cimg align=\"center\" alt=\"Anna-CSS\" height=\"30\" width=\"40\" src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg\"\u003e\n  API da Marvel disponível em = https://developer.marvel.com/.\n\u003c/div\u003e\u003cbr\u003e\u003cbr\u003e\n\n## 💻✨ Rodando o projeto\nObservação: os testes referente ao layout e responsividade foram realizadas somente utilizando o Google Chrome e Android.\u003cbr\u003e\n\nhttps://user-images.githubusercontent.com/100868704/215923739-1d4ddeea-b909-4e77-82ce-e35a87d9f5df.mp4\n\n\u003cbr\u003e\n\n## 🌺✨ Forma de contato\n\u003cdiv style=\"display: inline_block\"\u003e\n  \u003cimg align=\"left\" alt=\"Anna-pic\" height=\"150\" style=\"border-radius:50px;\" src=\"https://cdn.picrew.me/shareImg/org/202301/707090_N2E3YlxN.png\"\u003e\u003cbr\u003e\n  Caso tenha alguma sugestão ou queira entrar em contato, fico a disposição 🥰💖\n\u003c/div\u003e\u003cbr\u003e\u003cbr\u003e\n\u003cdiv\u003e\n  \u003ca href = \"mailto:luizafistarol@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.linkedin.com/in/anna-luiza-camargo-fistarol/\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e \n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannaluizacamargo%2Fcomicstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fannaluizacamargo%2Fcomicstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannaluizacamargo%2Fcomicstore/lists"}