https://github.com/gazdagb/jammming

An experimental Spotify playlist creator app built with React and Vite, using the Spotify Web API. Search for tracks, build playlists, and save them directly to your Spotify account. Developed as part of the Codecademy Fullstack Path. 🎧🎓
https://github.com/gazdagb/jammming

axios codecademy music-app oauth playlist-creator spotify spotify-api vite web-development

Last synced: 11 months ago
JSON representation

An experimental Spotify playlist creator app built with React and Vite, using the Spotify Web API. Search for tracks, build playlists, and save them directly to your Spotify account. Developed as part of the Codecademy Fullstack Path. 🎧🎓

• Host: GitHub
• URL: https://github.com/gazdagb/jammming
• Owner: GazdagB
• Created: 2024-10-17T18:11:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-05T21:34:39.000Z (about 1 year ago)
• Last Synced: 2025-06-16T19:49:48.010Z (12 months ago)
• Topics: axios, codecademy, music-app, oauth, playlist-creator, spotify, spotify-api, vite, web-development
• Language: JavaScript
• Homepage: https://gb-jamming.netlify.app/
• Size: 35.5 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎧 React + Vite Spotify Playlist App

This project is an experimental Spotify playlist creation app built using the Spotify Web API. It was developed as part of the Codecademy Fullstack Path curriculum. 🎓

## 🚀 Live Demo

🌐 Check out the live version here: [Live Demo](https://gb-jamming.netlify.app/)

## ✨ Features

* 🔐 Log in to your Spotify account

* 🔎 Search for tracks

* 📃 Create custom playlists

* ➕➖ Add and remove tracks from your playlist

## 🛠️ Technologies Used

* ⚡ Vite

* ⚛️ React

* 📡 Axios

## 📚 How to Use

* 🔑 Click Login to authenticate with Spotify.

* 🔍 Use the search bar to find your favorite tracks.

* ➕ Click Add to include them in your playlist.

* 📝 Give your playlist a name.

* 💾 Click Save to Spotify and it’ll appear in your Spotify account!

## 🧠 Lessons Learned

* Working with OAuth 2.0 authentication flow

* Managing API calls and authorization headers

* Handling state and component-based UI updates in React

* Building a frontend connected to a 3rd-party API

## Screenshots 

![alt text](/src/assets/screenshot-login.png)

![alt text](/src/assets/screenshot-playlist.png)

## 📄 License

This project is licensed under the MIT License.