🎵 Spotify Clone - Imersão Front-End Alura

📌 Sobre o Projeto

Este projeto é um clone do Spotify, desenvolvido como parte da Imersão Front-End da Alura. O objetivo principal era recriar a interface da plataforma, mas com um diferencial: enquanto o projeto original da Alura focava apenas em telas desktop, eu optei por desenvolver seguindo a abordagem Mobile-First, garantindo uma experiência fluida e responsiva em dispositivos móveis, com media queries para adaptações em telas maiores.

🚀 Tecnologias Utilizadas

O projeto foi construído utilizando as seguintes tecnologias:

• → Estrutura semântica e acessível.

• → Estilização moderna com flexbox, grid e variáveis CSS.

• (ES6+) → Interatividade e manipulação dinâmica da DOM.

🎨 Design e Estilização

• O design foi totalmente inspirado na interface oficial do Spotify.

• Adotei a abordagem Mobile-First, garantindo uma navegação fluida em telas menores e expandindo para versões desktop com media queries.

• Foram aplicadas animações sutis para melhorar a experiência do usuário.

📂 Estrutura de Arquivos

📁 spotify-clone
│── 📂 src
│   ├── 📁 api      → Arquivo de api
│   ├── 📁 css      → Arquivos de estilo
│   ├── 📁 favicon  → Arquivos de favicon
│   ├── 📁 html     → Páginas internas
│   ├── 📁 img      → Imagens do projeto
│   └── 📁 js       → Scripts de interação
│── index.html      → Página principal
│── License         → MIT License
└── README.md       → Documentação do projeto

🔥 Funcionalidades Implementadas

✔ Menu responsivo com ícones interativos. ✔ Sistema de busca dinâmica de artistas via API local. ✔ Seções destacadas (Músicas, Álbuns, Rádios, Destaques). ✔ Interações suaves e animações para melhor experiência. ✔ Modo de carregamento dinâmico (loading spinner). ✔ Navegação entre páginas sem recarregar completamente.

🛠️ Aprendizados

Esse projeto serviu para consolidar meus conhecimentos em desenvolvimento Front-End, especialmente nas áreas de:

• Arquitetura Mobile-First e otimização para telas maiores.

• Uso eficiente de variáveis CSS para facilitar a escalabilidade do código.

• Manipulação da DOM com JavaScript para criar interações dinâmicas.

• Consumo de APIs para busca e exibição de dados.

🎯 Desafios Superados

1️⃣ Recriar com fidelidade a interface do Spotify, respeitando espaçamentos, cores e interações. 2️⃣ Desenvolver um sistema de busca eficiente, que filtra e exibe artistas dinamicamente. 3️⃣ Implementar a responsividade corretamente, garantindo uma ótima experiência tanto em mobile quanto em desktop. 4️⃣ Aprimorar a acessibilidade, garantindo que usuários possam navegar de forma intuitiva.

📷 Preview

Aqui estão algumas capturas de tela do projeto em diferentes dispositivos:

Mobile

Desktop

🏁 Conclusão

Dediquei muito tempo e esforço neste projeto para deixá-lo o mais próximo possível da versão original do Spotify. Foi um desafio incrível que me permitiu evoluir como desenvolvedor Front-End e reforçar minhas habilidades práticas.

✨ Developer

👨‍💻 Este projeto foi desenvolvido por Bruno Teixeira como parte do meu portfólio de desenvolvimento Front-End. Sinta-se à vontade para entrar em contato ou contribuir com o projeto!

• 

•