Docs

Directorio de Apps - Guía de Usuario

Una guía práctica para usar y modificar el directorio de aplicaciones

Guía de Usuario

Uso del Sistema de Directorio

1. Panel Principal

Visualización de Apps

Las apps se muestran en un grid de tarjetas
Cada tarjeta muestra:
- Nombre de la app
- Logo
- Descripción
- Categorías
- Indicador si es gratis/pago
- Autoridad de dominio

Filtrado de Resultados

Por Categoría: Use el panel lateral izquierdo para filtrar por categorías específicas
Por Tipo:
- Free: Muestra solo apps gratuitas
- Paid: Muestra solo apps de pago
- All: Muestra todas las apps

Navegación

Scroll infinito para cargar más resultados
Click en cualquier tarjeta para ver detalles completos

2. Edición y Contribución

Añadir Nueva App

Click en "Contribute" en la barra superior
Completar el formulario con:
- Nombre de la app/producto
- URL del sitio
- Descripción detallada
- Tu información de contacto
El equipo revisará y añadirá la app

Contactar Soporte

Click en "Contact" en la barra superior
Opciones de contacto:
- Formulario de contacto directo
- Email a salesindex08@gmail.com

3. Funciones Premium

Acceso Completo

Click en "Support Makers" o "Load More"
Suscribirse al newsletter para desbloquear:
- Lista completa de apps
- Scroll infinito sin límites
- Acceso a todas las categorías

4. Personalizaciones

Modo Oscuro/Claro

Click en el ícono sol/luna en la barra superior
Opciones:
- Light: Tema claro
- Dark: Tema oscuro
- System: Sigue configuración del sistema

Vista de Tarjetas

Cada tarjeta muestra:
- Autoridad de dominio con indicador de calidad:
  - Rojo: Below Average (≤40)
  - Amarillo: Average (41-50)
  - Verde Oscuro: Good (51-60)
  - Verde Claro: Excellent (>60)
- Badges de tipo:
  - Outline: Gratuito
  - Sólido: Pago
  - Ambos: Versiones gratis y pago

5. Detalles de Apps

Vista Detallada

Click en cualquier tarjeta para abrir panel lateral
Información mostrada:
- Preview de la app
- Logo
- Descripción completa
- Métricas detalladas
- Categorías
- Link directo al sitio

Acciones Disponibles

Visitar Sitio: Click en "Visit Website"
Compartir: Copiar URL directa
Filtrar Similar: Click en categorías para ver apps similares

Twitter/Novedades

Click en Twitter en el menú para:
- Ver últimas actualizaciones
- Conectar con la comunidad
- Encontrar oportunidades de promoción

Beneficios de suscripción:
- Acceso completo al directorio
- Actualizaciones semanales
- Insights sobre startups
- Noticias del ecosistema

7. Tips de Uso

Búsqueda Eficiente

Usa los filtros de categoría para encontrar apps específicas
Revisa la autoridad de dominio para validar calidad
Explora categorías relacionadas para alternativas

Contribución Efectiva

Proporciona descripciones claras y detalladas
Incluye toda la información relevante
Verifica que la app no esté ya listada

Navegación Optimizada

Usa el scroll infinito para explorar más opciones
Filtra por categorías específicas desde el inicio
Mantén las categorías de interés seleccionadas

Este sistema está diseñado para ayudarte a descubrir y promover proyectos independientes. Úsalo para encontrar nuevas herramientas, promover tus propios proyectos o conectar con otros creadores.

title: Directorio de Apps - Guía de Configuración description: Configuración detallada y personalización técnica del directorio de aplicaciones

Configuración del Directorio

1. Configuración Principal

Edita src/lib/types.ts:

export const directoryConfig = {
  // Configuración básica
  basic: {
    itemsPerPage: 9,
    cacheTime: 3600,
    timeoutMs: 5000,
    retryAttempts: 3,
    filters: {
      includeCategories: [], // ej: ['Technology', 'AI Tools']
      excludeCategories: [], // ej: ['Games', 'Entertainment']
      minDomainAuthority: 0, // mínimo DA requerido
      productTypes: ['free', 'paid', 'both'],
      sortBy: 'authority'  // 'authority', 'name', 'date'
    }
  },
 
  // Configuración avanzada
  advanced: {
    maxItems: 100,
    loadDepth: 'full',
    cacheTime: 7200,
    timeoutMs: 10000,
    retryAttempts: 5,
    analytics: true,     // tracking de uso
    features: {
      preview: true,     // previews de apps
      metrics: true,     // métricas detalladas
      sharing: true      // opciones de compartir
    },
    filters: {
      minDescription: 50,  // longitud mínima descripción
      maxAge: '90d',      // edad máxima del listado
      verifiedOnly: false  // solo apps verificadas
    }
  }
}

2. Configuración de Componentes

Personaliza en src/components/pages.tsx:

export const componentsConfig = {
  pageCard: {
    layout: {
      type: 'grid',       // 'grid', 'list', 'compact'
      columns: {
        sm: 1,            // móvil
        md: 2,            // tablet
        lg: 3             // desktop
      },
      spacing: 4,         // espacio entre cards
      aspectRatio: '16/9' // ratio de imágenes
    },
    features: {
      preview: true,      // imagen preview
      badges: true,       // badges de estado
      metrics: true,      // mostrar métricas
      actions: true       // botones de acción
    },
    animations: {
      hover: true,        // efectos hover
      transition: 'all',  // tipo transición
      duration: 300       // duración ms
    }
  },
 
  filters: {
    position: 'sidebar',  // 'sidebar', 'top', 'modal'
    style: 'expanded',    // 'expanded', 'compact', 'minimal'
    categories: {
      multiple: true,     // selección múltiple
      searchable: true,   // búsqueda en categorías
      hierarchy: false    // categorías jerárquicas
    },
    types: {
      exclusive: true,    // selección exclusiva
      defaultType: 'all'  // tipo por defecto
    }
  }
}

3. Configuración de Almacenamiento

Configura en src/lib/storage.ts:

export const storageConfig = {
  // Configuración de caché
  cache: {
    apps: {
      ttl: 3600,         // tiempo de vida en segundos
      maxSize: '50mb',   // tamaño máximo
      prefix: 'apps:'    // prefijo para keys
    },
    images: {
      ttl: 86400,        // 24 horas
      maxSize: '200mb',  // tamaño máximo
      types: ['logo', 'preview']
    },
    categories: {
      ttl: 7200,         // 2 horas
      maxSize: '1mb',    // tamaño máximo
      update: 'daily'    // frecuencia actualización
    }
  },
 
  // Configuración de persistencia
  persistence: {
    preferences: {
      storage: 'local',  // 'local', 'session'
      encrypt: false,    // encriptar datos
      sync: true        // sincronizar entre tabs
    },
    subscription: {
      storage: 'local',
      duration: '30d',   // duración token
      secure: true      // almacenamiento seguro
    }
  }
}

Configura en src/components/newsletter-form.tsx:

export const newsletterConfig = {
  form: {
    fields: ['email'],
    validation: {
      email: {
        required: true,
        minLength: 5,
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      }
    },
    messages: {
      success: 'Te has suscrito correctamente',
      error: 'Error en la suscripción'
    }
  },
 
  provider: {
    service: 'resend',
    apiEndpoint: '/api/subscribe',
    timeout: 5000,
    retry: {
      attempts: 3,
      delay: 1000
    }
  },
 
  features: {
    doubleOptIn: false,   // confirmar email
    welcome: true,        // email bienvenida
    analytics: true       // tracking suscripciones
  },
  
  access: {
    duration: 'unlimited',
    grantType: 'immediate',
    restrictions: {
      maxPages: -1,       // sin límite
      features: 'all'     // acceso total
    }
  }
}

5. Configuración de API

Configura en src/app/api/route.tsx:

export const apiConfig = {
  endpoints: {
    pages: {
      method: 'GET',
      cache: true,
      rateLimit: {
        window: '1m',
        max: 60
      }
    },
    subscribe: {
      method: 'POST',
      auth: false,
      rateLimit: {
        window: '1h',
        max: 5
      }
    },
    contact: {
      method: 'POST',
      auth: false,
      rateLimit: {
        window: '1d',
        max: 10
      }
    }
  },
 
  response: {
    format: 'json',
    compression: true,
    cors: {
      origin: '*',
      methods: ['GET', 'POST']
    },
    headers: {
      cache: 'no-cache',
      security: true
    }
  }
}

Cada una de estas configuraciones puede ser ajustada según las necesidades específicas del proyecto. Los valores mostrados son los recomendados por defecto pero pueden modificarse para optimizar el rendimiento, funcionalidad y experiencia de usuario del directorio.

Landing Page SaaS Dashboards