wdc saas starter kit

¡Aviso! Este kit de inicio no está completamente terminado, pero solo estoy haciendo este público por ahora si alguien quiere agregarlo. Me queman trabajar en esto, así que estoy abierto a cualquiera que quiera ayudar a contribuir a arreglar cualquier error que encuentren, etc.

Discordia

Puede unirse a Discord si desea hablar sobre el código aquí o sugerir características / etc.

https://discord.gg/n2ueyp7rfu

Tutorial del código (acceso temprano)

Para aquellos que desean más contenido de tutorial de video que explica esta base de código, muestra cómo implementarla y cómo mantenerlo en producción, estoy trabajando en una serie de tutorial de video pagada que se encuentra aquí https://webdevcody.gumroad.com /L/WDC-SAAS-Starter-kit-walkthrough. Estoy en el proceso de grabación y edición de videos, pero si compra ahora es un 50% de descuento en el precio original.

Bienvenido al kit de inicio

¡Bienvenido al kit de inicio WDC Next.js! Esta es una plantilla de GitHub que contiene la siguiente tecnología que creemos que es un excelente punto de partida para cualquier nuevo producto SaaS:

• Autorización
• Gestión de suscripción (Stripe)
• Integración de rayas / webhooks
• Gestión grupal
• Carga de archivo a R2
• Llovizna Orm
• Modo de luz / oscuro
• Sombreado
• CSS de viento de cola
• Análisis de postventa

Que contribuye

Si encuentra problemas obvios con este kit de inicio, no dude en enviar una solicitud de extracción o enviar y problemas. Queremos mantener este arrancador simple con la tecnología central elegida, por lo que no recomendamos tratar de agregar varias cosas sin aprobación previa.

Cómo empezar

Comience haciendo clic en el botón "Use esta plantilla" en el repositorio de GitHub. Sugerimos crear un nuevo repositorio para que pueda rastrear sus cambios en el código. Después, clone su propio repositorio a su computadora y comience a trabajar en ella.

Requisitos previos

Este kit de inicio utiliza Docker y Docker componen para ejecutar una base de datos de Postgres, por lo que deberá tenerlos instalados o modificar el proyecto para señalar una solución de base de datos alojada.

Cómo correr

1. cp .env.sample .env
2. npm i
3. docker compose up
4. npm run db:migrate
5. npm run dev

Configuración de envía

Este kit de inicio depende de algunos servicios externos, como Google Oauth , Stripe y Reven . Deberá seguir los pasos a continuación y asegurarse de que todo esté configurado y copiar los valores necesarios en su archivo .env:

Revender

Cree una cuenta en https://resend.com/ y genere una tecla API y pegue en correo electrónico_server_password

Configure su dominio en Reven para que pueda enviar correos electrónicos desde su dominio personalizado y configure correo electrónico para que coincida con su esperado de la línea. Para hacer esto, vaya a su proveedor de dominio y agregue los registros necesarios descritos en Reen.

Cloudflare R2

TODO: Agregue información sobre Bucket y Keys

Base de datos

Este kit de inicio usa Postgres. Supabase proporciona 2 bases de datos gratuitas de Postgres. Configurar una base de datos y obtener su base de datos_URL .

Configuración de rayas

Este kit de inicio usa Stripe, lo que significa que necesitará configurar una cuenta de Stripe en https://stripe.com. Después de crear una cuenta y un proyecto, deberá establecer las siguientes variables ENV:

• Stripe_api_key
• Next_public_stripe_key
• Stripe_webhook_secret
• Precio_id
• Next_public_stripe_manage_url

Cómo puede encontrar que se describen a continuación:

Llaves de rayas

Debe definir tanto next_public_stripe_key como stripe_api_key dentro de .env. Estos pueden encontrarse aquí:

• https://dashboard.stripe.com/test/apikeys

Teclas de webhook

Dependiendo de si está desarrollando localmente o implementando en Prod, hay dos rutas que debe tomar para obtener una clave webhook:

Desarrollo local

1. Instale el CLI de franja: para macOS o Linux, puede usar HomeBrew: brew install stripe/stripe-cli/stripe

• Para Windows, puede usar el instalador de Windows en la página Stripe CLI GitHub Latelies - https://github.com/stripe/stripe-cli/releases

2. Agregue Stripe CLI a su ruta: asegúrese de que el directorio que contenga el ejecutable de Stripe CLI esté en la variable de entorno de ruta de su sistema.
3. Proporcionamos una stripe:listen que puede ejecutar si desea configurar su aplicación de ejecución local en ListSen para cualquier evento de rayas. Ejecute este comando y copie el secreto webhook que imprime en la consola en su archivo .env.

Producción

Al ir a la producción, necesitará crear un punto final webhook y copiar su secreto webhook en stripe_webhook_secret :

1. https://dashboard.stripe.com/test/webhooks
2. Cree un punto final que apunte a https://your-domain.com/api/webhooks/stripe
3. Escuche la factura de eventos.payment_succeeded y checkout.session.
4. Encuentre su clave secreta de rayas y copie en sus proyectos

ID de precio (producto)

Deberá crear un producto de suscripción en Stripe:

1. https://dashboard.stripe.com/products/create
2. Haz tu producto único
3. Copiar el ID de precio
4. Pegar el ID de precio en .env de precio_id

Portal de clientes

Stripe tiene una forma incorporada para que los clientes cancelen sus suscripciones. Deberá habilitar esta función:

1. https://dashboard.stripe.com/settings/billing/portal
2. Haga clic en el botón Activar el enlace del portal
3. Copie su enlace de portal
4. Pegar como una variable envética como next_public_stripe_manage_url

Host_name

Al depender de la producción, desea establecer host_name en su FQDN, como https://you-domain.com

Configuración de autenticación

Proveedor de Google

Por defecto, este iniciador solo viene con el proveedor de Google que necesitará para configurar:

1. https://console.cloud.google.com/apis/credentials
2. Crea un nuevo proyecto
3. Configuración de la pantalla de consentimiento de OAuth
4. Crear credenciales - ID de cliente OAuth
5. Para los orígenes autorizados de JavaScript

• http: // localhost: 3000
• https://your-domain.com

6. Redirección autorizada URIS

• http: // localhost: 3000/api/auth/callback/google
• https://your-domain.com/api/auth/callback/google

7. Establezca su ID de Google y su secreto dentro de .env

• Google_client_id
• Google_client_secret

Proveedor de Github

TODO: Agregar información

Postre