prompts-frontend/
├── .cursorrules # (Opcional - específico para Cursor IDE)
├── .env.local # Variables de entorno locales
├── .env.example # Plantilla de variables de entorno
├── .eslintrc.json # Configuración ESLint
├── .gitignore # Archivos ignorados por Git
├── .prettierrc # Configuración Prettier
├── next.config.js # Configuración NextJS
├── package.json # Dependencias y scripts
├── tsconfig.json # Configuración TypeScript
├── tailwind.config.ts # Configuración Tailwind CSS
├── postcss.config.js # Configuración PostCSS
├── docker/
│ ├── Dockerfile # Dockerfile para producción
│ └── Dockerfile.dev # Dockerfile para desarrollo
├── public/
│ ├── favicon.ico
│ ├── images/
│ │ ├── logo.svg
│ │ └── placeholders/
│ └── locales/ # Archivos de traducción (i18n)
│ ├── es/
│ │ └── common.json
│ └── en/
│ └── common.json
├── src/
│ ├── app/ # App Router de Next.js 15
│ │ ├── layout.tsx # Layout principal
│ │ ├── page.tsx # Página principal
│ │ ├── loading.tsx # Estado de carga global
│ │ ├── error.tsx # Manejo de errores global
│ │ ├── not-found.tsx # Página 404
│ │ ├── globals.css # Estilos globales con Tailwind
│ │ ├── (authenticated)/ # Grupo de rutas autenticadas
│ │ │ ├── layout.tsx # Layout para rutas autenticadas
│ │ │ ├── dashboard/
│ │ │ │ ├── page.tsx
│ │ │ │ └── loading.tsx
│ │ │ ├── prompts/
│ │ │ │ ├── page.tsx
│ │ │ │ ├── new/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── [id]/
│ │ │ │ ├── page.tsx
│ │ │ │ └── edit/
│ │ │ │ └── page.tsx
│ │ │ ├── flows/
│ │ │ │ ├── page.tsx
│ │ │ │ └── builder/
│ │ │ │ └── page.tsx
│ │ │ ├── api-keys/
│ │ │ │ └── page.tsx
│ │ │ └── settings/
│ │ │ ├── page.tsx
│ │ │ ├── profile/
│ │ │ │ └── page.tsx
│ │ │ └── billing/
│ │ │ └── page.tsx
│ │ ├── (public)/ # Grupo de rutas públicas
│ │ │ ├── layout.tsx # Layout para rutas públicas
│ │ │ ├── login/
│ │ │ │ └── page.tsx
│ │ │ ├── register/
│ │ │ │ └── page.tsx
│ │ │ └── pricing/
│ │ │ └── page.tsx
│ │ └── api/ # API Routes (si se necesitan)
│ │ └── webhooks/
│ │ └── stripe/
│ │ └── route.ts
│ ├── components/ # Componentes UI reutilizables
│ │ ├── ui/ # Componentes base sin lógica de negocio
│ │ │ ├── button/
│ │ │ │ ├── button.tsx
│ │ │ │ ├── button.styles.ts
│ │ │ │ └── index.ts
│ │ │ ├── input/
│ │ │ │ ├── input.tsx
│ │ │ │ └── index.ts
│ │ │ ├── card/
│ │ │ │ ├── card.tsx
│ │ │ │ └── index.ts
│ │ │ ├── dialog/
│ │ │ │ ├── dialog.tsx
│ │ │ │ └── index.ts
│ │ │ ├── toast/
│ │ │ │ ├── toast.tsx
│ │ │ │ ├── toast-provider.tsx
│ │ │ │ └── index.ts
│ │ │ └── index.ts # Barrel export
│ │ ├── layout/ # Componentes de layout compartidos
│ │ │ ├── header/
│ │ │ │ ├── header.tsx
│ │ │ │ ├── header.styles.ts
│ │ │ │ └── index.ts
│ │ │ ├── sidebar/
│ │ │ │ ├── sidebar.tsx
│ │ │ │ ├── sidebar-item.tsx
│ │ │ │ └── index.ts
│ │ │ ├── footer/
│ │ │ │ ├── footer.tsx
│ │ │ │ └── index.ts
│ │ │ └── mobile-nav/
│ │ │ ├── mobile-nav.tsx
│ │ │ └── index.ts
│ │ └── shared/ # Componentes compartidos con algo de lógica
│ │ ├── loading-spinner/
│ │ │ ├── loading-spinner.tsx
│ │ │ └── index.ts
│ │ ├── error-boundary/
│ │ │ ├── error-boundary.tsx
│ │ │ └── index.ts
│ │ ├── confirmation-dialog/
│ │ │ ├── confirmation-dialog.tsx
│ │ │ └── index.ts
│ │ └── file-upload/
│ │ ├── file-upload.tsx
│ │ ├── file-upload.utils.ts
│ │ └── index.ts
│ ├── features/ # Lógica de negocio organizada por dominio
│ │ ├── authentication/
│ │ │ ├── components/
│ │ │ │ ├── login-form/
│ │ │ │ │ ├── login-form.tsx
│ │ │ │ │ ├── login-form.validation.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── register-form/
│ │ │ │ │ ├── register-form.tsx
│ │ │ │ │ ├── register-form.validation.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── auth-guard/
│ │ │ │ ├── auth-guard.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-auth.ts
│ │ │ │ ├── use-login.ts
│ │ │ │ ├── use-register.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── auth.service.ts
│ │ │ │ ├── token.service.ts
│ │ │ │ └── index.ts
│ │ │ ├── store/
│ │ │ │ ├── auth.store.ts
│ │ │ │ └── index.ts
│ │ │ ├── types/
│ │ │ │ ├── auth.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── utils/
│ │ │ │ ├── auth.utils.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── prompt-management/
│ │ │ ├── components/
│ │ │ │ ├── prompt-editor/
│ │ │ │ │ ├── prompt-editor.tsx
│ │ │ │ │ ├── prompt-editor.styles.ts
│ │ │ │ │ ├── editor-toolbar.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── prompt-list/
│ │ │ │ │ ├── prompt-list.tsx
│ │ │ │ │ ├── prompt-card.tsx
│ │ │ │ │ ├── prompt-filters.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── optimization-assistant/
│ │ │ │ │ ├── optimization-assistant.tsx
│ │ │ │ │ ├── suggestion-card.tsx
│ │ │ │ │ ├── optimization.utils.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── parameter-panel/
│ │ │ │ ├── parameter-panel.tsx
│ │ │ │ ├── parameter-input.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-prompts.ts
│ │ │ │ ├── use-prompt-optimization.ts
│ │ │ │ ├── use-prompt-execution.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── prompt.service.ts
│ │ │ │ ├── optimization.service.ts
│ │ │ │ ├── template.service.ts
│ │ │ │ └── index.ts
│ │ │ ├── store/
│ │ │ │ ├── prompt.store.ts
│ │ │ │ └── index.ts
│ │ │ ├── types/
│ │ │ │ ├── prompt.types.ts
│ │ │ │ ├── optimization.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── utils/
│ │ │ │ ├── prompt.utils.ts
│ │ │ │ ├── validation.utils.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── flow-builder/
│ │ │ ├── components/
│ │ │ │ ├── canvas/
│ │ │ │ │ ├── flow-canvas.tsx
│ │ │ │ │ ├── canvas-controls.tsx
│ │ │ │ │ ├── canvas.utils.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── base-block/
│ │ │ │ │ │ ├── base-block.tsx
│ │ │ │ │ │ └── base-block.types.ts
│ │ │ │ │ ├── prompt-block/
│ │ │ │ │ │ ├── prompt-block.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── conditional-block/
│ │ │ │ │ │ ├── conditional-block.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── loop-block/
│ │ │ │ │ │ ├── loop-block.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── input-block/
│ │ │ │ │ │ ├── input-block.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── output-block/
│ │ │ │ │ │ ├── output-block.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── connections/
│ │ │ │ │ ├── connection-line.tsx
│ │ │ │ │ ├── connection-points.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── toolbar/
│ │ │ │ │ ├── flow-toolbar.tsx
│ │ │ │ │ ├── block-palette.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ └── sidebar/
│ │ │ │ ├── properties-panel.tsx
│ │ │ │ ├── flow-validation.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-flow-builder.ts
│ │ │ │ ├── use-canvas.ts
│ │ │ │ ├── use-blocks.ts
│ │ │ │ ├── use-connections.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── flow-engine.service.ts
│ │ │ │ ├── flow-validator.service.ts
│ │ │ │ ├── flow-executor.service.ts
│ │ │ │ ├── block-factory.service.ts
│ │ │ │ └── index.ts
│ │ │ ├── store/
│ │ │ │ ├── flow.store.ts
│ │ │ │ ├── canvas.store.ts
│ │ │ │ └── index.ts
│ │ │ ├── types/
│ │ │ │ ├── flow.types.ts
│ │ │ │ ├── block.types.ts
│ │ │ │ ├── connection.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── utils/
│ │ │ │ ├── flow.utils.ts
│ │ │ │ ├── canvas.utils.ts
│ │ │ │ ├── geometry.utils.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── credit-management/
│ │ │ ├── components/
│ │ │ │ ├── credit-balance/
│ │ │ │ │ ├── credit-balance.tsx
│ │ │ │ │ ├── balance-indicator.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── usage-dashboard/
│ │ │ │ │ ├── usage-dashboard.tsx
│ │ │ │ │ ├── usage-chart.tsx
│ │ │ │ │ ├── usage-table.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ └── purchase-modal/
│ │ │ │ ├── purchase-modal.tsx
│ │ │ │ ├── payment-form.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-credits.ts
│ │ │ │ ├── use-usage-stats.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── credit.service.ts
│ │ │ │ ├── usage.service.ts
│ │ │ │ └── index.ts
│ │ │ ├── store/
│ │ │ │ ├── credit.store.ts
│ │ │ │ └── index.ts
│ │ │ ├── types/
│ │ │ │ ├── credit.types.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── api-key-management/
│ │ │ ├── components/
│ │ │ │ ├── key-generator/
│ │ │ │ │ ├── key-generator.tsx
│ │ │ │ │ ├── key-form.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── key-list/
│ │ │ │ │ ├── key-list.tsx
│ │ │ │ │ ├── key-card.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ └── usage-analytics/
│ │ │ │ ├── usage-analytics.tsx
│ │ │ │ ├── analytics-chart.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-api-keys.ts
│ │ │ │ ├── use-key-analytics.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── api-key.service.ts
│ │ │ │ ├── analytics.service.ts
│ │ │ │ └── index.ts
│ │ │ ├── store/
│ │ │ │ ├── api-key.store.ts
│ │ │ │ └── index.ts
│ │ │ ├── types/
│ │ │ │ ├── api-key.types.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── multimodal/
│ │ │ ├── components/
│ │ │ │ ├── input-handlers/
│ │ │ │ │ ├── text-input.tsx
│ │ │ │ │ ├── image-input.tsx
│ │ │ │ │ ├── audio-input.tsx
│ │ │ │ │ ├── file-input.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── output-renderers/
│ │ │ │ │ ├── text-output.tsx
│ │ │ │ │ ├── image-output.tsx
│ │ │ │ │ ├── audio-output.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ └── media-preview/
│ │ │ │ ├── media-preview.tsx
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-media-upload.ts
│ │ │ │ ├── use-media-processing.ts
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── media.service.ts
│ │ │ │ ├── upload.service.ts
│ │ │ │ └── index.ts
│ │ │ ├── types/
│ │ │ │ ├── media.types.ts
│ │ │ │ └── index.ts
│ │ │ ├── utils/
│ │ │ │ ├── file.utils.ts
│ │ │ │ ├── media.utils.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ └── user-management/
│ │ ├── components/
│ │ │ ├── profile/
│ │ │ │ ├── profile-form.tsx
│ │ │ │ ├── avatar-upload.tsx
│ │ │ │ └── index.ts
│ │ │ ├── billing/
│ │ │ │ ├── billing-dashboard.tsx
│ │ │ │ ├── subscription-card.tsx
│ │ │ │ ├── invoice-list.tsx
│ │ │ │ └── index.ts
│ │ │ └── settings/
│ │ │ ├── settings-panel.tsx
│ │ │ ├── preference-form.tsx
│ │ │ └── index.ts
│ │ ├── hooks/
│ │ │ ├── use-user.ts
│ │ │ ├── use-subscription.ts
│ │ │ └── index.ts
│ │ ├── services/
│ │ │ ├── user.service.ts
│ │ │ ├── subscription.service.ts
│ │ │ └── index.ts
│ │ ├── store/
│ │ │ ├── user.store.ts
│ │ │ └── index.ts
│ │ ├── types/
│ │ │ ├── user.types.ts
│ │ │ ├── subscription.types.ts
│ │ │ └── index.ts
│ │ └── index.ts
│ ├── hooks/ # Hooks compartidos globalmente
│ │ ├── use-debounce.ts
│ │ ├── use-local-storage.ts
│ │ ├── use-media-query.ts
│ │ ├── use-click-outside.ts
│ │ ├── use-keyboard-shortcut.ts
│ │ └── index.ts
│ ├── lib/ # Librerías y configuraciones
│ │ ├── api/ # Cliente API y configuración
│ │ │ ├── client.ts
│ │ │ ├── endpoints.ts
│ │ │ ├── interceptors.ts
│ │ │ └── index.ts
│ │ ├── firebase/ # Configuración Firebase
│ │ │ ├── config.ts
│ │ │ ├── auth.ts
│ │ │ ├── firestore.ts
│ │ │ └── index.ts
│ │ └── utils/ # Utilidades generales
│ │ ├── formatters.ts
│ │ ├── validators.ts
│ │ ├── constants.ts
│ │ ├── helpers.ts
│ │ └── index.ts
│ ├── services/ # Servicios externos y APIs
│ │ ├── api/
│ │ │ ├── auth-api.service.ts
│ │ │ ├── prompt-api.service.ts
│ │ │ ├── flow-api.service.ts
│ │ │ └── index.ts
│ │ ├── external/
│ │ │ ├── stripe.service.ts
│ │ │ ├── analytics.service.ts
│ │ │ └── index.ts
│ │ └── index.ts
│ ├── store/ # Estado global de la aplicación
│ │ ├── index.ts # Configuración del store
│ │ ├── provider.tsx # Provider del store
│ │ ├── slices/ # Slices para Redux Toolkit
│ │ │ ├── app.slice.ts
│ │ │ ├── ui.slice.ts
│ │ │ └── index.ts
│ │ └── middleware/
│ │ ├── logger.middleware.ts
│ │ └── index.ts
│ ├── styles/ # Estilos globales adicionales
│ │ ├── animations.css
│ │ ├── overrides.css
│ │ └── variables.css
│ └── types/ # Tipos TypeScript globales
│ ├── global.d.ts
│ ├── api.types.ts
│ ├── common.types.ts
│ └── index.ts
├── tests/ # Tests organizados por tipo
│ ├── unit/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── services/
│ ├── integration/
│ │ └── features/
│ └── e2e/
│ ├── auth.spec.ts
│ ├── prompts.spec.ts
│ └── flows.spec.ts
└── scripts/ # Scripts de utilidad
├── generate-types.js
├── analyze-bundle.js
└── check-dependencies.js