En esta página
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
La Palapa se construyó con la plantilla Vite de shadcn/ui, Supabase para auth y PostgreSQL, y Row Level Security para separar acceso de residentes y administradores.
Plantilla y base de autenticación
- Inicio desde el stack shadcn/Vite React TypeScript con Tailwind CSS preconfigurado.
- Supabase conectado (inicialmente vía Lovable Cloud) con login/registro usando Supabase Auth.
- Primera migración: tablas
profiles,noticesyappscon políticas RLS. - Perfiles de residentes con número de unidad, feed de avisos y lanzador de apps vinculadas.
Módulos de admin y modelo de datos
- Panel de administración con gestión de usuarios y asignación de roles (
adminvs residente). - Envío de proyectos del edificio (barras de progreso), encuestas (opciones + conteo de votos) y anuncios financieros.
- Migraciones SQL para tablas
projects,pollsy financiero. - Corrección de resolución de imports TypeScript y errores de build para deploy en DigitalOcean (tres commits de fix).
Vista principal del portal de residentes
- Commit
SuperArregloMainScreen— rehacer el layout de pestañas y flujo de navegación para residentes. - Resolución de conflictos de lockfile bun/npm para que las instalaciones de CI/CD se reproduzcan de forma limpia.
- Prueba de cambio de pestañas entre Informes, Proyectos, Encuestas y secciones relacionadas.
Datos de staging, assets y codificación
- Script de preseed de base de datos para entornos demo/staging.
- Corrección de carga de assets
chapimageny compatibilidad con bun en el pipeline de build. - Corrección de acentos en español y manejo de blobs en Supabase Storage para medios subidos.
Pulido móvil y branding
- Corrección de meta viewport y comportamiento del botón atrás en la pantalla de login.
- Nuevos íconos de app y pasadas de favicon para instalación PWA/pantalla de inicio.
- Layout responsivo verificado en móvil para avisos y flujo de votación en encuestas.
Construyendo Galena AI