https://github.com/designtechti490/spotify-react

This project is a clone of the Spotify web application. It aims to replicate the layout of Spotify pages. It was developed during the 2nd edition of Imersão Dev from Alura Courses.
https://github.com/designtechti490/spotify-react

alura reactjs spotify-clone

Last synced: 9 months ago
JSON representation

This project is a clone of the Spotify web application. It aims to replicate the layout of Spotify pages. It was developed during the 2nd edition of Imersão Dev from Alura Courses.

• Host: GitHub
• URL: https://github.com/designtechti490/spotify-react
• Owner: designtechti490
• Created: 2025-02-09T17:35:24.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2025-02-09T22:34:21.000Z (11 months ago)
• Last Synced: 2025-02-09T23:25:32.735Z (11 months ago)
• Topics: alura, reactjs, spotify-clone
• Language: JavaScript
• Homepage: https://spotify1-react.netlify.app
• Size: 9.12 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Spotify Clone

![Preview](github/preview.png)

## 🔍 Project Overview

This project is a clone of the Spotify web application. It aims to replicate the layout of Spotify pages. It was developed during the 2nd edition of Imersão Dev from Alura Courses.

## ✔️ Content

- Design inspired by Spotify

- Font Awesome icons

- Fonts from Google Fonts

- Responsive design for desktop and mobile devices

- Search Artists

## 💡 Technologies Used

![HTML](https://img.shields.io/badge/-HTML-121011?style=for-the-badge&logo=html5) 

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

![JavaScript](https://img.shields.io/badge/-JavaScript-121011?style=for-the-badge&logo=javascript) 

![ReactJS](https://img.shields.io/badge/-ReactJS-121011?style=for-the-badge&logo=react) 

## ⚡ Setup

1. Clone the repository:

  ![clone-repo](github/clone-repo.png)

2. Navigate to the project directory:

  ![change-to-directory](github/change-to-directory.png)

3. Install dependencies:

![install-dependencies](github/install-dependencies.png)

4. Start the development server:

  ![start-server](github/start-server.png)

5. Install json-server to host Mocked APIs:

  ![install-json_server](github/install-json_server.png)

6. Host API server with json-server:

  ![host-api](github/start-api-host.png)

## 🤝 Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

## 📝 License

This project is licensed under the MIT License.

## 📲 Connect with Me

[![Twitter](https://img.shields.io/badge/Twitter-000000?style=for-the-badge&logo=x&logoColor=white)](https://www.twitter.com/designtechtidev)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/designtechtidev)

[![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/designtechti490)

[![Personal Website](https://img.shields.io/badge/Portfólio-%23000000.svg?style=for-the-badge&logo=About.me&logoColor=white)](https://designtechti490.github.io/portfolio-simplificado/)

[![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white)](https://www.instagram.com/designtechti.dev)

**Made with 💜 by [@designtechti490](https://github.com/designtechti490)**