Saltar al contenido principal
Version: 0.54.0-rc.8

Aplicaciones Frontend

Este documento describe las aplicaciones frontend de Lana, su arquitectura y patrones de desarrollo.

Descripción General​

Lana incluye dos aplicaciones frontend principales:

AplicaciónPropósitoUsuarios
Panel de AdministraciónGestión bancariaPersonal administrativo
Portal del ClienteAutoservicioClientes del banco

Pila Tecnológica​

Estructura de Directorios​

apps/
├── admin-panel/           # Panel de Administración
│   ├── app/               # Next.js App Router
│   ├── components/        # Componentes React
│   ├── lib/               # Utilidades y configuración
│   └── generated/         # Código generado (GraphQL)
│
├── customer-portal/       # Portal del Cliente
│   ├── app/               # Next.js App Router
│   ├── components/        # Componentes React
│   └── generated/         # Código generado (GraphQL)
│
└── shared/                # Código compartido
    ├── ui/                # Componentes UI
    └── utils/             # Utilidades comunes

Patrones de Desarrollo​

Componentes de Servidor vs Componentes de Cliente​

// Componente de Servidor (predeterminado)
export default async function CustomersPage() {
  const customers = await fetchCustomers();
  return <CustomerList customers={customers} />;
}

// Componente de Cliente (interactivo)
'use client';

export function CustomerForm() {
  const [name, setName] = useState('');
  // ...
}

Gestión de Estado​

  • Apollo Client: Estado del servidor (datos GraphQL)
  • React Context: Estado global de la UI
  • useState/useReducer: Estado local del componente

Desarrollo Local​

Iniciar Aplicaciones​


# Panel de Administración

cd apps/admin-panel
pnpm dev

# Portal del Cliente

cd apps/customer-portal
pnpm dev

URLs de Desarrollo​

AplicaciónURL
Panel de Administraciónhttp://admin.localhost:4455
Portal del Clientehttp://app.localhost:4455

Documentación relacionada​