Citabic
Un sitio web completamente personalizado con CMS para una empresa BTP de Tánger - un panel de administración Livewire, editor de contenido basado en bloques, gestión bilingüe, un blog con herramientas SEO completas y una capa de entrega de contenido con caché.
Descripción general
Un CMS personalizado, no solo un sitio web
Citabic es una empresa BTP de Tánger (ingeniería civil, construcción, inmobiliaria) que necesitaba más que un sitio estático - necesitaban poder gestionar su contenido de forma independiente, publicar entradas de blog, actualizar referencias de proyectos y controlar cada texto tanto en francés como en inglés sin involucrar a un desarrollador cada vez.
El resultado es una aplicación completa en Laravel 12 + Livewire con un panel de administración personalizado, un sistema de gestión de contenido bilingüe, una plataforma de blog con herramientas SEO completas, un portafolio de referencias con páginas de detalle y una capa de entrega de contenido con caché que mantiene el sitio público rápido.
Objetivo
Dar al cliente control total - cada sección, cada texto, cada imagen gestionable desde un panel de administración sin tocar código
Ofrecer una experiencia bilingüe completa: los administradores introducen contenido en FR y EN, el contenido se sirve por locale automáticamente
Habilitar el marketing de contenidos profesional a través de una plataforma de blog completa con edición basada en bloques y un kit completo de SEO
Mantener el sitio público rápido mediante una capa de caché por locale con TTL de 6 horas - para que las consultas a la base de datos se amorticen entre miles de visitas
Mi rol
Diseño y desarrollo completo del frontend al CMS
Diseño y frontend
Diseñé y construí el sitio público completo en Laravel Blade + Tailwind CSS v4 - héroe con vídeo, servicios, carrusel de valores, referencias, blog y contacto - todo responsivo.
Panel de administración Livewire
Construí un panel CMS de administración completo con Livewire v4 - más de 15 secciones de gestión que cubren cada pieza de contenido editable del sitio.
Sistema de contenido bilingüe
Diseñé un modelo de contenido por sección/clave/idioma (SectionContent) que permite a los administradores gestionar las versiones FR y EN de cada bloque de texto de forma independiente.
Plataforma de blog y SEO
Construí un blog completo con un editor basado en bloques (bloques de héroe, texto e imagen), metadatos SEO completos (OG, Twitter cards, schema, robots, canonical), categorías, etiquetas, comentarios y tiempo de lectura.
Caché y rendimiento
Implementé un servicio GuestPageCache con caché por locale de 6 horas a través de Laravel Cache - los datos de la página se calculan una sola vez y se sirven desde caché para todas las solicitudes posteriores.
Notificaciones y formularios
Construí un formulario de contacto categorizado con notificación por email al enviar, y notificaciones de comentarios del blog - ambos a través de Laravel Notifications.
Stack tecnológico
Funciones principales
Una plataforma completa, no una plantilla
CMS de administración Livewire
- Más de 15 secciones de administración, sin recargas de página
- CRUD completo para todas las entidades de contenido
- Ordenación por arrastrar y soltar para dominios, valores y procesos
- Carga de imágenes con Dropzone.js en todos los campos multimedia
- Bandeja de entrada de envíos de contacto con estado leído/no leído
- Almacén de configuración de clave/valor para configuración global
Contenido bilingüe (FR/EN)
- Tabla SectionContent: modelo sección + clave + idioma
- Campo JSON de traducciones en todas las entidades principales
- Entrega de contenido sensible al locale a través de app()->getLocale()
- Los administradores gestionan el texto FR y EN de forma independiente por sección
- Entradas de blog y referencias totalmente traducibles
- Selector de idioma en el sitio público
Plataforma de blog y SEO
- Editor de entradas basado en bloques (bloques de héroe, texto e imagen)
- SEO completo: meta título/descripción, palabra clave, OG, Twitter cards
- Marcado de esquema, URLs canónicas, robots index/follow
- Categorías, etiquetas, tiempo de lectura, entradas destacadas
- Sistema de comentarios con notificación por email al enviar
- Flujo de publicación: borrador → publicado con fecha programada
Portafolio de referencias
- Listado paginado de referencias (9 por página) con páginas de detalle
- Por referencia: cliente, superficie, presupuesto, resumen, bloques
- Contenido de detalle basado en bloques (mismo editor que el blog)
- Títulos y descripciones traducibles por referencia
- Gestión del orden de visualización en el panel de administración
- URLs basadas en slug con enrutamiento SEO-friendly
Panel de administración
Más de 15 secciones de gestión
Cada pieza de contenido del sitio público es gestionable desde el panel de administración - el cliente puede actualizar cualquier cosa sin un desarrollador.
Capturas de pantalla
El CMS en acción
Admin Dashboard
Block Editor
Public Site (FR)
Arquitectura
CMS primero, con caché para velocidad
Cada página pública está respaldada por un CitabicContentService que reúne todos los datos necesarios - perfil, dominios, secciones, misiones, certificaciones - y almacena el resultado en caché por locale durante 6 horas. El panel de administración está construido íntegramente con Livewire v4, manteniendo la UI reactiva sin JavaScript personalizado.
- Modelo SectionContent: sección + clave + idioma - plano, consultable, eficiente en caché
- CitabicContentService ensambla cargas completas de datos de página y las almacena en caché por locale
- El servicio GuestPageCache gestiona las claves de caché con invalidación al actualizar contenido
- Panel de administración Livewire v4 - UI reactiva con CRUD completo, sin complejidad SPA
- Contenido basado en bloques: las entradas y referencias almacenan contenido estructurado como arrays JSON
- Laravel Notifications para alertas de email de contacto y comentarios
Conclusiones clave
El CMS es el producto
Para un sitio empresarial orientado al contenido, la experiencia del administrador es tan importante como la cara pública. Un cliente que puede actualizar su propio contenido es un cliente que permanece comprometido con su sitio.
Caché en la capa de servicio, no en la vista
Almacenar en caché los payloads completos de datos de página en CitabicContentService es más potente que el caché a nivel de vista - funciona independientemente de cómo se renderice la vista.
El bilingüismo es una decisión de arquitectura
Añadir el idioma como campo de primer nivel en cada modelo de contenido desde el primer día - en lugar de añadirlo después - hace que la gestión bilingüe sea limpia y eficiente.
Los editores de bloques merecen la inversión inicial
Un modelo de contenido basado en bloques en JSON da al cliente la flexibilidad de construir entradas y páginas de referencias ricas sin necesitar a un desarrollador para cada cambio de contenido.
Trabaja conmigo
¿Necesitas un sitio que tu equipo pueda gestionar de verdad?
Un buen CMS no es solo un panel de administración - es el modelo de contenido correcto para tu negocio. Te ayudo a determinar qué debe ser editable, cómo debe estructurarse y lo construyo para que tu equipo sea el dueño.