🏗️ Arquitectura Técnica
Decisiones de diseño, patrones y best practices de Fincos
Frontend
- • React 18 - UI library
- • React Router - SPA routing
- • TanStack Query - Server state
- • Tailwind CSS - Styling
- • Shadcn/UI - Components
- • Framer Motion - Animations
- • Lucide React - Icons
- • date-fns - Date utilities
Backend
- • Base44 Platform - Infrastructure
- • Deno Deploy - Edge functions
- • PostgreSQL - Database
- • Row Level Security - Access control
- • Supabase Storage - Files
Integraciones
- • Wompi - Payments
- • Resend - Transactional email
- • OpenAI - AI content generation
- • WordPress API - Data import
- • Google Maps - Location services
Component-Based Architecture
La UI se construye con componentes reutilizables y aislados. Cada componente tiene una responsabilidad única y bien definida.
Container/Presentational Pattern
Separación entre lógica de negocio (containers) y presentación (components). Las páginas actúan como containers, los componentes son presentacionales.
Custom Hooks
La lógica reutilizable se encapsula en hooks personalizados como useDebounce para facilitar el testing y la reutilización.
Lazy Loading y Code Splitting
Componentes no críticos se cargan bajo demanda con React.lazy para mejorar el tiempo de carga inicial significativamente.
El flujo de datos en Fincos sigue un patrón unidireccional y predecible
UI Component
Usuario interactúa con el componente
TanStack Query
Gestiona el estado del servidor
Base44 SDK
Cliente pre-configurado para el backend
PostgreSQL + RLS
Base de datos con reglas de seguridad
Backend Functions
Lógica compleja e integraciones
💡 Ventaja: TanStack Query maneja automáticamente el caching, refetching, loading states y error handling
🔐 Autenticación
- • Gestionada completamente por Base44
- • Magic links, OAuth y passwords soportados
- • JWT tokens con renovación automática
- • Sesiones persistentes en localStorage
🛡️ Row Level Security RLS
Todas las operaciones CRUD pasan automáticamente por políticas RLS en PostgreSQL
🔒 Validación de Webhooks
Los webhooks de Wompi se validan mediante firma SHA256
🖼️ Imágenes Optimizadas
- • Lazy loading con Intersection Observer
- • Responsive images con srcset
- • Blur placeholders para UX fluida
- • Compresión automática de Unsplash
📦 Code Splitting
- • React.lazy para componentes grandes
- • Suspense boundaries estratégicos
- • Route-based code splitting
- • Reducción de bundle size ~40%
💾 Caching Estratégico
- • TanStack Query cache 5 min default
- • Stale-while-revalidate pattern
- • Prefetching en hover de enlaces
- • Optimistic updates en mutaciones
⚡ Edge Computing
- • Backend functions en Deno Deploy
- • Latencia menor a 50ms globalmente
- • Auto-scaling sin configuración
- • CDN global de Base44
Fincos está diseñado para escalar sin cambios en la arquitectura
🔄 Horizontal Scaling
Base44 escala automáticamente las instancias según la demanda
💾 Database Pooling
PostgreSQL usa pgBouncer para connection pooling eficiente
🗄️ Data Partitioning
Tablas grandes preparadas para particionado temporal
📡 CDN Global
Assets estáticos se sirven desde edge locations worldwide
📈 Capacidad actual estimada
- • ~10,000 usuarios activos concurrentes
- • ~50,000 propiedades sin degradación
- • ~1,000 reservas/hora pico
- • Almacenamiento ilimitado de imágenes