De Todo App a B2B SaaS con Next.js y Clerk

Rate this content
Bookmark

Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?


Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.


En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.

Dev Agrawal
Dev Agrawal
153 min
09 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La masterclass se centra en la construcción de una aplicación básica de Todo y su transformación en un producto SaaS completamente funcional utilizando herramientas modernas de desarrollo. Herramientas de desarrollo como Next.js, Vercel, Clerk, PlanetScale y Stripe se utilizan para simplificar el proceso de desarrollo. La masterclass cubre temas como la solución de problemas, la adición de interactividad e integración de bases de datos, la implementación de autenticación y pago, la personalización de los componentes de Clerk, la adición de planes de pago premium con integración de Stripe y la implementación de características multi-tenant. Se anima a los participantes a proporcionar comentarios y compartir sus proyectos construidos con Clerk.

1. Introducción a la Masterclass

Short description:

Gracias a todos por estar aquí. La masterclass se llama De una TodoApp a una Aplicación SaaS B2B. Vamos a comenzar con una aplicación muy básica de Next.js que es una aplicación Todo. Y al final de esta masterclass, queremos llegar a un producto SaaS completamente funcional que podamos desplegar y tener usuarios para él. A lo largo de nuestro tiempo como desarrolladores de software, a menudo tenemos ideas o proyectos que enfrentan fricción al intentar construir un software funcional. Las preocupaciones adyacentes, como el despliegue, las bases de datos, la autenticación y los pagos, a menudo se interponen. Sin embargo, hay una nueva generación de herramientas de desarrollo que está cambiando esto. Estas herramientas aprovechan la nube, son confiables y escalables, y optimizan la experiencia del desarrollador.

Gracias a todos por estar aquí. Permítanme compartir rápidamente mi pantalla para que podamos comenzar esta fiesta. La masterclass se llama De una TodoApp a una Aplicación SaaS B2B. Oh, ¿qué está pasando allí? Genial. Permítanme asegurarme de tener el chat aquí. Obviamente hay un código QR aquí, pero realmente no podemos usar códigos QR. No es la mejor opción para transmitir o, digamos, en Zoom. Permítanme copiar y pegar este enlace para el kit de inicio de la masterclass, o el repositorio de inicio de la masterclass aquí en el chat.

Así que básicamente la idea de la masterclass es que vamos a comenzar con una aplicación muy básica de Next.js que es una aplicación Todo. Ni siquiera funciona. Es una aplicación Todo que no funciona. Y al final de esta masterclass, queremos llegar a un producto SaaS completamente funcional que podamos desplegar y tener usuarios para él, incluso miles o millones de usuarios. Esa es la idea que queremos conseguir para la masterclass de hoy. De nuevo, es una masterclass muy práctica. Les animo encarecidamente a que sigan el ritmo. Y la mejor manera de seguir el ritmo es a través del repositorio de inicio. Y antes del repositorio de inicio, asegúrense de tener estas cosas instaladas. Obviamente, si han hecho algún tipo de desarrollo con JavaScript React antes, probablemente ya tengan Git y node.js instalados. Pero lo que sería realmente útil es tener instalado el CLI de Stripe. También voy a mostrar rápidamente cómo se ve el repositorio. Se ve algo así. Permítanme comprobar si pueden ver esto. Sí. Así que, este es el repositorio de GitHub que deberían poder ver desde la aplicación Todo hasta la SaaS B2B. Y esto les muestra cómo clonarlo, entrar en él, y luego. Así que, específicamente voy a estar usando BUN a veces. Es simplemente un reemplazo para npm. Así que, cada vez que vean algo como BUN install, o si me ven escribiendo BUN dev o BUN run un script, simplemente podemos reemplazar eso con npm. De hecho, podría hacerlo con npm. Y realmente asegúrense de que pueden ir a los servicios que vamos a estar usando a lo largo de esta masterclass, y pueden crear una cuenta allí. Y la parte más importante es que asegúrense de tener instalado el CLI de Stripe, porque vamos a estar usando el CLI de Stripe un par de veces a lo largo de esta masterclass. Ahora antes de realmente entrar en la parte práctica, y en este punto voy a cambiar de diapositivas. Así que, asegúrense de tener abierto el repositorio, tienen todo lo que necesitan, o pueden empezar a instalar y configurar el repositorio al lado. Mientras yo rápidamente me presento. Soy dev. Ese es mi nombre. También soy un dev. He estado escribiendo aplicaciones de JavaScript de pila completa durante unos siete años ahora, y actualmente trabajo como defensor del desarrollador en Clerc, que es un patrocinador de React Summit, y Clerc es una solución de gestión de usuarios para React, como vamos a ver pronto en esta masterclass. Y antes de realmente entrar en, como, la parte práctica, quiero transmitir el punto de lo que estamos tratando de lograr hoy. ¿Alguna vez, como desarrollador de software, has tenido esos momentos en los que alguien se acerca con ideas para una nueva aplicación? O, digamos, hey, los tableros Kanban realmente apestan. Quiero algo más sencillo. Quiero una forma más sencilla de hacer la gestión de proyectos. O si tienes tus propias ideas de cómo podría ser una mejor aplicación de planificación de viajes, o ya estás en camino de incluso construir una startup a partir de tu idea, o tal vez incluso has contratado a un equipo y asegurado un poco de financiación, y estás bien encaminado para cambiar el mundo con la mejor aplicación de gestión de tareas que el mundo ha visto, o la próxima generación de plataforma de medios sociales descentralizada, o recién salida de San Francisco, esto es cómo la IA cambiará tu producto de vida. Básicamente, la idea es, ¿alguna vez has tenido, como, muchas de estas grandes ideas de aplicaciones que deseas que existan y que quieres construir? ¿Cuántas de estas ideas llegan a producción? ¿Qué tal un prototipo? ¿Qué tal solo una demo? Tal vez algo que armamos durante el fin de semana, tal vez algo que conseguimos con amigos para el fin de semana, o tal vez vamos a hackatones, y allí estamos tratando de construir algunas cosas. Así que lo que quiero que, lo que quiero que todos piensen es, a lo largo de nuestro tiempo como desarrollador de software, ¿cuántas veces ha pasado eso? Cuando tenemos ideas, o tenemos, o tal vez incluso tenemos proyectos, tenemos startups, pero entonces hay esta especie de fricción inevitable que surge cada vez que intentamos impulsar esto hacia adelante y construir un software funcional a partir de él. Porque a medida que pasamos de la fase de ideación a la izquierda a una fase de software funcional a la derecha, hay muchas cosas como, okay, ¿dónde despliego esto? ¿Cómo despliego esto? Necesito conseguir una base de datos, ¿necesito Docker? La gente está hablando de Lambdas. Todo el mundo está volviendo a Postgres. ¿Cómo añado Authon a esto? Acabo de hackear un tablero de control. No quiero construir perfiles de usuario, invitaciones de organización, integrar con servicios de correo electrónico, asegurarme de que todo esté seguro. Probablemente también vas a estar almacenando algunos datos sensibles. Y si alguna vez quieres cobrar a tus usuarios, ¿cómo gestionas los pagos? ¿Vas a tratar ahora con números de tarjetas de crédito? Hemos oído hablar de algo llamado Stripe. ¿Cómo funciona eso? Así que estas son las ideas de lo que entra en esta sección roja, que son las preocupaciones adyacentes. Estas no son realmente cosas que están relacionadas con la idea, la cosa que realmente quieres construir, pero estas cosas inevitablemente se interponen. Y empiezan a ocupar más y más de nuestro esfuerzo, de nuestro esfuerzo de ingeniería, y eso es lo que realmente hace que ir de la idea a las aplicaciones de trabajo, sea un proceso doloroso. Y por eso a menudo vemos, o a menudo vemos, grandes equipos, grandes empresas que ya tienen un montón de recursos, un montón de expertos en ingeniería, un montón de infraestructura existente. Y porque tienen todo eso, pueden simplemente iniciar una nueva cosa y empezar una nueva aplicación, empezar un nuevo proyecto. Y por eso tenemos grandes empresas que constantemente prueban cosas nuevas. Y se mantienen constantemente en el mercado porque están constantemente experimentando con nuevas ideas con su infraestructura existente. Esto también es por qué no funciona realmente para equipos pequeños. Como si yo y mi amigo nos juntáramos para construir algo, realísticamente, ¿qué tipo de aplicación podemos realmente construir antes de que ahora tengamos que contratar a un montón de más gente para cuidar de estas preocupaciones adyacentes para que podamos convertirlo en un negocio real? Y estas son cosas que a menudo nos impiden ir hasta el final con nuestras ideas y construir aplicaciones reales. Pero de lo que estoy aquí para hablar hoy es de cómo eso ha cambiado, o al menos cómo está cambiando. Porque hay una nueva generación de herramientas de desarrollo que están haciendo esto posible. Estas herramientas tienen algunas características muy únicas. En primer lugar, aprovechan completamente lo que la nube tiene para ofrecer, lo que significa que son confiables, escalables y baratas. Así que no te preocupas por la infraestructura. La segunda cosa es que estas herramientas optimizan para la experiencia del desarrollador, lo que significa que el objetivo es darnos a nosotros como desarrolladores de software capacidades poderosas con una buena experiencia de desarrollador. Así que tienes todo el poder y todos estos sistemas e infraestructuras complejas preconstruidas para ti. Pero no solo te dan capacidades, puedes integrarte con ellos sin problemas y seguir trabajando en tu competencia central. Tu competencia central es la aplicación que estás tratando de construir. Es tu aplicación de planificación de viajes, es tu aplicación de IA, es tu aplicación de gestión de proyectos de próxima generación.

2. Introducción a las Herramientas de Desarrollo y Configuración

Short description:

La nueva generación de herramientas de desarrollo elimina el esfuerzo y el espacio mental dedicado a las preocupaciones adyacentes, permitiendo a los equipos centrarse en su competencia principal. Con estas herramientas, los equipos pequeños pueden construir y operar aplicaciones que sirven a miles o millones de usuarios. Las excusas como la falta de conocimientos o las preocupaciones sobre la escalabilidad ya no son válidas. En esta masterclass, construiremos una aplicación SaaS utilizando Next.js, Vercel, Clerc, PlanetScale y Stripe. Comencemos clonando el repositorio de GitHub e instalando las dependencias.

Esa es tu competencia principal que quieres construir, no lidiar con Kubernetes, estos archivos YAML o configuraciones de webpack o estas APIs REST con horrible documentation. Dedica 10 minutos a ello y ya está, y nunca más pensarás en autenticación o vulnerabilidades o cumplimiento o ataques de bots. Esa es la mentalidad que estas herramientas pueden inculcar. Y veo que la gente sigue llegando. Gracias a todos por asistir. Repositorio de GitHub que hemos mostrado aquí. También está enlazado en el chat. Puedes registrarte para obtener una cuenta para estos. Y también asegúrate de tener node.js y tener instalado el CLI de Stripe.

Bien, entonces, lo que sucede con la nueva generación de herramientas de desarrollo es que realmente eliminan el esfuerzo y el espacio mental que tenemos que dedicar a estas preocupaciones adyacentes. Esto significa que realmente lo único en lo que estás pensando es en tu competencia principal. Es tu idea aquí, es lo que está en verde. Así que lo que eso significa es que los equipos no necesitan ser enormes. No necesitas tener mucha infraestructura existente para empezar a construir aplicaciones reales con este conjunto de herramientas. Puedes tener simplemente un equipo pequeño de tres a cinco personas o incluso 10 personas, 20 personas que pueden construir, operar y soportar un software, una aplicación que potencialmente está sirviendo a miles o millones de usuarios. Y esa es una expectativa completamente realista de tener con estas herramientas porque eso es lo que mucha gente está haciendo hoy en día. De nuevo, la mentalidad en la que esto nos pone es lo que me gusta llamar sin más excusas. Es decir, cuando tengo una idea sólida que creo que realmente va a funcionar o que quiero experimentar con ella, no tengo estas excusas de, bueno, realmente no conozco las bases de datos o sé que esto nunca va a escalar, nunca podré hacerlo escalar, o nunca podré hacer esto lo suficientemente seguro. Si esta es una aplicación de IA que estoy construyendo, tal vez tenga miedo de los bots. Tal vez tenga miedo de que los bots vengan, entren, abusen de tus servicios para obtener créditos gratis. Pero, estas ya no son excusas que tengo porque estas herramientas, esto completamente elimina eso de mí. Así que eso es lo que vamos a hacer hoy. Construyamos una aplicación SaaS con estas herramientas. Vamos a usar Next.js como nuestro framework, vamos a usar Vercel como el host. Vamos a usar Clerc para la gestión de usuarios y autenticación. Vamos a usar PlanetScale para la database y vamos a usar Stripe para todo nuestro flujo de pagos. Y, realmente, eso es todo lo que tengo para las diapositivas de hoy. Y, en este punto, podemos pasar a la parte práctica.

Bien, así que lo que tenemos aquí es el repositorio de GitHub. Vale, tengo preguntas. ¿Necesitaré una cuenta de Stripe y PlanetScale? Definitivamente necesitarás una cuenta de Stripe. El paso de PlanetScale, si quieres, estamos empezando con una database SQLite, así que si quieres seguir con eso durante la duración de la masterclass, puedes hacerlo. Pero una vez que lleguemos al paso de PlanetScale, en esta masterclass, repasaré el paso de crear realmente la cuenta. Así que no necesariamente tienes que crear todas estas cuentas ahora mismo. Ahora mismo, lo más importante es que puedas clonar el repositorio y luego puedes ejecutar NPM install y entonces todos los repositorios deberían estar, todas las dependencias deberían estar disponibles para ti. Necesitarás una cuenta de Stripe porque estamos integrando pagos y puedes tener una cuenta de PlanetScale si quieres conectarte con bases de datos en vivo. Bien, así que mientras se terminan de instalar las dependencias, vamos a familiarizarnos un poco con este código base. Obviamente todo lo importante está dentro de nuestra carpeta SRC. Publica el enlace de Git. Sí, dame un segundo. Aquí. Así que este es el enlace para el repositorio de GitHub. Asegúrate de clonarlo e instalar las dependencias. Y nuestras dependencias están instaladas. Ahora podemos ejecutar NPM run dev y deberíamos ver nuestra aplicación de tareas aquí en la pantalla en un momento. Pero hasta entonces, veamos nuestra aplicación. Tenemos nuestra carpeta SRC y creo que mi ordenador puede estar luchando por recursos en este punto, pero seguiremos adelante. Y dentro de aquí, tenemos una página de inicio y tenemos una página de panel de control. Así que puedes pensar en esta página de inicio como una especie de página de aterrizaje. Estás obteniendo este error, se requiere la URL de la database. Así que lo que puedes hacer en ese caso es que puedes ir a tu archivo dot env. Deberías tener una URL de database por defecto en tu env. Bien, así que en tu archivo dot env, podemos deshacernos de estos dos, pero puedes tener una URL de database igual a esta cadena aquí. Así que file colon db.sqlite. Así que si estás obteniendo el error de que te falta la URL de la database, solo asegúrate de que esto se añade en tu archivo dot env. Voy a pegar eso en el chat. Gracias por señalar eso. Básicamente solo necesitamos apuntar la aplicación hacia el archivo SQLite que se va a utilizar como database. Así que estamos empezando con solo una database SQLite de demostración aquí y puedes ignorar todo lo demás en el entorno por ahora. Así que ahora deberías tener la aplicación funcionando. Avísame si todos han llegado hasta este punto. Y nuestra página de inicio es básicamente como, así que si vas a tu archivo de diseño aquí, tu archivo de diseño en src app layout. Ahora esto tiene algunas cosas que, en cierto sentido, no deberían estar allí. Así que podemos deshacernos de esto rápidamente. Si ves este import de clerk-nextjs, puedes deshacerte de eso. Puedes deshacerte de clerk-provider y user-button de la sección. Vamos a añadir estos de nuevo más tarde, pero ahora mismo si solo estás construyendo nuestra aplicación de tareas no necesitamos eso. Pero lo que sí necesitamos es si vamos a nuestra página de panel de control, en nuestra página principal aquí, tenemos un enlace para ir al panel de control. Y si hacemos clic en él, deberíamos ver, ¿qué está pasando aquí? Dame un segundo. Oh, estoy silenciado.