{"id":19545831,"url":"https://github.com/alex-ray/teamscreen","last_synced_at":"2025-08-13T21:40:15.502Z","repository":{"id":68552054,"uuid":"336548810","full_name":"Alex-ray/teamscreen","owner":"Alex-ray","description":null,"archived":false,"fork":false,"pushed_at":"2021-02-23T17:43:52.000Z","size":663,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-14T16:04:13.907Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"teamscreen-git-master.alexjray.vercel.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/Alex-ray.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-02-06T13:52:03.000Z","updated_at":"2023-03-08T04:19:41.000Z","dependencies_parsed_at":"2023-06-12T01:00:17.422Z","dependency_job_id":null,"html_url":"https://github.com/Alex-ray/teamscreen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Alex-ray/teamscreen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fteamscreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fteamscreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fteamscreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fteamscreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alex-ray","download_url":"https://codeload.github.com/Alex-ray/teamscreen/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fteamscreen/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259843315,"owners_count":22920309,"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":[],"created_at":"2024-11-11T03:41:30.547Z","updated_at":"2025-06-14T16:04:18.665Z","avatar_url":"https://github.com/Alex-ray.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js Subscription Payments Starter\n\nThe all-in-one starter kit for high-performance SaaS applications. With a few clicks, Next.js developers can clone, deploy and fully customize their own SaaS subscription application.\n\n## Features\n\n- Secure user management and authentication with [Supabase](https://supabase.io/docs/guides/auth).\n- Powerful data access \u0026 management tooling on top of PostgreSQL with [Supabase](https://supabase.io/docs/guides/database).\n- Integration with [Stripe Checkout](https://stripe.com/docs/payments/checkout) and the [Stripe customer portal](https://stripe.com/docs/billing/subscriptions/customer-portal), all plumbing already set up.\n- Automatic syncing of pricing plans, and subscription statuses via [Stripe webhooks](https://stripe.com/docs/webhooks).\n\n## Demo\n\n- https://subscription-payments.vercel.app/\n\n[![Screenshot of demo](./public/demo.png)](https://subscription-payments.vercel.app/)\n\n## Architecture\n\n![Architecture diagram](./public/architecture_diagram.svg)\n\n## Deploy with Vercel\n\nThe Vercel deployment will guide you through creating a Supabase account and project as well as a Stripe test account and automatically creates the Stripe webhook endpoint for you. After installation of the Supabase and Stripe integrations, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments\u0026project-name=nextjs-subscription-payments\u0026repo-name=nextjs-subscription-payments\u0026demo-title=Next.js%20Subscription%20Payments%20Starter\u0026demo-description=Demo%20project%20on%20Vercel\u0026demo-url=https%3A%2F%2Fsubscription-payments.vercel.app\u0026demo-image=https%3A%2F%2Fsubscription-payments.vercel.app%2Fdemo.png\u0026integration-ids=oac_pb1dqJT8Ry2D99Q0o9qXWIhJ,oac_jUduyjQgOyzev1fjrW83NYOv\u0026external-id=nextjs-subscription-payments)\n\n[![Screenshot of Vercel deployment](./public/vercel-deploy.png)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments\u0026project-name=nextjs-subscription-payments\u0026repo-name=nextjs-subscription-payments\u0026demo-title=Next.js%20Subscription%20Payments%20Starter\u0026demo-description=Demo%20project%20on%20Vercel\u0026demo-url=https%3A%2F%2Fsubscription-payments.vercel.app\u0026demo-image=https%3A%2F%2Fsubscription-payments.vercel.app%2Fdemo.png\u0026integration-ids=oac_pb1dqJT8Ry2D99Q0o9qXWIhJ,oac_jUduyjQgOyzev1fjrW83NYOv\u0026external-id=nextjs-subscription-payments)\n\nOnce the project has been deployed, continue with the configuration steps below.\n\n## Configure Supabase Auth\n\n#### [Optional] - Set up OAuth providers\n\nYou can use third-party login providers like GitHub or Google. Refer to the [docs](https://supabase.io/docs/guides/auth#third-party-logins) to learn how to configure these.\n\n## Configure Stripe\n\n### Create product and pricing information\n\nFor Stripe to automatically bill your users for recurring payments, you need to create your product and pricing information in the [Stripe Dashboard](https://dashboard.stripe.com/test/products). When you create or update your product and price information, the changes are automatically synced with your Supabase database.\n\nStripe Checkout currently supports pricing plans that bill a predefined amount at a specific interval. More complex plans (e.g. different pricing tiers or seats) are not yet supported.\n\nFor example, you can create business models with different pricing tiers, e.g.:\n\n- Product 1: Hobby\n  - Price 1: 10 USD per month\n  - Price 2: 100 USD per year\n- Product 2: Freelancer\n  - Price 1: 20 USD per month\n  - Price 2: 200 USD per year\n\n### Configure the Stripe customer portal\n\n1. Set your custom branding in the [settings](https://dashboard.stripe.com/settings/branding).\n1. Configure the Customer Portal [settings](https://dashboard.stripe.com/test/settings/billing/portal).\n1. Toggle on \"Allow customers to update their payment methods\".\n1. Toggle on \"Allow customers to update subscriptions\".\n1. Toggle on \"Allow customers to cancel subscriptions\".\n1. Add the products and prices that you want to allow customer to switch between.\n1. Set up the required business information and links.\n\n### That's it\n\nThat's it, you're now ready to earn recurring revenue from your customers 🥳\n\n## Going live\n\nBefore going live, make sure you archive all your test mode Stripe products, so you don't end up having a mix of test and live mode products on your page. Before creating your live mode products, make sure to follow the steps below to set up your live mode env vars and webhooks.\n\nTo run the project in live mode and process real payments with Stripe, you can add the [Stripe Go Live](https://vercel.com/integrations/stripe-live) integration to your project. This will set up your live API keys and webhook secret as environment variables for the production environment.\n\nAfterward you will need to rebuild your production deployment for the changes to take effect. Within your project Dashboard, navigate to the \"Deployments\" tab, select the most recent deployment, click the overflow menu button (next to the \"Visit\" button) and select \"Redeploy\".\n\n## Develop locally\n\nDeploying with Vercel will have created a repository for you which you can clone to your local machine.\n\nNext, use the [Vercel CLI](https://vercel.com/download) to link your project:\n\n```bash\nvercel login\nvercel link\n```\n\n### Setting up the env vars locally\n\nUse the Vercel CLI to download the development env vars:\n\n```bash\nvercel env pull .env.local\n```\n\nThis will create a new `.env.local` file in your project folder. For security purposes you will need to set the `SUPABASE_SERVICE_ROLE_KEY` manually from your [Supabase dashboard](https://app.supabase.io/) (Settings \u003e API). Lastly, the webhook secret differs for local testing vs. when deployed to Vercel. Follow the instructions below to get the corresponding webhook secret.\n\n### Use the Stripe CLI to test webhooks\n\nFirst [install the CLI](https://stripe.com/docs/stripe-cli) and [link your Stripe account](https://stripe.com/docs/stripe-cli#login-account).\n\nNext, start the webhook forwarding:\n\n```bash\nstripe listen --forward-to=localhost:3000/api/webhooks\n```\n\nThe CLI will print a webhook secret (such as, `whsec_***`) to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env.local` file.\n\n### Install dependencies and run the Next.js client\n\n```bash\nnpm install\nnpm run dev\n# or\nyarn\nyarn dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-ray%2Fteamscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-ray%2Fteamscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-ray%2Fteamscreen/lists"}