https://github.com/epiled/spotify-2024

✔🎧 Página do Spotify 2024 com API em JSON Server
https://github.com/epiled/spotify-2024

api json-server react sass styles-components typescript

Last synced: 26 days ago
JSON representation

✔🎧 Página do Spotify 2024 com API em JSON Server

• Host: GitHub
• URL: https://github.com/epiled/spotify-2024
• Owner: Epiled
• License: mit
• Created: 2024-03-18T16:32:37.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-28T00:08:27.000Z (over 1 year ago)
• Last Synced: 2025-01-20T12:27:44.797Z (over 1 year ago)
• Topics: api, json-server, react, sass, styles-components, typescript
• Language: TypeScript
• Homepage: https://spotify-2024-seven.vercel.app
• Size: 1.65 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🎧 Spotify 2024

Projeto realizado dentro da imersão de Fron-End da Alura.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **Spotify 2024**

| :label: Tecnologias | react, typescript, sass, styled components, json-server, html, css, js, node, vite, eslint

![banner](https://github.com/user-attachments/assets/bf2e69b6-fe48-4c4d-b014-5488a9472270#vitrinedev)

 📃 Detalhes do projeto 


O projeto consiste em recriar uma página do Spotify 2024, utilizando uma API funcional em JSON Server para fornecer dados sobre artistas e playlists. O bootcamp conta com a participação e mentoria dos anfitriões: 

Guilherme Lima - CEO da Alura

Fernanda Degolin - Desenvolvedora Front-end na Globo

Mayara Cardoso - Desenvolvedora Front-end no Itaú.

![Badge](https://img.shields.io/github/last-commit/Epiled/spotify-2024?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/code-size/Epiled/spotify-2024?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/count/Epiled/spotify-2024?style=for-the-badge)

![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)

![Bagde](https://img.shields.io/github/v/release/Epiled/spotify-2024?style=for-the-badge)

![Bagde](https://img.shields.io/github/license/Epiled/spotify-2024?style=for-the-badge)

![Badge](https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black)

![Badge](https://img.shields.io/badge/-Typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)

![Badge](https://img.shields.io/badge/-Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)

![Badge](https://img.shields.io/badge/-Styled%20Components-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=white)

![Badge](https://img.shields.io/badge/-Json-000000?style=for-the-badge&logo=json&logoColor=white)

![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)

![Badge](https://img.shields.io/badge/-Vite.js-646CFF?style=for-the-badge&logo=vite&logoColor=white)

![Badge](https://img.shields.io/badge/-ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)

 📑 Tabela de Conteúdos 


   * [Detalhes do projeto](#detalhes-do-projeto)

   * [Tópicos Desenvolvidos](#topicos-curso)

   * [Demonstração](#demonstracao)

     - [Home](#home)

   * [Pré-Requisito](#pre-requisito)

   * [Instalação](#instalacao)

   * [Como usar](#como-usar)

     - [Subir Servidor](#subir-servidor)

     - [Abrir Site](#abrir-site)

   * [Tecnologias](#tecnologias)

   * [Autor](#autor)

 👩‍🏫 Tópicos desenvolvidos


* Site clone do Spotify 2024

* Desenvolvimento de uma API

* Adaptação para Mobile

 👀 Demonstração 


 Home 


https://github.com/user-attachments/assets/92ea209a-0a88-4d38-b76e-2abbb0cea97b

https://github.com/user-attachments/assets/096479a0-ff93-4a42-ba52-ba3f301a00ae

 🚨 Pré-requisito 



  
Node

  
JSON Server



 ⚙ Instalação 


```

1. git clone https://github.com/Epiled/spotify-2024.git

2. cd spotify-2024

3. npm install

```

 👩‍🏫 Como usar 


 Subir servidor 


```

1. Abra no seu terminal o diretorio "db"

2. json-server playlist.json

```

 Abrir site 


```

1. Abra no seu terminal o diretorio "spotify-2024"

2. npm start

2. Caso a url não abra sozinha acesse através deste caminho http://localhost:5173/

```

 🛠 Tecnologias 


As seguintes tecnologias foram usadas na construção deste projeto:



  
React

  
Typescript

  
Sass

  
Styled Components

  
JSON Server

  
HTML5

  
CSS3

  
JavaScript

  
Node.js

  
Vite

  
ESLint



 👨‍💻 Autor 




![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)

 


 Felipe De Andrade

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)

[![Gmail Badge](https://img.shields.io/badge/-felipe.deam98@gmail.com-c14438?style=flat-square&logo=Gmail&logoColor=white&link=mailto:felipe.deam98@gmail.com)](mailto:felipe.deam98@gmail.com)

[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)

[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)