{"id":25867211,"url":"https://github.com/sans-script/small-clone-of-spotify-web-ui","last_synced_at":"2026-04-18T09:31:40.849Z","repository":{"id":253866237,"uuid":"841232391","full_name":"sans-script/small-clone-of-spotify-web-ui","owner":"sans-script","description":"This is a simple music player built with Next.js that showcases artist information and plays previews of popular tracks. It's a great example of how to build a music-oriented web app using Next.js and the Spotify API.","archived":false,"fork":false,"pushed_at":"2024-09-02T21:15:03.000Z","size":76,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-15T18:59:41.546Z","etag":null,"topics":["api","clone-website","nextjs14-typescript","react","spotify","typescript"],"latest_commit_sha":null,"homepage":"https://small-clone-of-spotify-web-ui.vercel.app","language":"TypeScript","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/sans-script.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,"zenodo":null}},"created_at":"2024-08-12T01:38:52.000Z","updated_at":"2025-06-16T07:36:06.000Z","dependencies_parsed_at":"2025-03-02T03:34:29.222Z","dependency_job_id":"fa871dea-f443-4e83-b33d-3aa1eaa5dbb4","html_url":"https://github.com/sans-script/small-clone-of-spotify-web-ui","commit_stats":null,"previous_names":["sans-script/small-clone-of-spotify-web-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sans-script/small-clone-of-spotify-web-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fsmall-clone-of-spotify-web-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fsmall-clone-of-spotify-web-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fsmall-clone-of-spotify-web-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fsmall-clone-of-spotify-web-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sans-script","download_url":"https://codeload.github.com/sans-script/small-clone-of-spotify-web-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fsmall-clone-of-spotify-web-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31963966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["api","clone-website","nextjs14-typescript","react","spotify","typescript"],"created_at":"2025-03-02T03:34:24.992Z","updated_at":"2026-04-18T09:31:40.821Z","avatar_url":"https://github.com/sans-script.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Spotify Music Player (Next.js)\n\nThis is a simple music player built with Next.js that showcases artist information and plays previews of popular tracks. It's a great example of how to build a music-oriented web app using Next.js and the Spotify API.\n\n### Features\n\n- **Artist Page:** Displays artist details like name, image, followers, genres, and a list of their popular tracks.\n- **Track Previews:** Allows users to play short previews of tracks by clicking on them.\n- **Side Navigation:** Provides a sidebar with a list of artists for quick navigation.\n\n### Technologies\n\n- **Next.js:**  A React framework for building server-rendered and statically generated websites and applications.\n- **Spotify API:** Used to fetch artist and track information.\n- **Context API:**  Used to manage the audio playback state.\n- **Tailwind CSS:** For styling.\n\n### Setup\n\n1. **Clone the Repository:**\n   \n   ```bash\n   git clone https://github.com/your-username/spotify-music-player.git\n   ```\n3. **Install Dependencies:**\n   \n   ```bash\n   cd spotify-music-player\n   npm install\n   ```\n5. **Create an Environment Variable File (.env):**\n   \n   ```bash\n   touch .env\n   ```\n7. **Add Your Spotify API Credentials:**\n   \n   ```bash\n   NEXT_PUBLIC_SPOTIFY_CLIENT_ID=your_client_id\n   NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET=your_client_secret\n   ```\n9. **Start the Development Server:**\n    \n   ```bash\n   npm run dev\n   ```\n11. **Access the Application:**\n    \n   Open `http://localhost:3000` in your web browser.\n\n### Running the Application\n\nOnce the development server is running, you can explore the application. Navigate through the artists in the sidebar, and click on tracks to play their previews.\n\n### Notes\n\n- You'll need to create a Spotify Developer account and obtain API credentials to use this project.\n- The application fetches a limited amount of data from the Spotify API to keep things simple. You can extend the project to include more features.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fsmall-clone-of-spotify-web-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsans-script%2Fsmall-clone-of-spotify-web-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fsmall-clone-of-spotify-web-ui/lists"}