{"id":20924902,"url":"https://github.com/gonzagadavid/chameleon","last_synced_at":"2026-02-27T19:49:42.068Z","repository":{"id":107665988,"uuid":"408302266","full_name":"Gonzagadavid/chameleon","owner":"Gonzagadavid","description":"Aplicação desenvolvida com React e Redux, onde permite que a pessoa usuária obtenha informações sobre suas bandas favoritas, procurando promover a experiência de estar em um ambiente feito especialmente para a banda pesquisada","archived":false,"fork":false,"pushed_at":"2024-04-07T16:12:33.000Z","size":63919,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T05:03:11.851Z","etag":null,"topics":["eslint","react","react-hooks","react-redux","react-router","redux","testing"],"latest_commit_sha":null,"homepage":"https://chameleonmusic.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gonzagadavid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-09-20T03:45:39.000Z","updated_at":"2023-05-01T02:27:13.000Z","dependencies_parsed_at":"2023-03-13T14:34:26.238Z","dependency_job_id":null,"html_url":"https://github.com/Gonzagadavid/chameleon","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/Gonzagadavid%2Fchameleon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fchameleon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fchameleon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gonzagadavid%2Fchameleon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gonzagadavid","download_url":"https://codeload.github.com/Gonzagadavid/chameleon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253981792,"owners_count":21994337,"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":["eslint","react","react-hooks","react-redux","react-router","redux","testing"],"created_at":"2024-11-18T20:27:58.856Z","updated_at":"2025-10-26T09:13:49.300Z","avatar_url":"https://github.com/Gonzagadavid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## **Infelizmente a [api](https://theaudiodb.com/api_guide.php) no momento, não está mais disponibilizando nenhum dado para projetos pessoais, pretendo construir uma api para atender esse projeto**\n\n# Projeto Pessoal\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/images/logo-white.gif\" alt=\"chameleon log\" width=\"500px\" /\u003e\n\u003c/div\u003e\n\n\u003ch1\u003e\u003ca href=\"https://chameleonmusic.vercel.app/\" \u003eVisit Chameleon\u003c/a\u003e\u003c/h1\u003e\n\n# Sumário\n\n- [Introdução](#introdução)\n- [Instruções para rodar localmente](#Instruções-para-rodar-localmente)\n- [Detalhes da aplicação](#Detalhes-da-aplicação)\n  - [Página Inicial](#página-inicial)\n  - [Details](#details)\n  - [Biography](#biography)\n  - [Discography](#discography)\n  - [Album Details](#album-details)\n  - [Track](#track)\n  - [Videos Music](#videos-music)\n  - [Favorites](#favorites)\n- [Tecnologias](#tecnologias)\n- [Testes](#testes)\n- [Instruções para rodar os testes localmente](#Instruções-para-rodar-os-testes-localmente)\n- [APIs](#apis)\n- [Deploy](#deploy)\n\n---\n\n# Introdução\n\nChameleon é uma aplicação que onde permite que a pessoa usuária obtenha informações sobre suas bandas favoritas, procurando promover a experiência de estar em um ambiente feito especialmente para a banda pesquisada. Também possui a funcionalidade de salvar bandas, tracks e albums em favoritos, sendo armazenados no local storage, tornando o acesso prático sem a necessidade de cadastro e login.\n\n---\n\n# Instruções para rodar localmente\n\n- clone o repositorio localmente `git clone git@github.com:Gonzagadavid/chameleon.git`\n- entre na pasta clonada `cd chameleon`\n- instale as dependencias `npm install`\n- rode aplicação com o comando `npm start`\n- aplicação será aberta em http://localhost:3000\n\n---\n\n# Detalhes da aplicação\n\n## Página inicial\n\nA página inicial possui uma barra de busca, onde a pessoa usuária insere o nome da banda, cantor ou cantora que deseja obter informações. Quando possui favoritos, um seletor com os logos correspondentes será renderizado logo abaixo da barra de busca.\n\n\u003cimg src=\"./assets/images/initial-page.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/initial-page-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\nCaso a pessoa usuária digite o nome da banda incorretamente ou o nome de uma banda que não está no banco de dados uma mensagem será renderizada na tela.\n\n\u003cimg src=\"./assets/images/message-initial.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/message-initial-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n## Details\n### Detalhes da banda ou artista\n\nA página details apresenta alguns detalhes iniciais da banda:\n- Ano de formação;\n- Estilo;\n- Gênero musical;\n- Pais;\n- Quantidade de membros.\nJá oferecendo a opção de adicionar a banda em favoritos.\n\n\u003cimg src=\"./assets/images/details.png\" alt=\"initial page\" width=\"725px\"\u003e  \u003cimg src=\"./assets/images/details-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n## Biography \n### Biografia da banda ou artista\n\nEssa página exibe a biografia da banda ou artista, podendo estar disponível em vários idiomas, para selecionar um dos idiomas um seletor é renderizado com as opções. Como imagem de fundo da biografia, fotos da banda são renderizadas dinamicamente em intervalos de 3 segundos.\n\n\u003cimg src=\"./assets/images/biography.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/biography-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n## Discography \n### Discografia da banda ou artista\n\nExibe os álbuns da banda ou artista ordenado pelo ano de lançamento, podendo ser filtrados pelo titulo, ao clicar em um dos álbuns, a pessoa usuária será redirecionada para a página de detalhes desse album.\n\n\u003cimg src=\"./assets/images/discography.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/discography-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n## Album Details \n### Destalhes do album selecionado\n\nApós a pessoa usuária escolher um album, será redirecionada para a página com detalhes desse album, contendo a historia do album, podendo estar disponível em vários idiomas, contendo um seletor para a escolha. Também é exibido as tracks desse album, podendo ser filtradas pelo nome, ao clicar em uma track, a pessoa usuária será redirecionada para a página dessa track.\n\n\u003cimg src=\"./assets/images/album-details.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/album-details-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n\n## Track\n### Letra da musica escolhido junto ao vídeo quando disponível\n\nAo clicar em um track a pessoa usuária é redirecionada para uma página com a letra e o vídeo quando disponível, o vídeo por padrão acompanhara o scroll, porém a pessoa usuária tem a opção de deixá-lo na parte superior da página ou até mesmo fecha-lo através de butões na parte inferior do vídeo.\n\n\u003cimg src=\"./assets/images/track.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/track-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n## Videos Music  \n\nExibe uma lista de todas as tracks que possuem vídeos, podendo ser filtradas, ao clicar em uma track, a pessoa usuária será direcionada para a página Track\n\n\u003cimg src=\"./assets/images/video-music.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/video-music-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n## Favorites\n\nExibe as tracks e álbuns salvos em favoritos, sendo que ao ser clicado é redirecionado para a página album details ou a página track, podendo também ser filtrado a partir de seus títulos.\n\n\u003cimg src=\"./assets/images/favorites.gif\" alt=\"initial page\"\u003e  \u003cimg src=\"./assets/images/favorites-mobile.gif\" alt=\"initial page mobile\" width=\"168px\"\u003e\n\n---\n\n# Tecnologias\n\n- React\n- React Router\n- Redux\n- Redux Thunk\n- React Select\n- Testing Library\n- MQ Polyfill\n- UUID\n- ESLint\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg height=\"100\" width=\"100\" src=\"./assets/icons/react.svg\"/\u003e \n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./assets/icons/reactrouter.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./assets/icons/redux.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./assets/icons/testinglibrary.svg\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg height=\"100\" width=\"100\" src=\"./assets/icons/eslint.svg\" /\u003e\n\u003c/div\u003e\n\n---\n\n# Testes\n\nUsando o biblioteca testing library, foi desenvolvido 100% de cobertura de testes unitários para a aplicação.\nPara rodar os testes localmente basta usar o comando `npm test` e `npm run coverage` para a verificação da cobertura;\n\n\u003cimg  src=\"./assets/images/coverage-terminal.png\" /\u003e\n\u003cimg  src=\"./assets/images/coverage-browser.png\" /\u003e\n\n---\n\n# Instruções para rodar os testes localmente\n\nDepois de clonar o [repositório e instalar as dependencias](#instruções-para-rodar-localmente), basta rodar o comando `npm test` \n\n---\n\n# APIs \n\nPara o desenvolvimento desse aplicativo foi utilizado a combinação de duas excelentes APIs: [The Audio DB](#https://www.theaudiodb.com/) e [Lyrics OVH](#https://lyricsovh.docs.apiary.io/)\n\n---\n\n# Deploy\n\nPara o deploy da aplicação foi escolhido a [Vercel](#https://vercel.com/), pois além de permitir o deploy gratuito de projetos pessoais, preserva o comportamento original da rotas dos projetos React usando React Router Dom.\n\n\u003ch1\u003e\u003ca href=\"https://chameleonmusic.vercel.app/\" \u003eVisit Chameleon\u003c/a\u003e\u003c/h1\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzagadavid%2Fchameleon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgonzagadavid%2Fchameleon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgonzagadavid%2Fchameleon/lists"}