
TanStarter
TanStarter · Programación
TanStarter es una plantilla SaaS full-stack construida sobre TanStack Start y Cloudflare Workers. Esta plantilla de TanStack Start incluye autenticación, facturación con Stripe, una capa de base de datos, almacenamiento de archivos, un blog, correo transaccional y hooks de IA ya conectados entre sí. Funciona como starter full-stack en React para quien quiere la parte aburrida ya resuelta. En lugar de pasar semanas pegando librerías hasta tener una app funcional, clonas un repositorio, defines tus variables de entorno y empiezas a construir. También cubre las necesidades de un starter de facturación con Stripe, así que los pagos no son una ruta que tengas que trazar por tu cuenta. Está pensado para desarrolladores individuales y equipos pequeños. Todo corre sobre la red perimetral de Cloudflare. La latencia se mantiene baja y los costes de hosting siguen siendo previsibles.

Acerca de TanStarter
Qué es TanStarter
TanStarter es una plantilla orientada a producción para crear aplicaciones full-stack en React. Reúne TanStack Start para el enrutado y las funciones de servidor, Cloudflare Workers para el cómputo, D1 para la base de datos relacional, R2 para el almacenamiento de objetos y Stripe para los pagos. El proyecto también admite Creem y Waffo como proveedores de pago alternativos mediante una interfaz compartida.
La propuesta es sencilla: todo SaaS necesita los mismos cimientos. Reconstruirlos desde cero es esfuerzo desperdiciado. TanStarter te da esos cimientos como código editable que es tuyo, no como un servicio de caja negra que alquilas. Los pagos cubren suscripciones, compras únicas de por vida y pruebas gratuitas. Entonces, ¿por qué no partir de una base que ya funciona? Los usuarios gestionan su facturación a través del portal de cliente de Stripe. Los módulos de correo, newsletter y notificaciones siguen el mismo patrón de proveedor, así que cambiar de proveedor significa implementar una interfaz en lugar de reescribir la app.
Cómo empezar
- Instala Git, Node.js 18+ y pnpm en tu máquina.
- Clona el repositorio y copia
.env.examplea.env. - Ejecuta
pnpm installpara traer las dependencias y luegopnpm devpara arrancar el servidor local enhttp://localhost:3000. - Define el nombre de tu proyecto, tu dominio personalizado y los bindings de D1/R2 en
wrangler.jsonc. - Sube los secretos con
pnpm wrangler secret bulk .env.productiony despliega conpnpm run deploy.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de TanStarter.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Fundadores en solitario que construyen un producto de pago sin un equipo de backend
- Equipos pequeños de ingeniería que quieren saltarse el trabajo repetitivo de configuración
- Desarrolladores de React que pasan de Next.js a TanStack Start
- Indie hackers que lanzan varios proyectos SaaS pequeños
Tareas
- Lanzar una app web de suscripción o de pago único
- Añadir autenticación, facturación y subida de archivos a una idea existente
- Prototipar una función de IA en Cloudflare Workers AI o Fal.ai
- Levantar un blog de contenidos junto a una app
Casos de uso
- Validar una idea SaaS durante un fin de semana sin montar infraestructura
- Migrar un proyecto personal de un framework más pesado a un stack más ligero
- Construir una herramienta interna que necesita inicios de sesión y pagos
- Probar el plan gratuito de Cloudflare antes de comprometerte con el hosting de pago
Funciones clave
Base de TanStack Start
La plantilla funciona sobre TanStack Start. Gestiona el enrutado basado en archivos, las funciones de servidor y la carga de datos en un mismo framework. Las rutas de servidor y las de cliente conviven, así que no tienes que manejar dos modelos mentales. Si ya conoces React y TypeScript, la curva de aprendizaje es corta.
Hosting en Cloudflare Workers
Todo se despliega en la red perimetral de Cloudflare. Los Workers corren cerca de tus usuarios y el plan gratuito permite paquetes de Worker sin comprimir de hasta 64 MiB, más que suficiente para una app típica. D1 cubre los datos relacionales y R2 el almacenamiento de archivos, ambos con bindings declarados en wrangler.jsonc. Esa combinación hace que nunca tengas que aprovisionar un servidor de base de datos o un almacén de objetos aparte solo para poner en línea una primera versión.
Pagos con varios proveedores
Stripe es el predeterminado, pero el módulo de pagos queda detrás de una interfaz de proveedor, así que Creem y Waffo también funcionan. Tienes suscripciones mensuales y anuales, pagos únicos de por vida y pruebas gratuitas. La gestión de la facturación se hace desde el portal de cliente de Stripe, y WeChat Pay y Alipay están disponibles cuando los activas en los ajustes de Stripe.
Hooks de IA integrados
Cloudflare Workers AI y Fal.ai alimentan las capacidades de IA que vienen de fábrica. Puedes añadir resumen, generación o funciones parecidas sin abrir otra cuenta con un proveedor. La capa de IA es opcional, así que puedes dejarla apagada si tu producto no la necesita.
Autenticación, correo y notificaciones
Las cuentas de usuario y las sesiones vienen preconfiguradas. Los módulos de correo, newsletter y notificaciones comparten el mismo patrón de proveedor que los pagos, así que mantienes una forma coherente de cambiar de servicio. El correo transaccional para registros, recibos y restablecimientos de contraseña funciona desde el primer día.
Blog y sistema de contenidos
Suelta un archivo Markdown en content/blog/ con frontmatter para título, descripción, fecha, categoría e imagen, y aparece solo en la página del blog. Con eso tienes un canal de contenidos para SEO sin tener que añadir un CMS aparte.
Integraciones de analítica
Google Analytics, Umami, Plausible y Microsoft Clarity son compatibles, y puedes usar cualquier combinación. Define las variables de entorno y se activan en producción. Sin código de seguimiento personalizado.
Actualizaciones de la plantilla
Puedes traer las mejoras del proyecto original añadiendo el repositorio de la plantilla como remoto de Git, haciendo fetch y fusionando. Tras resolver los conflictos, ejecuta pnpm install, aplica las migraciones nuevas y prueba. Mantener tu copia al día es una fusión rutinaria, no un proyecto de migración.
Ventajas y desventajas
Ventajas
- Trae autenticación, facturación, almacenamiento y correo ya conectados, así que empiezas por el código del producto
- Corre en la red perimetral de Cloudflare, lo que mantiene el hosting barato y predecible
- Los módulos de pago, correo y notificaciones se cambian mediante una sola interfaz de proveedor
- El código es tuyo, así que no hay dependencia de proveedor sobre la app en sí
- El plan gratuito de Cloudflare basta para desplegar una app real
Desventajas
- No trae i18n integrado; tienes inglés y chino mediante un módulo de mensajes en tiempo de compilación, y el resto lo conectas tú
- Está atado al stack de TanStack Start y Cloudflare, que no encaja con equipos en Next.js o AWS
- Requiere soltura con TypeScript, Git y pasos de despliegue por línea de comandos
- Pagas una vez por la plantilla, además de las tarifas de hosting y de pago que genere tu app
Preguntas frecuentes
Git, Node.js 18 o superior y pnpm. Clona el repositorio, copia .env.example a .env, ejecuta pnpm install y luego pnpm dev. La app arranca en http://localhost:3000.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con TanStarter.
Alternativas a TanStarter
Forefront
Forefront · ProgramaciónForefront es una plataforma web para construir con IA de código abierto. Te deja ajustar los principales modelos de lenguaje de código abierto con tus propios datos, evaluar cómo rinden y ejecutarlos a través de una API o exportarlos para alojarlos tú mismo. Los desarrolladores que quieren la comodidad de una plataforma cerrada pero insisten en ser dueños de sus modelos y sus datos son el público objetivo.
Startkit
StartKit.AI · ProgramaciónStartkit es un boilerplate para crear productos de SaaS con IA y wrappers de IA. Piénsalo como un boilerplate para startups de IA con las partes aburridas ya conectadas: autenticación, pagos con Stripe y Lemon Squeezy, límites de uso, correo transaccional y un kit de inicio de API de IA que habla con OpenAI, Anthropic, Groq o Llama. Clonas el repositorio, pones tu precio y te dedicas a la parte del producto por la que la gente paga de verdad. Está hecho con Next.js sobre React y Tailwind, así que buena parte del código boilerplate ya te resulta familiar.
Testim
Tricentis · ProgramaciónTestim es una plataforma de automatización de pruebas impulsada por IA para crear y ejecutar pruebas de extremo a extremo en aplicaciones web, móviles y Salesforce. Se apoya en el aprendizaje automático para mantener las pruebas estables cuando cambia una interfaz, así que los equipos dedican menos tiempo a reparar selectores rotos. No está nada mal para una herramienta de pruebas automatizadas que puedes empezar a usar hoy mismo. Creas pruebas grabando acciones en un navegador y luego añades JavaScript cuando necesitas más control. Es una opción sólida para equipos de QA con mucho trabajo.
