Crea una tienda online desde cero con Coderblock
Crea una tienda online full stack describiéndola en lenguaje natural y perfecciona mediante el chat el catálogo, el carrito, la autenticación, los pagos y las herramientas de administración. Este tutorial te guía desde el primer prompt hasta la publicación de una tienda con una base de datos real y el proceso de pago de Stripe.
Qué vas a crear
En este tutorial crearás una tienda online responsive y completa a partir de una sencilla descripción en el chat.
Al terminar, tendrás:
- un catálogo con páginas de detalle de los productos
- búsqueda, categorías y disponibilidad
- un carrito
- cuentas de cliente e historial de pedidos protegido
- proceso de pago de Stripe en modo de prueba
- un área de administración para gestionar productos y pedidos
- una base de datos Postgres real con Row Level Security
- una versión publicada en producción con SSL
Coderblock genera el frontend con React, Vite, TypeScript y Tailwind CSS, además del backend y la base de datos. Tú gestionas el proyecto mediante una conversación en lenguaje natural, sin tener que configurar manualmente rutas, migraciones de la base de datos ni webhooks de pago.
1. Inicia un nuevo proyecto para tu tienda
Abre Coderblock y crea un proyecto nuevo. Puedes empezar con la plantilla específica para tiendas online o, si prefieres crear la tienda desde cero, comenzar describiendo lo que quieres desarrollar.
Por ejemplo:
Crea una tienda online moderna de accesorios sostenibles para el hogar. Diseña una página de inicio responsive, un catálogo de productos, filtros por categoría, páginas de detalle de los productos, un carrito, cuentas de cliente, proceso de pago con Stripe, historial de pedidos y un área de administración para gestionar productos y pedidos. Utiliza una paleta de colores neutros y cálidos, y haz que la interfaz sea accesible tanto desde equipos de escritorio como desde dispositivos móviles.
Cuanta más información proporciones al agente sobre el tipo de productos, el estilo que buscas, las páginas importantes y las funciones necesarias, más se acercará la primera versión a lo que tienes en mente.
Coderblock creará el frontend, el backend y la base de datos, y mostrará el resultado en la vista previa de desarrollo en tiempo real, disponible en la dirección .coderblock.dev del proyecto.
Puedes mantener abiertos el chat y la vista previa al mismo tiempo para ver cómo cambia la tienda mientras trabajas.
2. Revisa y perfecciona la tienda
Ahora es el momento de explorar lo que has creado. Prueba la navegación, la página de inicio, el catálogo, las páginas de producto y el carrito. Revisa el resultado tanto en equipos de escritorio como en las pantallas más pequeñas de los dispositivos móviles.
El primer resultado es solo un punto de partida. Puedes seguir modificándolo directamente desde el chat mediante solicitudes específicas.
Por ejemplo:
- “Fija el encabezado y mantén visible el número de artículos del carrito.”
- “Muestra los productos en una cuadrícula de cuatro columnas en equipos de escritorio y de una columna en móviles.”
- “Añade filtros por categoría, precio y disponibilidad.”
- “Añade un estado para el carrito vacío con un enlace para volver al catálogo.”
- “Muestra productos relacionados debajo de la descripción de cada producto.”
- “Añade estados de carga, error y ausencia de resultados.”
Los cambios aparecen en la vista previa en tiempo real en cuestión de segundos. Una buena estrategia es avanzar en pequeños bloques: haz una o dos solicitudes relacionadas cada vez, revisa el resultado y continúa con el siguiente cambio.
3. Crea el modelo de datos de productos y pedidos
Una vez definida la estructura de la tienda, puedes pedir al agente que cree el modelo de datos necesario. Por ejemplo:
Crea tablas de base de datos para productos, categorías, pedidos y artículos de los pedidos. Cada producto debe tener nombre, descripción, precio, SKU, cantidad disponible, categoría, imagen, estado activo y marcas de tiempo. Los pedidos deben estar asociados a clientes autenticados e incluir el estado del pago, el estado de preparación, el total y las líneas del pedido.
Cada aplicación web utiliza un proyecto Supabase específico con Postgres. Coderblock diseña el esquema y ejecuta las migraciones necesarias. Puedes revisar el resultado directamente desde la pestaña Backend, donde encontrarás las tablas, los usuarios autenticados, el almacenamiento y las funciones. En este punto también puedes añadir algunos productos de ejemplo:
Añade ocho productos de ejemplo distribuidos en tres categorías para que pueda probar la tienda. Haz que sea fácil sustituirlos más adelante desde el área de administración.
Si tus productos tienen requisitos especiales, indícalos desde el principio. Por ejemplo, puedes especificar que tengan varias imágenes, tallas, colores u otras variantes. También puedes pedir al agente que utilice Supabase Storage para las imágenes subidas y que las vincule a sus productos correspondientes.
4. Añade autenticación y seguridad para los clientes
Ahora puedes crear las cuentas de cliente y proteger la información personal y los pedidos. Pide a Coderblock:
Añade registro e inicio de sesión para los clientes, protege las páginas de la cuenta y del historial de pedidos, y asegúrate de que cada cliente solo pueda ver sus propios pedidos. Añade los roles de administrador y cliente.
El agente configura Supabase Auth, incluidas las páginas de registro e inicio de sesión, la gestión de sesiones, las rutas protegidas y las políticas de la base de datos. Cada aplicación ya incluye una tabla de perfiles y una estructura básica de roles. Coderblock también aplica la Row Level Security de Postgres vinculada al usuario autenticado. De este modo, cada cliente solo puede acceder a sus propios datos, mientras que los administradores pueden recibir los permisos necesarios para gestionar productos y pedidos.
No tendrás que crear una tabla personalizada para las contraseñas ni escribir manualmente código para JWT o el hash de contraseñas. Si también quieres añadir el inicio de sesión con redes sociales, puedes pedir:
Añade el inicio de sesión con redes sociales junto con la autenticación mediante correo electrónico y contraseña.
Ahora comprueba el comportamiento usando cuentas separadas de cliente y administrador. Asegúrate de que un cliente no pueda abrir las páginas de administración ni ver los pedidos de otro cliente.
5. Crea el carrito y el proceso de pago
Antes de configurar los pagos, asegúrate de que el carrito funcione como esperas. Comprueba que los clientes puedan:
- añadir productos
- modificar las cantidades
- eliminar artículos
- ver los totales actualizados
Cuando el carrito esté listo, puedes pedir al agente que añada Stripe:
Permite que los clientes paguen el carrito con Stripe. Empieza en modo de prueba, crea los productos y precios necesarios, guarda los pedidos completados y muestra páginas claras para los pagos completados y cancelados.
De forma predeterminada, Coderblock puede crear una cuenta Stripe gestionada para el proyecto. El agente te hará algunas preguntas sencillas, como el país y el nombre de la empresa.
No tendrás que proporcionar claves de API: Coderblock gestiona el webhook de pagos y te proporcionará un enlace alojado por Stripe para completar más adelante la configuración de los pagos y la verificación de identidad.
Si prefieres utilizar tu propia cuenta Stripe, puedes solicitar la opción BYOK.
El agente te pedirá STRIPE_SECRET_KEY mediante una solicitud segura de variables de entorno. El valor se guarda en el almacén de secretos del servidor del proyecto y no se incluye en el código generado ni en el chat normal. El webhook se registra automáticamente.
Empieza siempre en modo de prueba.
Realiza algunas compras de prueba y comprueba que los pagos completados creen correctamente los pedidos y sus líneas correspondientes. Prueba también un pago cancelado y otro fallido. Cambia a pagos reales solo cuando todo el flujo funcione como esperas.
6. Añade el área de administración
Una tienda también necesita un espacio específico para quienes la gestionan. Puedes pedir al agente:
Crea un panel de administración protegido en el que los administradores puedan añadir, editar, activar y desactivar productos, subir imágenes, actualizar el inventario, revisar los pedidos y modificar su estado de preparación. Incluye tarjetas de resumen de pedidos e ingresos.
Comprueba cada acción directamente en la vista previa. Verifica, por ejemplo, que cualquier cambio en un producto se refleje inmediatamente en la tienda y que un cliente normal no pueda acceder al panel de administración. También puedes añadir controles para evitar errores:
Impide introducir precios y cantidades negativos, exige el nombre y el SKU del producto, y solicita confirmación antes de desactivar un producto.
Del mismo modo, puedes solicitar estados vacíos claros, mensajes de error y ventanas de confirmación antes de realizar acciones destructivas.
7. Prueba todo el proceso de compra
Antes de publicar la tienda, recorre todo el proceso como lo haría un cliente.
- Explora y filtra los productos.
- Abre la página de un producto.
- Añade artículos al carrito y modifica las cantidades.
- Crea una cuenta o inicia sesión.
- Completa un pago de prueba con Stripe.
- Abre la página del historial de pedidos.
- Inicia sesión como administrador y revisa el pedido.
- Actualiza su estado de preparación.
No te limites al recorrido ideal. Revisa también la tienda desde un móvil, prueba qué ocurre cuando un producto no está disponible y comprueba que los estados vacíos y los mensajes de error sean fáciles de entender. Si encuentras algo que no funciona, no necesitas modificar el código manualmente. Describe en el chat lo que ves y el comportamiento que quieres conseguir.
8. Publica y conecta un dominio
Cuando hayas completado todas las pruebas, puedes publicar la tienda.
Haz clic en Publicar y Coderblock desplegará la aplicación en producción en una dirección .coderblock.app, con SSL incluido.
Las publicaciones posteriores pueden realizarse mediante rápidas actualizaciones en caliente.
Si quieres utilizar un dominio personalizado, abre Configuración → Dominios. Puedes conectar un dominio que ya tengas siguiendo el asistente para configurar los registros DNS o comprar uno directamente en Coderblock mediante el proceso de pago integrado. En este último caso, el DNS y el SSL se configuran automáticamente. Antes de promocionar públicamente la tienda, completa la incorporación de Stripe y cambia del modo de prueba a los pagos reales. Haz también un último pedido real y comprueba que el registro correspondiente se guarde correctamente en la base de datos.
Tu tienda ya está online
Llegados a este punto, habrás convertido una sencilla descripción en una tienda online full stack real, con catálogo, cuentas, carrito, pagos, base de datos y área de administración. Y, lo más importante, el trabajo no termina con la publicación: puedes seguir mejorando la tienda desde el mismo chat, añadiendo nuevas funciones y perfeccionando las existentes sin interrumpir tu flujo de trabajo.
