Saltar al contenido principal

Frontend - Introducción

El frontend de Floutic está construido con Astro, React, Tailwind CSS y shadcn/ui.

🚀 Características Principales​

  • ✅ Framework: Astro con SSR y React para componentes interactivos
  • ✅ Styling: Tailwind CSS con colores personalizados de Floutic
  • ✅ UI Components: shadcn/ui para componentes accesibles
  • ✅ State Management: Zustand para gestión de estado
  • ✅ API Client: Axios con interceptores para autenticación JWT segura
  • ✅ Autenticación Segura: Sistema con HttpOnly cookies, CSRF protection y session_id único
  • ✅ Testing: Playwright para tests E2E + Vitest para tests unitarios
  • ✅ RGPD: Banner de cookies y páginas legales
  • ✅ Dashboards optimizados: Paneles rediseñados para empresa, experto y admin
  • ✅ Sistema de hitos secuenciales: Gestión completa de milestones con entregas y revisiones
  • ✅ Animaciones UX/DX: Sistema de animaciones profesionales con @midudev/tailwind-animations
  • ✅ SEO avanzado: FAQ optimizada para intenciones de búsqueda, sistema de ofuscación de enlaces, páginas con noindex

🛠️ Stack Tecnológico​

  • Astro - Framework SSR
  • React - Componentes interactivos
  • Tailwind CSS - Estilos
  • @midudev/tailwind-animations - Animaciones UX/DX profesionales
  • shadcn/ui - Componentes UI accesibles
  • Zustand - Gestión de estado
  • Axios - HTTP Client
  • Playwright - Testing E2E
  • Vitest - Testing unitario

📋 Requisitos​

  • Docker (obligatorio)
  • Acceso a docker compose

🏗️ Arquitectura​

/src
 ├── components/          # Componentes React
 │   ├── features/       # Componentes de funcionalidades
 │   ├── ui/             # Componentes UI base
 │   └── sections/       # Secciones de páginas
 ├── pages/              # Páginas Astro
 ├── layouts/            # Layouts de páginas
 ├── stores/             # Stores Zustand
 ├── lib/                # Utilidades y helpers
 ├── hooks/              # React hooks personalizados
 └── types/              # TypeScript types

📚 Documentación​

🚀 Inicio Rápido​

Docker (Obligatorio)​

# Iniciar frontend con Docker Compose
docker compose up -d frontend

# Ver logs
docker compose logs -f frontend

# Acceder al frontend
open http://localhost:3000

🧪 Testing​

Tests Unitarios (Vitest)​

# Ejecutar tests unitarios
./scripts/test_frontend_unit.sh

# Ejecutar un test específico
./scripts/test_frontend_unit.sh src/components/features/__tests__/DashboardExperto.test.tsx

Tests E2E (Playwright)​

# Instalar navegadores
docker compose exec frontend npx playwright install --with-deps

# Ejecutar tests E2E
./scripts/test_e2e.sh

# Ejecutar un spec específico
./scripts/test_e2e.sh auth.spec.ts

Variables E2E: .env.e2e es la plantilla de referencia; ./scripts/test_e2e.sh aplica overrides sobre .env y lo restaura al terminar.

Cobertura E2E: revisa frontend/tests/e2e/E2E_COVERAGE.md y los escenarios en SCENARIOS.md.

🔗 Enlaces Útiles​