Floristeria22: Ingeniería E-commerce de Vanguardia (Next.js & Edge)
Desarrollo desde cero de una plataforma e-commerce boutique internacional (Bulgaria), impulsada por infraestructura Serverless y Headless CMS.
El Desafío Arquitectónico
Construir un e-commerce boutique para una floristería de alta gama en Sofía (Bulgaria) requiere un enfoque muy distinto a instalar una plantilla convencional de Shopify o WooCommerce. El cliente necesitaba un sistema capaz de manejar inventario perecedero con actualización instantánea, una interfaz visual extremadamente pulida con transiciones complejas, y una logística de pedidos ultra-rápida.
Optamos por descartar cualquier monolito tradicional y construir una arquitectura descentralizada (Headless) desde cero, maximizando el rendimiento (TTFB cercano a cero) y el control total sobre la experiencia de usuario.
System Specs
| Métrica | Resultado | Descripción |
|---|---|---|
| Lighthouse | 99+ | Core Web Vitals en verde |
| TTFB | < 80ms | Edge Rendering Global |
| Uptime | 99.99% | Distribuido (Cloudflare) |
| Stack | RSC | React Server Components |
Core Stack & Especificaciones Técnicas
graph TD
Client["Cliente (Mobile/Web)"] --> Cloudflare["Cloudflare Edge Network"]
Cloudflare --> NextJS["Next.js 15 (App Router)"]
NextJS <--> Sanity["Sanity CMS (Headless)"]
NextJS <--> Stripe["Stripe Embedded Checkout"]
NextJS --> Telegram["Telegram API (Webhooks)"]
1. Framework Frontend: Next.js 15 (App Router)
El núcleo de la plataforma está construido sobre la última versión de Next.js. Esta decisión permitió aprovechar el renderizado híbrido: generación estática profunda (SSG) para el catálogo de flores (maximizando el SEO) y renderizado en el servidor (SSR) para flujos de pago y gestión de carrito.
2. Infraestructura Edge: Cloudflare Pages / Workers
A diferencia de los despliegues Node.js monolíticos, Floristeria22 se compila mediante OpenNext y se despliega directamente en la red Edge de Cloudflare. Esto significa que la tienda se ejecuta en miles de nodos alrededor del mundo simultáneamente. El resultado es un tiempo de carga instantáneo, vital para evitar el abandono de carritos en dispositivos móviles.
3. Sistema de Gestión (Headless CMS): Sanity
Rechazamos los paneles de administración anticuados. Integramos Sanity CMS, permitiendo crear un dashboard administrativo personalizado en /admin. Desde aquí, el equipo puede actualizar precios, gestionar variaciones estacionales de flores y controlar el contenido dinámico mediante schemas estrictamente tipados.
4. Motor de Pagos y Seguridad Transaccional
La seguridad financiera se delega íntegramente a Stripe (Embedded Checkout). Esta implementación nativa garantiza un flujo de conversión sin redirecciones externas, manteniendo al cliente dentro de la experiencia boutique en todo momento y asegurando el cumplimiento normativo PCI-DSS.
Innovación en Logística: Integración con Telegram API
La gestión de flores frescas exige una logística inmediata. En lugar de depender de notificaciones por correo electrónico (que suelen retrasarse o perderse en bandejas de spam), desarrollamos una integración nativa con la API de Telegram.
Cada vez que un cliente en Sofía completa una orden, el sistema dispara automáticamente un webhook que alerta instantáneamente al equipo floral en su dispositivo móvil con los detalles exactos del pedido, garantizando una respuesta logística en menos de un minuto.
Micro-Interacciones y Calidad UI
Un producto de lujo exige una interfaz de lujo. La capa visual se construyó utilizando Tailwind CSS y Framer Motion para coreografiar micro-animaciones fluidas al navegar entre arreglos florales. Además, se implementó validación de datos en tiempo real mediante Zod y manejo de estado global ultra-ligero con Zustand.
Floristeria22 no es solo una página web; es un activo digital diseñado con rigor matemático para escalar y dominar su sector local sin cuellos de botella tecnológicos.