{"id":18990546,"url":"https://github.com/pedro-isidoro/my-hobbies","last_synced_at":"2026-04-10T12:31:48.437Z","repository":{"id":242243058,"uuid":"809057696","full_name":"pedro-isidoro/my-hobbies","owner":"pedro-isidoro","description":"Um projeto desenvolvido para apresentar meus hobbies em detalhes, onde serão apresentados em cards.","archived":false,"fork":false,"pushed_at":"2024-09-23T20:49:29.000Z","size":142530,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T11:16:09.717Z","etag":null,"topics":["api","git","github","hooks","html","javascript","json","npm","react","react-router-dom","styled-components","vite"],"latest_commit_sha":null,"homepage":"https://my-hobbies.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/pedro-isidoro.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-01T15:09:19.000Z","updated_at":"2024-09-23T20:49:33.000Z","dependencies_parsed_at":"2025-01-01T14:37:26.659Z","dependency_job_id":null,"html_url":"https://github.com/pedro-isidoro/my-hobbies","commit_stats":null,"previous_names":["pedro-isidoro/my-hobbies"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pedro-isidoro/my-hobbies","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-isidoro%2Fmy-hobbies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-isidoro%2Fmy-hobbies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-isidoro%2Fmy-hobbies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-isidoro%2Fmy-hobbies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedro-isidoro","download_url":"https://codeload.github.com/pedro-isidoro/my-hobbies/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-isidoro%2Fmy-hobbies/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31642718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","git","github","hooks","html","javascript","json","npm","react","react-router-dom","styled-components","vite"],"created_at":"2024-11-08T17:10:10.198Z","updated_at":"2026-04-10T12:31:48.394Z","avatar_url":"https://github.com/pedro-isidoro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Projeto Detalhando meus Hobbies\n\n## Seções\n\u003cul\u003e\n    \u003cli\u003e\n        \u003ca href=\"#desafios\"\u003eDesafios \u003c/a\u003e\u003cbr/\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#solucoes\"\u003eSoluções\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        Documentação\u003cbr/\u003e\n    - \u003ca href=\"#sinopse\"\u003eSinopse\u003c/a\u003e\u003cbr/\u003e\n    - \u003ca href=\"#execution\"\u003eExecução\u003c/a\u003e\u003cbr/\u003e\n    - \u003ca href=\"#documentacao\"\u003eDocumentação\u003c/a\u003e\u003cbr/\u003e\n    - \u003ca href=\"#fetch-api\"\u003eChamada de API\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#visual\"\u003eVisual do Projeto\u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n\n## Tecnologias Utilizadas\n- HTML\n- JS\n\n## Bibliotecas Utilizadas\n- React\n- Vite\n- Font Awesome\n- Styled Components\n- React Router Dom\n- TMDB - Filmes e Séries\n\n## Desafios\n\u003col id=\"desafios\"\u003e\n    \u003cli\u003e\n        Integrar o Styled Components e useContext\n    \u003c/li\u003e\n    \u003cbr/\u003e\n    \u003cli\u003e\n        Importar images por url comapcta\n    \u003c/li\u003e\n    \u003cbr/\u003e\n    \u003cli\u003e\n        Sobreposição indevida do Modal sobre livros\n    \u003c/li\u003e\n\u003c/ol\u003e\n\n## Soluções\n\u003col id=\"solucoes\"\u003e\n    \u003cli\u003e\n        Criando um arquivo jsx e nele se utilizando do hook createContexte, e passando como objects os themas que o sistema poderá receber.\u003cbr/\u003e E nos arquivos de código restante puxando seus estilos com useContext.\n    \u003c/li\u003e\n    \u003cbr/\u003e\n    \u003cli\u003e\n        Se utilizando da linha de código colocada no package.json = \"vite-jsconfig-paths\": \"^2.0.1\"\". E dentro dos códicos se usa o \"/path\".\n    \u003c/li\u003e\n    \u003cbr/\u003e\n    \u003cli\u003e\n        Ao pensar que o erro estava na estilização, criei um arquivo novo para isso, porém o erro ainda persistia. Então joguei o Modal para fora do loop Map, que estava chamando um array de informações trazidas de um arquivo JSON, e ao ser clicado o button para o abrir, fazia a chamada de uma função a qual enviava os dados do livro proprietário deste botão e refiz o caminho de estilização. Assim, por fim, resolvi o erro de sobreposição. \n    \u003c/li\u003e\n\u003c/ol\u003e    \n\n## Documentação\n\u003ch3 id=\"documentacao\"\u003eMinha documentação\u003c/h3\u003e\n\n\n\u003ch4 id=\"sinopse\"\u003eSobre\u003c/h4\u003e\n\u003cp\u003ePara este projeto pensei a princípio em fazer uma landing page, com design feito no Figma, apresentando com react-router-dom, para uma simples apresentação.\u003c/p\u003e\n\u003cp\u003ePara sua estilização decidi fazer ele todo com styled-components, o qual me deu uma grande dor de cabeça, por ser meu primeiro projeto o usando tanto e tão detalhadamente. Juntamente dele com estudos trazidos do meu curso proficionalizante, DevQuest, usei o useContext para partilhar as configurações padrão de palheta de cor para todo o projeto por meio de props, assim conseguindo desenvolver també um projeto com tema light e dark.\u003c/p\u003e\n\n\u003ch4 id=\"execution\"\u003eExecução\u003c/h4\u003e\n\u003cp\u003ePara este projeto acabei assistindo alguns vídeos de sliders feitos com vanilla js e curti, implementei no projeto, ajustei para ser como se fosse um baralho de cards apresentando um e o escondendo atrás dos outros após ser selecionado o próximo card.\u003cp/\u003e\n\u003cp\u003eNos cards de Filmes, Livros, Música e Cozinha eu inseri um Button, e se ultilizando do react-router-dom, ao ser clicado levará para uma página com mais informações sobre este determinado hobbie\u003c/p\u003e\n\u003cp\u003eA página sobre os filmes, pensei em usar uma API, escolhi a do TMDB, criei minha conta e listas com meus filmes e séries assistidos e favoritos. Usando-se do Axios e de hook personalizada, fiz a chamada de API, introduzinho nela as informações para puxar as listas com as informações que queria. Para não ficar tão simples, criel um arquivo com a estrutura genérica para um Modal, e se ultilizando das informações vindas da API, apresento elas no Modal\u003c/p\u003e\n\u003cp\u003eE para a página de séries, a príncipio queria fazer a mesma coisa, porém a API que iria usar (Não vou falar para não levar processo) era realmente muito mal desenvolvida. Então Fiz um arquivo JSON inseria as informações que precisava, coloquei as imagens dos livros no public, e se utilizando do \"vite-jsconfig-paths\" mostro elas com as informações em um modal também.\u003c/p\u003e\n\u003cp\u003ePor fim, para o responsivo, se utilizando do Styled-components, usei suas configurações e as coloquei tanto nos próprios arquivos dos components, quanto no global-style, para aqueles mais gerais.\u003c/p\u003e\n\n\u003ch4 id=\"fetch-api\"\u003eExecução\u003c/h4\u003e\n\u003cp\u003ePara a chamada da API TMDB, após assistir e ler sobre requisições, optei por usar o axios. E criando um arquivo e assim criar um Hook personalizado, passando como parâmetro o método, o ID da lista de filmes e o número da página.\u003c/p\u003e\n\u003cp\u003eE por fim, dentro do arquivo usando try/catch para tratamento da chamada e por fim retornando os valores desejados de dados, possíveis erros e carregamento dos dados.\u003c/p\u003e\n\n## Visual do Projeto\n\u003ch4 id=\"visual\"\u003eProjeto Final\u003c/h4\u003e\n\u003cimg src=\"./src/images/project/hobbie-homePage.gif\" alt=\"Project Responsive Image\"/\u003e\n\u003ch4 id=\"visual\"\u003ePost do Projeto\"\u003c/h4\u003e\n\u003ca href=\"https://www.linkedin.com/feed/update/urn:li:activity:7208826920656871424/\" target=\"_blank\"\u003eLinkedIn\u003c/a\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedro-isidoro%2Fmy-hobbies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedro-isidoro%2Fmy-hobbies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedro-isidoro%2Fmy-hobbies/lists"}