{"id":20213894,"url":"https://github.com/justarale/playlist-creator","last_synced_at":"2026-04-12T14:48:46.305Z","repository":{"id":236953294,"uuid":"793512852","full_name":"justArale/playlist-creator","owner":"justArale","description":"Create a playlist based on your fav artist and mood.","archived":false,"fork":false,"pushed_at":"2024-08-19T13:30:10.000Z","size":9581,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T21:44:17.706Z","etag":null,"topics":["authentication","axios","react","react-router-dom","restful-api","spotify-web-api","tailwind-css","vite"],"latest_commit_sha":null,"homepage":"https://arale-spotify-project-old.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justArale.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-04-29T11:13:24.000Z","updated_at":"2024-08-21T10:13:33.000Z","dependencies_parsed_at":"2024-06-08T08:24:05.211Z","dependency_job_id":"b61813d3-b568-47aa-b3a3-84ae6bf90aea","html_url":"https://github.com/justArale/playlist-creator","commit_stats":null,"previous_names":["justarale/playlist-creator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justArale%2Fplaylist-creator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justArale%2Fplaylist-creator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justArale%2Fplaylist-creator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justArale%2Fplaylist-creator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justArale","download_url":"https://codeload.github.com/justArale/playlist-creator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241652945,"owners_count":19997575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["authentication","axios","react","react-router-dom","restful-api","spotify-web-api","tailwind-css","vite"],"created_at":"2024-11-14T06:12:41.294Z","updated_at":"2026-04-12T14:48:41.270Z","avatar_url":"https://github.com/justArale.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Playlist Creator\n\n## Overview\n\nThe Playlist Creator is a web application built with React, utilizing the Spotify API to create custom playlists based on user preferences for danceability. Users can search for artists and define the danceability range to generate a playlist that suits their mood.\n\n## Features\n\n- **Artist Search**: Users can search for their favorite artists to base their playlist on.\n- **Danceability Range Selection**: Users can specify a minimum and maximum danceability score to tailor the playlist to their energy level preferences.\n- **Playlist Generation**: Based on the selected artist and danceability range, a playlist is generated for the user.\n- **Favorite Tracks**: Users can mark tracks as favorites, which are then saved for later retrieval on a separate backend server.\n- **Related Artists**: Provides recommendations for artists related to the user's choices, enhancing music discovery.\n\n## Installation\n\nTo set up the project locally, follow these steps:\n\n1. Clone the repository: git clone [\\[this repository\\]](https://github.com/justArale/playlist-creator)\n2. Install dependencies: cd playlist-creator \u0026\u0026 npm install\n3. Set up environment variables:\n- Create a `.env` file in the project root.\n- Add `VITE_CLIENT_ID` and `VITE_CLIENT_SECRET` with your Spotify API client ID and secret.\n\n4. Run the development server: npm run dev\n\nThis will run the app in development mode. Open [http://localhost:5173](http://localhost:5173) to view it in the browser.\n\n## Backend Server\n\nThe project includes a fake JSON Server backend to handle operations like saving favorite tracks.\n\n### Setup and Running Backend Server\n\n1. Ensure you have `json-server` and `morgan` installed, if not run: npm install json-server morgan\n2. Set up a `db.json` file in your server directory with the following structure:\n```json\n{\n  \"deletedSongs\": [],\n  \"favoriteSongs\": []\n}\n```\n3. Start the server: node server.js\n\nThis script runs a JSON server that listens for requests to add or retrieve favorite tracks. It uses Morgan for logging and is configured to allow cross-origin requests.\n\n## Backend Server Code\n\nHere's the core setup for your fake backend:\n\n```json\nrequire(\"dotenv\").config();\nconst jsonServer = require(\"json-server\");\nconst morgan = require(\"morgan\");\n\nconst server = jsonServer.create();\nconst router = jsonServer.router(\"db.json\");\nconst middlewares = jsonServer.defaults();\nconst PORT = process.env.PORT || 3000; // Default to 3000 if PORT not specified\n\nserver.use(middlewares);\nserver.use(morgan(\"dev\"));\nserver.use((req, res, next) =\u003e {\n  res.header(\"Access-Control-Allow-Origin\", \"*\");\n  next();\n});\nserver.use(router);\n\nserver.listen(PORT, () =\u003e {\n  console.log(`JSON Server is running at port ${PORT}`);\n});\n\n```\n\n\n## Usage\n\n- **Home Page**: Start by searching for an artist in the search box.\n- **Set Danceability**: Adjust the danceability range using the slider.\n- **Generate Playlist**: Click the \"Create Playlist\" button to generate your playlist based on the selected criteria.\n- **Favorite Songs**: Click the heart icon next to each song to save it as a favorite.\n\n## Components\n\n- `SearchArtist`: Component for searching and selecting artists.\n- `RangeButton`: Component to select the danceability range.\n- `LoadResults`: Component that handles the API calls to Spotify and displays the generated playlist along with options to save favorite tracks.\n\n## Dependencies\n\n- **React**: For building the user interface.\n- **Axios**: Used for making HTTP requests to the Spotify API.\n- **React Router**: For handling routing within the application.\n- **Seperate Backendserver**: To save your favorite tracks.\n- **Toastify**: For displaying notifications.\n\n## Contributing\n\nContributions are welcome! Please fork the repository and submit a pull request with your enhancements. Make sure to follow the existing coding style and include comments where necessary.\n\nFor major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\nThis project is licensed under the MIT License - see the [MIT License](https://github.com/justArale/playlist-creator/blob/main/LICENSE) file for details.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustarale%2Fplaylist-creator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustarale%2Fplaylist-creator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustarale%2Fplaylist-creator/lists"}