ProducciónDesarrollado por Gibmyx Gomez

Plenitud AA

Plataforma Web y Panel Administrativo con Arquitectura Hexagonal

Plataforma integral para la revista Plenitud de Alcohólicos Anónimos (AA) México. Cuenta con un portal público para usuarios y un panel administrativo avanzado. El backend está construido bajo los principios de Arquitectura Hexagonal (Clean Architecture) con Laravel, asegurando alta escalabilidad y mantenibilidad, mientras que el frontend utiliza React 18 segmentado en múltiples Single Page Applications (SPAs).

Ver repositorio en GitHub Ver demo en vivo

Tecnologías clave

Laravel 9
React 18
Hexagonal Architecture
Domain-Driven Design
Tailwind CSS
Vite
Redux Toolkit

Ingeniería & Diseño

Arquitectura del Sistema

El backend en Laravel 9 está estructurado utilizando Arquitectura Hexagonal (Domain-Driven Design), separando la lógica de negocio (Dominio) de la infraestructura y aplicación. El frontend está desacoplado en dos aplicaciones React independientes (Admin y Web) compiladas a través de Vite e integradas en vistas Blade.

Diagrama de flujo & topologíaplenitud-aa.architecture

                ┌─ FRONTEND (React 18 + Vite + Tailwind CSS) ────────────────────────────┐
  │   - App Web: Portal público y navegación de usuarios                 │
  │   - App Admin: Panel de gestión, Redux Toolkit, React Router         │
  └───────────────────────────────────┬────────────────────────────────────┘
                                      │ API REST / JSON
                                      ▼
  ┌─ BACKEND (Laravel 9 - Arquitectura Hexagonal) ─────────────────────────┐
  │   src/                                                                 │
  │     ├── Plenitud/   (Módulos: Gaceta, Literatura, Usuario, etc.)       │
  │     │     ├── Contract/     (Interfaces y puertos)                     │
  │     │     ├── Controller/   (Adaptadores de entrada HTTP)              │
  │     │     ├── Models/       (Entidades de dominio)                     │
  │     │     ├── Persistence/  (Repositorios y adaptadores de salida)     │
  │     │     └── UserCase/     (Casos de uso e interactors)               │
  │     └── Shared/     (Infraestructura compartida y Base)                │
  └───────────────────────────────────┬────────────────────────────────────┘
                                      │ Eloquent ORM
                                      ▼
  ┌─ BASE DE DATOS ────────────────────────────────────────────────────────┐
  │   - MySQL / PostgreSQL                                                 │
  └────────────────────────────────────────────────────────────────────────┘

Puntos clave de la arquitectura

Arquitectura Hexagonal (Clean Architecture): Separación estricta de responsabilidades usando Contract, Controller, Models, Persistence y UserCase en el directorio 'src/'.
Frontend Desacoplado: Múltiples entry points de React (AdminApp y WebApp) orquestados por Vite e integrados en Laravel.
Manejo de Estado Centralizado: Uso de Redux Toolkit en el panel de administración para el flujo complejo de datos.
Patrón Repositorio: Abstracción de la capa de persistencia de datos mediante repositorios e interfaces en la capa Contract.
Escalabilidad Modular: Los módulos de negocio (Gaceta, Literatura, ExperienciaDiaria) están completamente aislados y son fácilmente extensibles.

Ecosistema

Stack Tecnológico Detallado

Backend Framework

Laravel 9 + PHP

Orquestación del backend, enrutamiento, seguridad e inyección de dependencias.

Arquitectura

Hexagonal Architecture

Organización modular del código en Contract, Persistence y UserCases para máxima mantenibilidad.

Frontend / SPAs

React 18 + React Router

Desarrollo de interfaces dinámicas e interactivas segmentadas para Web y Admin.

Estilos & UI

Tailwind CSS + Headless UI

Diseño responsivo, utilitario y componentes accesibles.

Estado global

Redux Toolkit

Manejo centralizado del estado para la aplicación administrativa.

Capacidades

Características Principales

Portal público interactivo para acceder a literatura, gacetas e información general de AA México.

Panel de administración seguro con control de acceso y gestión de contenido.

Gestión de usuarios, planes de acción y productos especiales.

Soporte para múltiples Single Page Applications (SPAs) dentro de un solo monolito estructurado.

Integración de animaciones y sliders interactivos con Swiper.

Decisiones de Ingeniería

¿Cómo se creó este proyecto?

Se optó por Arquitectura Hexagonal en el backend para domar la complejidad de negocio y facilitar futuras integraciones.

El frontend se dividió en aplicaciones React separadas para mantener el portal público ligero y reservar el peso de Redux Toolkit solo para el panel de administración.

¿Quieres revisar el código fuente completo?

El repositorio público contiene el historial de commits, pruebas e instrucciones de ejecución.

Explorar en GitHub