"SpotClone" é um clone da página web do Spotify criado durante a primeira #ImersãoFrontEnd da #Alura. O objetivo deste projeto é estudar e aprimorar minhas habilidades em desenvolvimento front-end.
- HTML5: Utilizado para a estruturação do site.
- CSS3: Usado para estilizar os componentes, criar layouts responsivos e animações.
- JavaScript: Utilizado para adicionar interatividade ao site, manipulando elementos HTML e CSS.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
Este projeto utiliza o [email protected] para simular uma API REST. Para instalar o json-server, você precisará executar o seguinte comando no terminal:
npm install -g [email protected]O json-server é essencial para o funcionamento da barra de busca durante a execução do projeto.
Após executar este comando, o json-server irá iniciar um servidor na porta 3000 e você poderá realizar requisições GET para http://localhost:3000/artists para buscar os artistas.
- Clone o repositório
git clone https://github.com/seuusuario/SpotClone.git- Inicie a simulação da API
json-server --watch api-artists/artists.json --port 3000- Abra o arquivo
index.htmlno seu navegador de preferência.
Para simular uma API de busca de artistas, este projeto utiliza o [email protected]. O json-server é uma ferramenta que permite criar uma API REST falsa para desenvolvimento e prototipagem.
O arquivo api-artists/artists.json contém os dados dos artistas que são retornados quando uma busca é realizada na barra de busca do SpotClone.
Para iniciar a simulação da API, execute o seguinte comando no terminal:
json-server --watch api-artists/artists.json --port 3000Este projeto está hospedado no GitHub Pages e pode ser acessado através do seguinte link: SpotClone.
No entanto, é importante notar que a funcionalidade de busca não funcionará na versão hospedada no GitHub Pages. Isso ocorre porque o GitHub Pages é uma hospedagem de página estática e não suporta a execução do json-server necessário para a simulação da API de busca de artistas.
Para experimentar a funcionalidade de busca, você precisará clonar o repositório e executar o projeto localmente conforme descrito na seção "Como Executar o Projeto".