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 (507 tests, 100% pasando)
  • ✅ 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

🛠️ Stack Tecnológico​

  • Astro - Framework SSR
  • React - Componentes interactivos
  • Tailwind CSS - Estilos
  • shadcn/ui - Componentes UI accesibles
  • Zustand - Gestión de estado
  • Axios - HTTP Client
  • Playwright - Testing E2E
  • Vitest - Testing unitario

📋 Requisitos​

  • Node.js 20.19.5+
  • npm o yarn
  • Docker (opcional pero recomendado)

🏗️ 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​

Opción 1: Docker (Recomendado)​

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

# Ver logs
docker compose logs -f frontend

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

Opción 2: Desarrollo Local​

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

🧪 Testing​

Tests Unitarios (Vitest)​

# Ejecutar tests unitarios
npm test

# Ejecutar con cobertura
npm run test:coverage

Tests E2E (Playwright)​

# Instalar navegadores
npx playwright install --with-deps

# Ejecutar tests E2E
npm run test:e2e

🔗 Enlaces Útiles​