{"id":23307287,"url":"https://github.com/simonapiz/jammming","last_synced_at":"2026-05-08T17:41:11.047Z","repository":{"id":172776666,"uuid":"649737643","full_name":"SimonaPiz/Jammming","owner":"SimonaPiz","description":"A playlist app with the Spotify API","archived":false,"fork":false,"pushed_at":"2023-06-05T15:22:07.000Z","size":4702,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T00:48:29.589Z","etag":null,"topics":["codecademy-solutions","front-end-development","javascript","reactjs","spotify-api"],"latest_commit_sha":null,"homepage":"http://Jammming_SimonaPiz.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimonaPiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-05T14:22:06.000Z","updated_at":"2023-06-22T10:31:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"96cea3fa-8e13-4c59-a236-fcc848ad73c6","html_url":"https://github.com/SimonaPiz/Jammming","commit_stats":null,"previous_names":["simonapiz/jammming"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SimonaPiz/Jammming","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FJammming","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FJammming/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FJammming/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FJammming/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonaPiz","download_url":"https://codeload.github.com/SimonaPiz/Jammming/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonaPiz%2FJammming/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32791267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codecademy-solutions","front-end-development","javascript","reactjs","spotify-api"],"created_at":"2024-12-20T12:29:51.401Z","updated_at":"2026-05-08T17:41:11.012Z","avatar_url":"https://github.com/SimonaPiz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# \u003cimg src=\"https://github.com/SimonaPiz/Jammming/assets/91121660/94bee78d-b59d-46f2-9809-397a976b0785\" width=\"30px\" alt=\"Jamming Icon\"/\u003e Jammming\n\u003e A Playlist App with the [Spotify API](https://open.spotify.com/) \u003cimg src=\"https://github.com/SimonaPiz/Jammming/assets/91121660/75033841-68fe-476a-8bff-33b1420916f4\" width=\"16px\" alt=\"Spotify Icon\"/\u003e.\n\nLive demo [http://Jammming_SimonaPiz.surge.sh/](http://Jammming_SimonaPiz.surge.sh/). \u003c!-- If you have the project hosted somewhere, include the link here. --\u003e\n\n\u003cimg src=\"https://github.com/SimonaPiz/Jammming/assets/91121660/96ba886c-e1ab-48ee-aea8-82d8be62470c\" width=\"800px\" alt=\"search preview\" title=\"search preview\"/\u003e\n\n## Table of Contents\n* [General Info](#general-information)\n* [Technologies Used](#technologies-used)\n* [Features](#features)\n* [Setup](#setup)\n* [Acknowledgements](#acknowledgements)\n\u003c!-- * [License](#license) --\u003e\n\n\n## General Information\nIn this project, I build a React web application. \nI use my knowledge of React components, passing state, and requests with the Spotify API to build a website that allows users to:\n\n- [x] search the Spotify library,\n- [x] create a custom playlist,\n- [x] then save it to their Spotify account.\n\n### main Tasks\n- ⚛️ Create static components\n- ⚛️ Pass Down Search Result and Render Result List\n- ⚛️ Pass down Playlist to Tracklist\n- ⚛️ Add Tracks to a Playlist\n- ⚛️ Remove Tracks from a Playlist\n- ⚛️ Change the name of a Playlist\n- ⚛️ Create method that Saves the Playlist to a User's Account\n- ⚛ Hook up Search Bar to Spotify Search\n- 🔑 Obtain a Spotify Developer Access Token\n- ↔️ Implement Spotify Search Request\n- ↔ Save a User's Playlist\n- ➕ new Feature: Include preview samples for each track\n\n## Technologies Used\n- React 17\n- Node.js 18\n\n\n## Features\n### Extra Features\n- [x]  Include preview samples for each track\n- [ ]  Only display songs not currently present in the playlist in the search results\n- [ ]  Add a loading screen while playlist is saving\n- [ ]  Update the access token logic to expire at exactly the right time, instead of setting expiration from when the user initiates their next search\n- [ ]  After user redirect on login, restoring the search term from before the redirect\n- [ ]  Ensure playlist information doesn’t get cleared if a user has to refresh their access token\n\n\n## Setup\nTo run this project, install it locally using npm:\n\n```\n$ cd ../[directory]\n$ npm install\n$ npm start\n```\n\n\n## Acknowledgements\nThis project comes from the [Codecademy's Front-End Engineer](https://join.codecademy.com/learn/paths/front-end-engineer-career-path-b/) course.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonapiz%2Fjammming","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonapiz%2Fjammming","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonapiz%2Fjammming/lists"}