{"id":25773113,"url":"https://github.com/pplace11/spotify-imersao","last_synced_at":"2026-06-17T09:31:49.747Z","repository":{"id":274668312,"uuid":"923668558","full_name":"pplace11/Spotify-Imersao","owner":"pplace11","description":"Spotify Imersão é uma aplicação web desenvolvida em HTML, CSS e JavaScript durante a Imersão Alura. Permite criar e gerenciar playlists, descobrir novos artistas e acompanhar tendências musicais, tudo com uma interface amigável.","archived":false,"fork":false,"pushed_at":"2025-01-31T16:49:56.000Z","size":1410,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T04:47:01.565Z","etag":null,"topics":["alura","css","html5","javascript","json","node","npm","vscode"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/pplace11.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":"2025-01-28T16:54:32.000Z","updated_at":"2025-01-31T16:50:00.000Z","dependencies_parsed_at":"2025-01-28T17:49:56.607Z","dependency_job_id":null,"html_url":"https://github.com/pplace11/Spotify-Imersao","commit_stats":null,"previous_names":["pplace11/spotify-imersao"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pplace11/Spotify-Imersao","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pplace11%2FSpotify-Imersao","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pplace11%2FSpotify-Imersao/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pplace11%2FSpotify-Imersao/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pplace11%2FSpotify-Imersao/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pplace11","download_url":"https://codeload.github.com/pplace11/Spotify-Imersao/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pplace11%2FSpotify-Imersao/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34443232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-17T02:00:05.408Z","response_time":127,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["alura","css","html5","javascript","json","node","npm","vscode"],"created_at":"2025-02-27T04:33:10.205Z","updated_at":"2026-06-17T09:31:49.727Z","avatar_url":"https://github.com/pplace11.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Spotify Logo](https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg)\n\n# Spotify Imersão\n\nO **Spotify Imersão** é uma aplicação web desenvolvida em HTML e CSS durante a Imersão Alura. Permite criar e gerenciar playlists, descobrir novos artistas e acompanhar tendências musicais, tudo com uma interface amigável.\n\n## 📋 Funcionalidades\n\n- **Criar e Gerenciar Playlists:** Adicione e organize suas playlists favoritas.\n- **Descobrir Novos Artistas:** Explore novos artistas e músicas.\n- **Acompanhar Tendências Musicais:** Veja as músicas mais populares do momento.\n\n## 🛠️ Tecnologias Utilizadas\n\n- **HTML** \n- **CSS**\n- **JavaScript**\n\n## ⚙️ Como Executar o Projeto\n\n### Pré-requisitos\n\nCertifique-se de ter o Visual Studio Code e o Node.js instalados. Além disso, será necessário configurar um servidor local utilizando o json-server para levantar as imagens dos artistas que estão em JavaScript.\n\n### 1. **Clone o repositório:**\n\n```bash\ngit clone https://github.com/pplace11/Spotify-Imersao.git\ncd Spotify-Imersao\n```\n\n### 2. **Instale a extensão Live Server no Visual Studio Code:**\n\n- Abra o Visual Studio Code.\n- Vá até a aba de extensões (ícone de quadrado no lado esquerdo ou use o atalho Ctrl+Shift+X).\n- Procure por \"Live Server\" e clique em \"Install\" na extensão desenvolvida por Ritwick Dey.\n\n### 3. **Instale as dependências do Node.js:**\n```bash\nnpm install\n```\n\n### 4. **Configure e inicie o json-server:**\n```bash\nnpm install -g json-server\n```\n\n### 5. **Inicie o json-server:**\n```bash\njson-server --watch api-artists/artist.json --port 3000\n```\n\n## 🗂️ Estrutura do Projeto\n\n```plaintext\n📁 Spotify-Imersao/\n├── 📂 src/         # Scripts JavaScript e lógica da aplicação\n│   ├──📂 assets/         # Recursos estáticos como CSS, JS e imagens\n│   ├──📂 styles/         # Contém arquivos CSS que definem os estilos da aplicação\n│   │   ├── 📄 sidebar-footer.css      # Estilos da aplicação\n│   │   ├── 📄 reset.css               # Reset de estilos para consistência entre navegadores\n│   │   ├── 📄 main-content.css        # Define os estilos para a área de conteúdo principal da aplicação\n│   │   ├── 📄 vars.css                # Define variáveis de CSS para fontes e cores\n│   │   ├── 📄 media-queries.css       # Define estilos responsivos para diferentes tamanhos de tela\n├── 📂 api-artists/  # Contém os dados dos artistas\n│   ├── 📄 artist.json      # Arquivo JSON com os dados dos artistas\n├── 📄 script.js     # Script JavaScript para manipulação dos dados dos artistas\n├── 📄 index.html    # Página principal da aplicação\n└── 📄 README.md     # Documentação do projeto\n```\n\n## 📸 Preview\n\nAqui está uma visão geral da interface da aplicação:\n\n![Sptify Imersao Preview](src/assets/web/principal.png)\n![Sptify Imersao Preview](src/assets/web/segundo.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpplace11%2Fspotify-imersao","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpplace11%2Fspotify-imersao","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpplace11%2Fspotify-imersao/lists"}