DevMart: Bitácora de Desarrollo de un E-Commerce Moderno

¡Bienvenido a la bitácora de desarrollo de DevMart! Este espacio muestra el proceso de diseño, construcción y escalamiento de una plataforma de comercio electrónico de alto rendimiento pensada para la comunidad tech.

Acá documentamos cada decisión crítica, cada error de arquitectura corregido y el razonamiento de negocio detrás de cada línea de código. Si eres desarrollador, emprendedor tecnológico, o simplemente te apasiona ver cómo se construye software real y operativo desde cero, esta guía es para ti.

📌 ¿Qué es DevMart?

DevMart es un e-commerce minimalista y de alto rendimiento optimizado para vender productos tecnológicos. Se diseñó bajo tres pilares fundamentales:

1. Velocidad: Una Single Page Application (SPA) responsiva que carga instantáneamente y procesa compras con el menor número de clics posible.
2. Integración conversacional: Un chatbot de Telegram integrado que permite a los usuarios buscar productos, ver su carrito y comprar usando lenguaje natural gracias a la Inteligencia Artificial.
3. Eficiencia de Costos: Infraestructura serverless que se auto-escala a cero instancias cuando no hay tráfico, eliminando gastos fijos de servidores.

📖 Índice de la Serie de Blog

Se ha estructurado esta bitácora en 5 posts temáticos ordenados cronológicamente conforme avanzamos en la construcción del producto. Se recomienda seguir este orden de lectura:

Post 1: Visión y Arquitectura General👈

¿Por qué este stack y cómo aporta valor al negocio?

• Qué aprenderás: Las ventajas competitivas de usar React 19, Tailwind CSS v4 y React Router v8 en el frontend, y por qué se eligió una base monolítica modular con Express y Prisma ORM para agilizar el lanzamiento al mercado.
• Foco de negocio: Reducción del Time-to-Market y mitigación del riesgo técnico.

Post 2: Modelado de Datos y Reglas de Negocio👈

Diseñando la persistencia y la flexibilidad de compra.

• Qué aprenderás: La estructura de la base de datos relacional usando Prisma Schema. Veremos cómo modelamos categorías, productos, órdenes de compra y el sistema de carritos híbridos (invitados vs. registrados).
• Foco de negocio: Disminución de la tasa de abandono de carritos permitiendo flujos de compra sin registro obligatorio inmediato.

Post 3: NLP e Integración Multicanal con Telegram y Gemini👈

ECode: Un asistente de compras inteligente en la app de mensajería del usuario.

• Qué aprenderás: Integración de la API de Telegram con el SDK de Google Gen AI (gemini-3.1-flash-lite) para interpretar intenciones humanas. El flujo de vinculación por código OTP (vía Resend) y el despliegue de botones web interactivos (Telegram WebApp).
• Foco de negocio: Capturar ventas directas en canales sociales habituales del usuario final y automatizar la atención al cliente 24/7 sin agentes humanos.

Post 4: Seguridad, Control de Abuso e Infraestructura Cloud👈

API blindada y desplegada a costo cero.

• Qué aprenderás: Implementación de políticas de Rate Limiting aisladas por contexto para evitar ataques de fuerza bruta y DDoS. Caso práctico de depuración de una fuga de datos masiva en Prisma. Empaquetado en Docker de producción y despliegue serverless en Google Cloud Run.
• Foco de negocio: Garantía de alta disponibilidad ante picos virales de demanda y control absoluto de los costes de infraestructura (facturación a $0 USD con tráfico inactivo).

Post 5: Frontend Reactivo y Experiencia de Usuario Minimalista👈

Optimización visual, estado distribuido y conversión de compra.

• Qué aprenderás: Uso práctico de Tailwind CSS v4 para diseño adaptativo. Gestión del estado global en React sin boilerplate pesado, sincronización asíncrona de carritos locales al iniciar sesión, actualizaciones optimistas en la interfaz y validación de stock client-side.
• Foco de negocio: Incremento del ticket promedio y optimización de la conversión mediante una experiencia UX fluida, rápida y estéticamente atractiva.

Post 6: Scrum Methodology👈

Estructura del marco de trabajo ágil Scrum aplicado al desarrollo de DevMart.

• Qué aprenderás: Cómo se aplicó Scrum en el desarrollo de DevMart, los epics, user stories, sprints y retrospective.
• Foco de negocio: Metodología ágil utilizada para el desarrollo de DevMart.

🛠️ Tecnologías Utilizadas

El proyecto une lo mejor del desarrollo web moderno:

| Capa | Tecnología | Propósito |

| Frontend | React 19 (React Compiler) | Interfaz reactiva y renderizado de alto rendimiento. |

| Styling | Tailwind CSS v4 | Diseño responsivo mediante CSS moderno y variables de marca. |

| Router | React Router v8 | Transiciones de página instantáneas en SPA. |

| Backend | Node.js + Express | Servidor API rápido e impulsado por eventos. |

| Base de Datos | PostgreSQL (Supabase) + Prisma | Persistencia relacional robusta con transacciones ACID y mapeo seguro de tipos. |

| AI (NLP) | Google Gemini-3.1-Flash-Lite | Análisis sintáctico y extracción de intenciones de chat en lenguaje natural. |

| Mensajería | Telegram Webhook API | Canal conversacional con soporte de WebApp integrada. |

| Email | Resend API | Envío transaccional instantáneo de códigos de un solo uso (OTP). |

| Cloud / Ops | Docker + Google Cloud Run | Contenerización y escalado serverless a coste cero. |