01. DevMart: El Stack Moderno para un E-Commerce Ágil

En el desarrollo de productos digitales, la parálisis por análisis es el enemigo silencioso del éxito. A menudo, los equipos de desarrollo pasan meses debatiendo si deben estructurar su nuevo e-commerce en microservicios, qué proveedor de la nube utilizar o qué framework CSS es el más elegante. Mientras tanto, la competencia ya está en el mercado validando sus ideas con clientes reales.

Para DevMart, una plataforma de comercio electrónico diseñada para la venta de hardware y accesorios tecnológicos de alto rendimiento, la premisa fue clara desde el primer día: construir rápido, diseñar con elegancia y mantener la infraestructura al menor costo posible.

En este primer artículo de nuestra bitácora, analizaremos la arquitectura de DevMart y explicaremos por qué este stack tecnológico no es solo una elección de moda, sino una decisión estratégica de negocio.

🎯 La Visión de Producto

DevMart no intenta ser un clon de Amazon con miles de funcionalidades genéricas. Se concibió como un e-commerce especializado y conversacional. Esto significa que:

El catálogo de productos debe cargar instantáneamente en el navegador del usuario.
El proceso de compra debe requerir la menor fricción posible.
Los clientes deben poder comprar o consultar stock no solo en la web, sino directamente a través de Telegram, la aplicación donde pasan gran parte de su tiempo diario.

Desde una perspectiva comercial, cada milisegundo de retraso en la carga de una página reduce la tasa de conversión en un 7%. Por tanto, la velocidad y la experiencia de usuario (UX) son prioridades directas para la rentabilidad de la tienda.

🧱 El Stack Tecnológico: Explicación y Justificación

Para cumplir con estos objetivos, seleccionamos un conjunto de tecnologías modernas, estables y de rápida implementación.

graph TD
    subgraph Cliente (SPA Frontend)
        React19[React 19 & Vite]
        Tailwind4[Tailwind CSS v4]
        RR8[React Router v8]
    end

    subgraph API (Backend & NLP)
        Express[Express Server]
        Prisma[Prisma ORM]
        Gemini[Google Gemini API]
    end

    subgraph Infraestructura & Servicios
        Supabase[PostgreSQL en Supabase]
        Resend[Resend Email Service]
        TelegramAPI[Telegram Bot Webhook]
        CloudRun[Google Cloud Run]
    end

    React19 -->|HTTP Requests| Express
    Express -->|Queries| Prisma
    Prisma -->|Mapeo de Datos| Supabase
    Express -->|Webhook Messages| TelegramAPI
    Express -->|Intenciones| Gemini
    Express -->|Envío OTP| Resend

1. Frontend: React 19 + React Router v8 + Tailwind CSS v4

React 19: Es la última versión estable del framework de UI más popular. Su gran ventaja competitiva es el nuevo React Compiler, que optimiza automáticamente los componentes y evita la necesidad de escribir manualmente memorizaciones complejas (useMemo, useCallback). Esto resulta en un renderizado más fluido y menos código innecesario.
React Router v8: Esta versión consolida el enrutamiento del lado del cliente como una Single Page Application (SPA). Al cambiar de página, no hay recarga total del navegador; solo se renderizan los datos nuevos. La experiencia del usuario final es la de una aplicación nativa instalada en su teléfono u ordenador.
Tailwind CSS v4: El motor de diseño utilitario más rápido de la actualidad. Nos permite construir interfaces premium altamente personalizadas directamente en el marcado HTML, reduciendo el tamaño final de los archivos CSS cargados por el cliente.

2. Backend: Node.js + Express

Express: Es el estándar de oro en el ecosistema Node.js. En lugar de adoptar frameworks complejos y pesados que requieren semanas de configuración, Express nos da una base ligera para construir una API REST ágil y modular. Su enfoque minimalista acelera el tiempo de comercialización (Time-to-Market) y facilita la depuración de errores.

3. Persistencia: PostgreSQL (Supabase) + Prisma ORM

Prisma ORM: Actúa como un traductor inteligente entre nuestro código en JavaScript y la base de datos SQL. En lugar de escribir sentencias SQL a mano propensas a errores, Prisma genera tipos automáticos que aseguran que las consultas sean correctas en tiempo de compilación.
Supabase (PostgreSQL): PostgreSQL es una de las bases de datos relacionales más robustas del mundo. Supabase nos proporciona una instancia administrada en la nube con soporte nativo para conexiones optimizadas, garantizando transacciones seguras (propiedades ACID) para que nunca se pierda un pedido o se duplique un cobro.

💼 ¿Por qué esto le importa al Negocio?

| Decisión Técnica | Impacto en el Usuario Final | Impacto Comercial / Negocio | |---|---|---| | Arquitectura SPA (React Router v8) | Transiciones de página instantáneas. Navegación fluida. | Mayor retención de usuarios en la web. Reducción del abandono por frustración de carga. | | Monolito en Express | Respuestas consistentes y rápidas del servidor. | Costo de desarrollo inicial muy bajo. Facilidad para pivotar y agregar endpoints rápidamente. | | Prisma ORM & PostgreSQL | Integridad en los datos. El precio y stock que ve en pantalla siempre coincide con la realidad. | Cero inconsistencias en facturación. Prevención de pérdidas monetarias por fallos de sincronía de stock. |

En el siguiente post, entraremos en detalle sobre cómo estructuramos el modelo de datos relacional en Prisma y cómo implementamos reglas de negocio flexibles, tales como el carrito de compras para usuarios invitados.

📅 Publicado en la Bitácora de Desarrollo de DevMart. Ver Índice General