ShoppCity

Un pequeño negocio que quiere vender en línea suele elegir entre pagar una plataforma mensual en dólares o armar algo con plugins que nadie mantiene. ShoppCity fue el ejercicio de construir una tienda completa desde cero, entendiendo cada pieza que una plataforma comercial resuelve por detrás.

El alcance

La meta no era una página de productos con un botón de WhatsApp, sino las dos caras de un comercio real: la tienda que ve el cliente y el panel donde el dueño opera el negocio.

• Tienda: portada, catálogo, detalle de producto, colecciones, carrito, checkout, historial de pedidos y reseñas.
• Cuentas: registro e inicio de sesión, perfil y direcciones guardadas.
• Panel de administración: tablero con métricas, productos con variantes e imágenes, gestión de pedidos y despacho, clientes, colecciones, descuentos e inventario.

Cómo se construyó

El backend es Node.js con Express y PostgreSQL, con autenticación por token y subida de imágenes de producto. El frontend es React con Vite y Tailwind, con rutas separadas para la tienda y el panel. El esquema de base de datos se define en migraciones versionadas, de modo que montar una tienda nueva es ejecutar las migraciones y cargar el catálogo.

Lo que enseña construir una tienda

Las variantes son el primer golpe de realidad. Un polo no es un producto: es una combinación de talla y color, y cada combinación tiene su propio stock y a veces su propio precio. Diseñar el modelo de datos con la variante como unidad vendible, y no el producto, evita reescribir el carrito y el inventario más adelante.

El segundo es el estado del pedido. Pagado no es lo mismo que despachado, y despachado no es lo mismo que entregado. Separar esos estados permite que el panel muestre qué falta preparar hoy, que es la pregunta que el dueño de una tienda se hace cada mañana.

El tercero es el descuento. Un cupón parece un número que se resta, pero en la práctica tiene tipo (porcentaje o monto fijo), fechas de vigencia, tope de usos con su contador y un mínimo de compra. Todo eso debe validarse en el servidor al confirmar el pedido: el total que calcula el navegador sirve para mostrarlo, nunca para cobrarlo.

Estado actual

ShoppCity está en el taller: funcional en entorno de desarrollo, sin despliegue público. Para vender con varias tiendas bajo un mismo techo, el proyecto hermano es Sellara. La demostración muestra la tienda y el panel con productos simulados.