Saltar al contenido principal

Arquitectura del Frontend

El frontend de Floutic está construido con Astro, React, Tailwind CSS y shadcn/ui, siguiendo una arquitectura moderna y escalable.

Stack Tecnológico​

Framework Principal​

  • Astro: Framework SSR con Islands Architecture
  • React: Para componentes interactivos
  • TypeScript: Tipado estático completo

Estilos y UI​

  • Tailwind CSS: Framework de utilidades CSS
  • shadcn/ui: Componentes accesibles y personalizables
  • Framer Motion: Animaciones y transiciones

Gestión de Estado​

  • Zustand: Store global para autenticación y estado de la aplicación
  • React Hooks: Hooks personalizados para lógica reutilizable

Cliente API​

  • Axios: Cliente HTTP con interceptores
  • Detección automática de URL: Según hostname (localhost/IP local)
  • Refresh automático de tokens: Renovación transparente de JWT

Estructura del Proyecto​

frontend/
├── src/
│   ├── components/
│   │   ├── ui/              # Componentes shadcn/ui
│   │   ├── shared/          # Componentes reutilizables
│   │   ├── features/        # Componentes por funcionalidad
│   │   └── features/__tests__/  # Tests unitarios
│   ├── layouts/
│   │   └── Layout.astro     # Layout principal
│   ├── pages/               # Rutas Astro (file-based routing)
│   ├── lib/
│   │   ├── api/            # Cliente API y endpoints
│   │   ├── stores/         # Zustand stores
│   │   ├── utils/          # Utilidades
│   │   ├── types/         # TypeScript types
│   │   ├── hooks/         # Hooks personalizados
│   │   └── auth/          # Autenticación segura
│   ├── styles/
│   │   └── global.css      # Estilos globales
│   └── middleware/         # Middleware de autenticación
├── tests/                  # Tests E2E con Playwright
├── playwright.config.ts    # Configuración Playwright
└── vitest.config.ts        # Configuración Vitest

Arquitectura de Componentes​

Componentes Base (src/components/shared/)​

  • Header: Navegación principal con autenticación
  • Footer: Enlaces legales e información
  • Layout: Estructura base de páginas
  • CookieBanner: Banner de cookies RGPD
  • EmptyState: Estados vacíos con mensajes
  • ErrorBoundary: Manejo de errores React
  • Loading: Indicadores de carga
  • Toast: Notificaciones toast
  • NotificationCenter: Centro de notificaciones en tiempo real

Componentes de UI (src/components/ui/)​

Componentes de shadcn/ui personalizados:

  • Button, Input, Card, Badge, Select, Textarea, Label, Avatar, Dialog, DropdownMenu, etc.

Componentes de Features (src/components/features/)​

Organizados por funcionalidad:

  • Autenticación: LoginForm, RegisterForm, LoginFormSecure
  • Proyectos: ProjectForm, ProjectDetail, MilestoneManager
  • Expertos: ExpertCardSEO, ExpertSearch, ExpertPublicProfileSEO
  • Dashboards: DashboardEmpresa, DashboardExperto, DashboardAdmin
  • Perfiles: ProfileFormExperto, ProfileFormEmpresa, FiscalDataModal
  • Chat: ChatBox, ProjectChat
  • Reseñas: ReviewForm, ReviewCard, ReviewsList

Sistema de Rutas​

Astro utiliza file-based routing:

  • / - Landing page
  • /login - Iniciar sesión
  • /registro - Registro de usuarios
  • /marketplace - Marketplace de proyectos
  • /expertos - Búsqueda de expertos
  • /dashboard/empresa - Dashboard empresa
  • /dashboard/experto - Dashboard experto
  • /dashboard/admin - Panel administración
  • /proyecto/[id] - Detalle de proyecto
  • /perfil/experto/[id] - Perfil público experto
  • /perfil/empresa/[id] - Perfil público empresa

Cliente API​

Configuración Base (src/lib/api/client.ts)​

  • Detección automática de URL del backend
  • Interceptores para autenticación JWT
  • Refresh automático de tokens
  • Retry logic para requests fallidos
  • Manejo global de errores

Módulos API Específicos​

  • auth.ts - Autenticación y autorización
  • chat.ts - Servicio de chat
  • experts.ts - Gestión de expertos
  • profiles.ts - Gestión de perfiles
  • projects.ts - Gestión de proyectos
  • reviews.ts - Gestión de reseñas
  • milestones.ts - Gestión de hitos
  • admin.ts - Funciones administrativas
  • notifications.ts - Sistema de notificaciones

Autenticación Segura​

Sistema de Autenticación (src/lib/auth/secureAuth.ts)​

  • HttpOnly cookies: Tokens almacenados de forma segura
  • CSRF protection: Tokens CSRF en cookies
  • Session ID único: Por ventana para aislar sesiones
  • Refresh automático: Renovación transparente de tokens
  • Logout por inactividad: Configurable por rol

Hooks de Autenticación​

  • useSecureAuth: Hook principal para autenticación segura
  • useIdleTimeout: Hook para timeout por inactividad

Gestión de Estado​

Zustand Stores (src/lib/stores/)​

  • auth.ts: Estado de autenticación global
    • Usuario actual
    • Estado de autenticación
    • Métodos de login/logout

Middleware​

Middleware de Astro (src/middleware.ts)​

  • Verificación de autenticación
  • Redirección según roles
  • Protección de rutas privadas

Testing​

Tests E2E (Playwright)​

  • 8 suites críticas pasando
  • Tests de autenticación, navegación, formularios
  • Tests de seguridad (31 tests, 100% pasando)

Tests Unitarios (Vitest)​

  • 507 tests pasando (100%)
  • Cobertura completa de componentes críticos
  • Tests de hooks y utilidades

Optimizaciones​

Performance​

  • SSR + Islands: Astro renderiza en servidor, React solo donde es necesario
  • Code splitting: Carga diferida de componentes
  • Lazy loading: Imágenes y componentes pesados

SEO​

  • Meta tags dinámicos
  • Schema.org markup
  • Perfiles públicos optimizados
  • Sitemap y robots.txt

Accesibilidad​

  • WCAG AA compliance
  • Navegación por teclado
  • Screen readers support
  • Contraste adecuado

Más Información​