Real-EnergiX Solutions — Sitio B2B + Dashboard Admin
Sitio sectorial bilingue para empresa de calidad de energia y consultoria electrica en Texas, con panel administrativo, sistema de cotizaciones online y tracking analytics propio.
El Reto
Real EnergiX Solutions es una empresa de Eagle Pass, Texas, especializada en estudios de calidad de energia (power quality), analisis de armonicos y consultoria electrica para clientes industriales. Su problema era doble: no tenian presencia digital seria que reflejara su nivel tecnico, y las solicitudes de cotizacion llegaban por correo personal sin trazabilidad.
Necesitaban algo mas que una pagina de presentacion: un sitio que funcionara como herramienta operativa con panel para gestionar cotizaciones, ver analytics de visitantes y enviar correos automaticos cuando llegara un nuevo lead — todo en su propia infraestructura, sin Wix ni Webflow, sin pagar SaaS de terceros.
El reto tecnico: construir un sitio rapido y SEO-optimizado en mercado bilingue (ingles/espanol) con auth seguro para el panel admin, base de datos relacional para historico de quotes, integracion con Resend para correos transaccionales, y todo desplegado en Vercel sin sobre-ingenieria.
La Solucion
Construimos un Next.js 16 App Router con dos zonas claramente separadas: un sitio publico optimizado para SEO con secciones de servicios, industrias, recursos y formulario de cotizacion modal; y un panel admin protegido con NextAuth para gestionar leads, ver analytics y configurar settings.
El stack incluye PostgreSQL en Neon con Prisma 7 como ORM, NextAuth.js 5 con arquitectura edge-safe split (auth.config.ts para middleware Edge + lib/auth.ts con bcrypt+Prisma para Node runtime), Resend para correos transaccionales y rate limiting in-memory para proteger el endpoint de quotes.
El panel admin (24+ componentes especializados) permite ver cada quote en su ciclo NEW → VIEWED → PENDING → QUOTED → COMPLETED, con tracking de visitantes, paginas vistas y conversion. Sin SaaS de terceros, todo en infraestructura propia.
Features Clave
Sitio Publico Bilingue con SEO Optimizado
Home, secciones de servicios (Power Quality Study, Harmonic Analysis, etc.), industrias, recursos tecnicos y formulario de cotizacion modal. Disenado mobile-first con Montserrat + Playfair Display.
Panel Admin con Auth Edge-Safe
NextAuth.js 5 con arquitectura split: middleware Edge protege rutas /admin/* sin bcrypt/Prisma, mientras que el endpoint de login corre en Node runtime con verificacion completa de credenciales.
Sistema de Cotizaciones con Estado
Cada solicitud tiene un ciclo de vida documentado (NEW → VIEWED → PENDING → QUOTED → COMPLETED → ARCHIVED). Rate limit de 3 quotes/IP/hora para evitar spam. Notificacion automatica por correo al admin via Resend.
QuoteDrawer Modal Persistente
Patron de drawer modal flotante (con Framer Motion spring animation) que reemplaza la navegacion a /quote — el usuario nunca pierde el contexto. Disponible desde Navbar, CTAs y secciones especificas via React Context.
Analytics Propio (sin Google Analytics)
Tracking de visitantes y page views en la propia base de datos, con dashboard de conversion. Sin scripts de terceros, sin cookies banners complicados, todo first-party.
Database Singleton + Pooled Connections
Prisma 7 con adapter PrismaPg para Neon, dos connection strings (pooler para queries normales, direct para migraciones), connection singleton para evitar connection storms en serverless.
Como se Ve
Hero del Sitio Publico
Hero con carousel auto-advancing, branding lime green/dark green, CTAs principales que abren el QuoteDrawer modal sin perder contexto.
Panel Admin · Quotes
Tabla de cotizaciones con filtros por estatus, busqueda, sort por fecha. Click abre vista detalle con timeline del lifecycle de la quote.
Dashboard de Analytics
Metricas de visitantes unicos, page views por seccion, conversion a quote y embudo. Datos propios sin Google Analytics.
QuoteDrawer Modal
Modal centrado con animacion Framer Motion spring, formulario de cotizacion con validacion Zod, integracion con Resend para notificacion al admin.
Detalles Tecnicos
| Componente | Tecnologia |
|---|---|
| Framework | Next.js 16 App Router + React 19 |
| Lenguaje | TypeScript strict (noUncheckedIndexAccess) |
| Base de datos | PostgreSQL en Neon + Prisma 7 ORM |
| Auth | NextAuth.js 5 beta (edge-safe split) |
| Estilos | Tailwind 3.4 con tema custom de 252 lineas |
| Correos | Resend (transaccionales) |
| Validacion | Zod 4 + React Hook Form |
| Despliegue | Vercel · realpqsolutions.com |
Resultados
100% pipeline
Cotizaciones rastreadas
EN + ES
Mercado bilingue
Edge + bcrypt
Auth seguro
0
Cookies de terceros
< 1.5s
Tiempo de carga
Servicios relacionados
¿Tu empresa B2B necesita mas que una pagina, necesita una herramienta operativa?
Sitio publico optimizado + panel admin propio + tracking de leads — todo en tu propia infraestructura, sin pagar SaaS mensual.