{"id":16979418,"url":"https://github.com/phammings/spotify-clone","last_synced_at":"2026-04-09T17:11:12.585Z","repository":{"id":244584330,"uuid":"815664203","full_name":"phammings/Spotify-Clone","owner":"phammings","description":"Spotify Clone with Paywall","archived":false,"fork":false,"pushed_at":"2024-06-27T03:15:53.000Z","size":509,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T17:24:54.279Z","etag":null,"topics":["nextjs","postgresql","react","stripe","supabase","tailwindcss","vercel"],"latest_commit_sha":null,"homepage":"https://spotify.ryanlepham.com","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/phammings.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":"2024-06-15T19:06:30.000Z","updated_at":"2024-08-15T02:30:39.000Z","dependencies_parsed_at":"2024-06-18T23:14:10.381Z","dependency_job_id":"f1d950f7-484c-45de-9a0e-8d2f90a441e2","html_url":"https://github.com/phammings/Spotify-Clone","commit_stats":null,"previous_names":["phammings/spotify-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phammings%2FSpotify-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phammings%2FSpotify-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phammings%2FSpotify-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phammings%2FSpotify-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phammings","download_url":"https://codeload.github.com/phammings/Spotify-Clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244880657,"owners_count":20525515,"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":["nextjs","postgresql","react","stripe","supabase","tailwindcss","vercel"],"created_at":"2024-10-14T01:45:45.016Z","updated_at":"2025-12-30T20:50:31.317Z","avatar_url":"https://github.com/phammings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spotify Clone\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003ch3 align=\"center\"\u003eFull Stack Spotify Clone\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A full stack music streaming application using Next.js, React, Tailwind CSS, Supabase, PostgreSQL, and Stripe. This project replicates the core features and functionalities of Spotify, including user authentication, song uploading, playlist creation, and subscription management.\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#instructions\"\u003eInstructions\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nThe project focuses on creating a full stack music streaming application that replicates the core features of Spotify. The frontend is built with Next.js and React, providing a dynamic and responsive user interface. Tailwind CSS is used for styling to achieve a modern and sleek design.\n\nThe backend is powered by Supabase, an open-source Firebase alternative built on top of PostgreSQL. Supabase handles user authentication, song uploading, and database management. Stripe is integrated for payment processing, allowing users to subscribe to premium features.\n\nThis project aims to provide a comprehensive example of building a production-ready music streaming application, covering key aspects such as authentication, data management, and payment processing.\n\n## [Live Demo 🔗](https://spotify.ryanlepham.com)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n### Built With\n\n* [![Next.js][Next.js]][Next.js-url]\n* [![React][React]][React-url]\n* [![Tailwind CSS][Tailwind CSS]][Tailwind CSS-url]\n* [![Supabase][Supabase]][Supabase-url]\n* [![PostgreSQL][PostgreSQL]][PostgreSQL-url]\n* [![Stripe][Stripe]][Stripe-url]\n* [![Vercel][Vercel]][Vercel-url]\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\n- ✔️ Add song uploading functionality\n- ✔️ Implement playlist creation and management\n- ✔️ Develop a dynamic frontend using Next.js and React\n- ✔️ Implement user authentication and backend with Supabase (PostgreSQL)\n- ✔️ Integrate Stripe for subscription management\n- ✔️ Utilize Tailwind CSS for modern styling and design\n- ✔️ Deployed on Vercel with custom domain from AWS Route53\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- INSTRUCTIONS --\u003e\n## Instructions\n\n#### Prerequisites\n\n**Node version 14.x**\n\n##### Cloning the repository\n\n```shell\ngit clone https://github.com/phammings/Spotify-Clone.git\n```\n\n##### Install packages\n\n```shell\nnpm i\n```\n\n#### Setup .env file from .env.example\n\n```js\nNEXT_PUBLIC_SUPABASE_URL=\nNEXT_PUBLIC_SUPABASE_ANON_KEY=\nSUPABASE_SERVICE_ROLE_KEY=\n\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\nSTRIPE_SECRET_KEY=\nSTRIPE_WEBHOOK_SECRET=\n```\n\n#### Start the app\n\n```shell\nnpm run dev\n```\n\n#### Testing with Stripe Payment\n\nCredit Card Number:\n```\n4242 4242 4242 4242\n```\n\nFor the rest of the payment method details: choose any valid details (i.e. expiry date must be a future date).\n\n    \n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white\n[Next.js-url]: https://nextjs.org/\n[Tailwind CSS]: https://img.shields.io/badge/tailwindcss-000000?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=blue\n[Tailwind CSS-url]: https://tailwindcss.com/\n[Supabase]: https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge\u0026logo=supabase\u0026logoColor=white\n[Supabase-url]: https://supabase.com/\n[PostgreSQL]: https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white\n[PostgreSQL-url]: https://www.postgresql.org/\n[Stripe]: https://img.shields.io/badge/Stripe-626CD9?style=for-the-badge\u0026logo=Stripe\u0026logoColor=white\n[Stripe-url]: https://stripe.com/en-ca\n[React]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\n[React-url]: https://reactjs.org/\n[Vercel]: https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge\u0026logo=vercel\u0026logoColor=white\n[Vercel-url]: https://reactjs.org/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphammings%2Fspotify-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphammings%2Fspotify-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphammings%2Fspotify-clone/lists"}