Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/verma-kunal/spotify-clone-js
A music app using Vanilla Js and Spotify Web API
https://github.com/verma-kunal/spotify-clone-js
expressjs spotify-web-api vanilla-javascript
Last synced: about 5 hours ago
JSON representation
A music app using Vanilla Js and Spotify Web API
- Host: GitHub
- URL: https://github.com/verma-kunal/spotify-clone-js
- Owner: verma-kunal
- Created: 2024-07-30T22:38:49.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-07-30T23:08:41.000Z (3 months ago)
- Last Synced: 2024-07-31T02:41:57.421Z (3 months ago)
- Topics: expressjs, spotify-web-api, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 2.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spotify Clone using Vanilla JS
## Introduction
This project is a music streaming app built using Vanilla JavaScript and the Spotify Web API. It allows users to play random songs directly from the Spotify library. This clone aims to mimic the core functionalities of the Spotify app, providing a hands-on learning experience with APIs and front-end development.
### Tech Stack Used
- HTML, CSS
- Vanilla Js
- [Spotify Web API](https://developer.spotify.com/documentation/web-api)
- [HTML Audio Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement)
## Setting Up & Running
1. **Clone the Repository:**
```bash
git clone https://github.com/verma-kunal/spotify-clone-js.git
cd spotify-clone-js
2. **Install Dependencies:**
Ensure you have Node.js installed. Then, run:
```bash
npm install
3. **Set Up Environment Variables:**
Create a .env file in the root directory and add your Spotify API credentials:
```bash
CLIENT_ID=""
CLIENT_SECRET=""
PLAYLIST_ID=""
```
> Refer the [Spotify Web API documentation](https://developer.spotify.com/documentation/web-api) to learn about generating client id and secret keys.
4. **Start the Server:**
```bash
node server.js
5. **Access the App:**
Open your browser and go to http://localhost:3000 to start using the app.
# Demo Video
https://github.com/user-attachments/assets/9bf35c53-c5b0-4600-ab2b-235b0d8ceac2
## Resources
- [How to use Spotify's API with Javascript](https://youtu.be/SbelQW2JaDQ?feature=shared)
- [Getting Random Tracks using the Spotify API by Perry Janssen](https://perryjanssen.medium.com/getting-random-tracks-using-the-spotify-api-61889b0c0c27)
- [Spotify Web API Documentation](https://developer.spotify.com/documentation/web-api)
- [Creating a Spotify Clone Using HTML, CSS & JavaScript (Hindi)](https://youtu.be/ANzPM5-lwXc?feature=shared)