Dilo App
Marketplace de Servicios para el Hogar
Descripcion General
Dilo App es un marketplace fullstack diseñado para conectar clientes con profesionales de servicios del hogar. La plataforma ofrece búsqueda con mapa interactivo, autenticación dual para clientes y profesionales, sistema de mensajería en tiempo real, gestión de solicitudes de proyecto, sistema de reseñas y calificaciones, y dashboards personalizados para ambos tipos de usuarios.
El sistema implementa dos sistemas de diseño distintos: harbor_home para páginas públicas con fuente Inter y color #006782, y aura_home para páginas internas con fuente Manrope y color #306482. Ambos sistemas comparten características clave como glassmorphism, regla "No-Line" y sombras ambientales para crear una experiencia visual cohesiva.
La arquitectura utiliza Next.js 14+ con App Router, React 18+ para la interfaz, TypeScript 5+ para type safety, Supabase como backend con PostgreSQL, Prisma como ORM, Zustand para gestión de estado con 4 stores independientes, y Tailwind CSS para estilos. La aplicación es completamente responsive y optimizada para dispositivos móviles, tablets y desktop.
Caracteristicas Principales
- Búsqueda de profesionales con mapa interactivo en tiempo real
- Sistema de autenticación dual con roles diferenciados (cliente/profesional)
- Gestión completa de solicitudes de proyecto desde creación hasta finalización
- Sistema de mensajería en tiempo real con notificaciones
- Dashboards personalizados para clientes y profesionales con métricas y análisis
- Sistema de reseñas y calificaciones para garantizar calidad del servicio
- Gestión de citas y programación entre clientes y profesionales
- Guías de costos con información detallada sobre precios promedio de servicios
- Interfaz completamente en español optimizada para el mercado hispanohablante
- Diseño responsive optimizado para dispositivos móviles, tablets y desktop
Desafios y Soluciones
Gestion de Estado Complejo
La aplicación requería gestionar múltiples estados independientes: autenticación, mensajería, solicitudes y notificaciones, cada uno con su propia lógica y actualizaciones en tiempo real.
Solución: Implementación de Zustand con 4 stores independientes (auth, messages, requests, notifications), cada uno con sus propios selectores y acciones, permitiendo actualizaciones granulares sin re-renders innecesarios.
Autenticacion y Autorizacion
Necesidad de implementar autenticación segura con roles diferenciados (cliente/profesional) y protección de rutas según el tipo de usuario y estado de autenticación.
Solución: Uso de Supabase Auth con Row Level Security (RLS) en PostgreSQL y middleware de Next.js para validación de sesiones en cada request, garantizando acceso seguro a recursos según el rol del usuario.
Consistencia de Diseño Dual
Mantener dos sistemas de diseño distintos (harbor_home y aura_home) sin duplicar código y asegurando transiciones suaves entre áreas públicas e internas.
Solución: Implementación de Layout Groups en Next.js App Router con archivos layout.tsx específicos para cada sistema, compartiendo componentes base pero aplicando estilos y fuentes diferenciadas mediante CSS variables y Tailwind config.
Stack Tecnológico
Next.js 14+
Framework
React 18+
UI Library
TypeScript 5+
Language
Supabase
Backend
PostgreSQL
Database
Prisma
ORM
Zustand
State Management
Tailwind CSS
Styling
Características Principales
Búsqueda con Mapa Interactivo
Encuentra profesionales cerca de tu ubicación con mapa en tiempo real
Sistema de Autenticación Dual
Autenticación segura para clientes y profesionales con roles diferenciados
Solicitudes de Proyecto
Gestión completa de solicitudes desde creación hasta finalización
Mensajería en Tiempo Real
Comunicación directa entre clientes y profesionales con notificaciones
Dashboards Personalizados
Paneles de control específicos para clientes y profesionales
Sistema de Reseñas
Calificaciones y comentarios para garantizar calidad del servicio
Gestión de Citas
Programación y seguimiento de citas entre clientes y profesionales
Guías de Costos
Información detallada sobre precios promedio de servicios
Soporte Multilingüe
Interfaz completamente en español para el mercado hispanohablante
Diseño Responsive
Experiencia optimizada en dispositivos móviles, tablets y desktop
Sistemas de Diseño
harbor_home
Sistema de diseño para páginas públicas y landing pages. Utiliza la fuente Inter y el color primario #006782. Enfocado en claridad y conversión.
aura_home
Sistema de diseño para páginas internas y dashboards. Utiliza la fuente Manrope y el color primario #306482. Enfocado en funcionalidad y usabilidad.
Ambos sistemas comparten características clave: glassmorphism para efectos de profundidad, regla "No-Line" para interfaces limpias, y sombras ambientales para jerarquía visual.
Desafíos y Soluciones
Gestión de Estado Complejo
La aplicación requería gestionar múltiples estados independientes: autenticación, mensajería, solicitudes y notificaciones, cada uno con su propia lógica y actualizaciones en tiempo real.
Implementación de Zustand con 4 stores independientes (auth, messages, requests, notifications), cada uno con sus propios selectores y acciones, permitiendo actualizaciones granulares sin re-renders innecesarios.
Autenticación y Autorización
Necesidad de implementar autenticación segura con roles diferenciados (cliente/profesional) y protección de rutas según el tipo de usuario y estado de autenticación.
Uso de Supabase Auth con Row Level Security (RLS) en PostgreSQL y middleware de Next.js para validación de sesiones en cada request, garantizando acceso seguro a recursos según el rol del usuario.
Consistencia de Diseño Dual
Mantener dos sistemas de diseño distintos (harbor_home y aura_home) sin duplicar código y asegurando transiciones suaves entre áreas públicas e internas.
Implementación de Layout Groups en Next.js App Router con archivos layout.tsx específicos para cada sistema, compartiendo componentes base pero aplicando estilos y fuentes diferenciadas mediante CSS variables y Tailwind config.