https://github.com/simonapiz/jammming
A playlist app with the Spotify API
https://github.com/simonapiz/jammming
codecademy-solutions front-end-development javascript reactjs spotify-api
Last synced: about 1 month ago
JSON representation
A playlist app with the Spotify API
- Host: GitHub
- URL: https://github.com/simonapiz/jammming
- Owner: SimonaPiz
- Created: 2023-06-05T14:22:06.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-05T15:22:07.000Z (about 3 years ago)
- Last Synced: 2025-04-07T00:48:29.589Z (about 1 year ago)
- Topics: codecademy-solutions, front-end-development, javascript, reactjs, spotify-api
- Language: JavaScript
- Homepage: http://Jammming_SimonaPiz.surge.sh/
- Size: 4.48 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
Jammming
> A Playlist App with the [Spotify API](https://open.spotify.com/) 
.
Live demo [http://Jammming_SimonaPiz.surge.sh/](http://Jammming_SimonaPiz.surge.sh/).
## Table of Contents
* [General Info](#general-information)
* [Technologies Used](#technologies-used)
* [Features](#features)
* [Setup](#setup)
* [Acknowledgements](#acknowledgements)
## General Information
In this project, I build a React web application.
I use my knowledge of React components, passing state, and requests with the Spotify API to build a website that allows users to:
- [x] search the Spotify library,
- [x] create a custom playlist,
- [x] then save it to their Spotify account.
### main Tasks
- ⚛️ Create static components
- ⚛️ Pass Down Search Result and Render Result List
- ⚛️ Pass down Playlist to Tracklist
- ⚛️ Add Tracks to a Playlist
- ⚛️ Remove Tracks from a Playlist
- ⚛️ Change the name of a Playlist
- ⚛️ Create method that Saves the Playlist to a User's Account
- ⚛ Hook up Search Bar to Spotify Search
- 🔑 Obtain a Spotify Developer Access Token
- ↔️ Implement Spotify Search Request
- ↔ Save a User's Playlist
- ➕ new Feature: Include preview samples for each track
## Technologies Used
- React 17
- Node.js 18
## Features
### Extra Features
- [x] Include preview samples for each track
- [ ] Only display songs not currently present in the playlist in the search results
- [ ] Add a loading screen while playlist is saving
- [ ] Update the access token logic to expire at exactly the right time, instead of setting expiration from when the user initiates their next search
- [ ] After user redirect on login, restoring the search term from before the redirect
- [ ] Ensure playlist information doesn’t get cleared if a user has to refresh their access token
## Setup
To run this project, install it locally using npm:
```
$ cd ../[directory]
$ npm install
$ npm start
```
## Acknowledgements
This project comes from the [Codecademy's Front-End Engineer](https://join.codecademy.com/learn/paths/front-end-engineer-career-path-b/) course.