La Palapa Resident Portal es una app web para residentes de condominio y administradores del edificio. Combina un landing público de marketing (información del edificio, comité, galería de operaciones, contacto) con un área protegida para residentes con avisos, proyectos del edificio, encuestas, anuncios financieros y servicios de terceros vinculados — todo respaldado por autenticación Supabase y PostgreSQL con seguridad a nivel de fila (RLS).
Dashboard privado según lo solicitó el cliente
Qué hace
Landing público
Sitio de una sola página con navegación scroll-spy en seis secciones:
- Quiénes somos — Introducción del edificio y posicionamiento de la comunidad
- Acerca de — Detalles de la propiedad e información para residentes
- Comité — Perfiles de miembros de la mesa directiva/comité
- Operación — Carrusel de imágenes que muestra operaciones y amenidades del edificio
- Galería — Galería fotográfica de áreas comunes y eventos
- Contacto — Formulario de contacto con campos de nombre, correo y mensaje
Los residentes acceden al portal mediante Iniciar sesión; los usuarios autenticados son redirigidos a /portal.
Portal de residentes
Tablero protegido con cuatro secciones en pestañas:
| Pestaña | Contenido |
|---|---|
| Informes | Avisos del edificio (anuncios con texto enriquecido) y una cuadrícula de servicios con apps vinculadas |
| Proyectos | Proyectos activos de mejora del edificio con barras de progreso |
| Encuestas | Encuestas para residentes con un solo voto por persona y conteo de resultados en vivo |
| Financiero | Anuncios financieros y actualizaciones relacionadas con cuotas |
El portal usa un fondo interactivo DotGrid (efecto de proximidad naranja/verde azulado) y un layout de pestañas responsivo que se colapsa a una cuadrícula 2×2 en móvil.
Perfil
Los residentes gestionan su perfil: nombre completo, número de unidad y configuración de cuenta vinculada a su identidad de autenticación en Supabase.
Panel de administración
CMS con control de roles (admin) para administradores del edificio:
- Users — Crear residentes, asignar números de unidad, promover/degradar roles de admin
- Notices — Editor de texto enriquecido (React Quill) para anuncios del edificio
- Projects — CRUD de proyectos de mejora con seguimiento de progreso de 0–100%
- Polls — Crear encuestas con múltiples opciones, ver conteo de votos
- Financial — Publicar anuncios financieros en el portal de residentes
- Apps — Gestionar servicios vinculados (URLs de lanzamiento, íconos, banderas de capacidad SSO)
Base de datos y seguridad
Las migraciones de Supabase definen el esquema completo con políticas RLS:
profiles— Perfiles de residentes creados automáticamente al registrarse (nombre + número de unidad)notices— Anuncios del edificio (admin escribe, residentes leen activos)apps— Entradas del lanzador de servicios de tercerosprojects— Seguimiento de mejoras del edificiopolls/poll_options/poll_votes— Sistema de encuestas independiente (desacoplado de proyectos en una migración posterior)financial_announcements— Comunicaciones de cuotas y presupuesto
Los admins se identifican con una columna role en profiles; todas las operaciones de escritura verifican membresía de admin vía RLS.
Stack técnico
| Capa | Elección |
|---|---|
| Framework | React 18 + TypeScript + Vite |
| UI | shadcn/ui + Tailwind CSS |
| Estado / datos | TanStack React Query |
| Auth y DB | Supabase (Auth + PostgreSQL + RLS) |
| Routing | React Router 6 con rutas protegidas y de admin |
| Texto enriquecido | React Quill (wrapper de importación dinámica para seguridad en build) |
| Íconos | Lucide React |
| Toasts | Sonner |
La app corre en el puerto 8080 en desarrollo y se despliega como build estático de Vite en hosting CDN (Vercel, Netlify o DigitalOcean Spaces) con variables de entorno VITE_SUPABASE_*.
Proceso de desarrollo
Scaffold de plantilla
Inicio desde la plantilla shadcn/Vite React TypeScript con Tailwind y biblioteca de componentes preconfigurada.
Portal central y Supabase
Conexión a Supabase (inicialmente vía Lovable Cloud). Se construyó el flujo de auth, perfiles de residentes con números de unidad, sistema de avisos y lanzador de apps. La primera migración de base de datos creó las tablas profiles, notices y apps con RLS.
Admin, proyectos, encuestas y financiero
Gran push de funcionalidades:
- Panel de admin completo con gestión de usuarios y asignación de roles
- Sección de proyectos del edificio con seguimiento de progreso
- Encuestas con opciones y conteo de votos
- Sección de anuncios financieros
- Migraciones SQL adicionales para tablas de proyectos, encuestas y financiero
- Correcciones de build para despliegue en DigitalOcean (TypeScript y resolución de imports en tres commits de fix)
Pantalla principal y limpieza de lockfile
SuperArregloMainScreen — corrección integral al layout de la vista principal del portal de residentes y comportamiento de pestañas. Se resolvieron conflictos de lockfile bun/npm para un despliegue CI/CD confiable.
Preseed de base de datos y assets
Se agregó script de preseed de base de datos para datos de demo/staging. Se corrigió la carga de assets de imagen del edificio (chapimagen) y compatibilidad con bun.
Correcciones de codificación y almacenamiento
Se corrigieron caracteres con acento en español y el manejo de blobs de Supabase Storage para medios subidos.
Pulido móvil y branding
- Corrección de viewport y botón atrás en la pantalla de login
- Nuevo ícono de app y favicon mejorado
- Pasada final de refinamiento de íconos
Construyendo Smartclic Demo