Tesela · Lab · Motor de búsqueda / Search & Discovery

Cómo se construyó Tesela

Demo de motor de búsqueda tipo Algolia/Meilisearch construido desde cero en JavaScript puro y ejecutándose por completo en el cliente: un catálogo cerámico de 10.000 SKUs generado proceduralmente se indexa al cargar la página (índice invertido con frecuencias por campo) y responde en milisegundos mientras tecleas. La búsqueda es federada: la misma query consulta a la vez el catálogo y una base de recursos (manuales técnicos, tutoriales, vídeos y patrones de colocación dibujados en SVG), agrupa los resultados por categoría y sugiere facetas desde el propio buscador. Tolera erratas con distancia de Levenshtein propia y te dice qué corrección aplicó, recalcula los conteos de cada faceta en tiempo real según filtras, y puede justificar cada resultado: el botón «score» desglosa el ranking (coincidencia en nombre vs descripción, penalización fuzzy, boost por stock y valoración). El modo debug enseña las tripas: tokens resueltos, candidatos y tiempo de cada fase del pipeline.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

Qué demuestra

• Índice invertido propio: 10.000 docs indexados al vuelo con frecuencias por campo (nombre/descripción)
• Catálogo sintético de material cerámico generado con RNG seedeado — reproducible, no precocinado
• Tokenización en español: minúsculas, acentos fuera, plurales simples y formatos («60×120» → 60x120, 60, 120)
• Fuzzy matching con Levenshtein implementado a mano y umbral dinámico según longitud del término
• Corrección visible: «resultados para porcelánico — buscaste porzelanico (d=1)»
• Ranking BM25-lite explicable: botón «Explicar» con el desglose del score de cada resultado
• Búsqueda federada: un segundo índice de recursos (manuales, tutoriales, vídeos, colocaciones) responde a la misma query
• Resultados agrupados por categoría con «Ver todos», al estilo de los buscadores de fabricante
• Patrones de colocación (espiga, junta trabada, damero, opus…) dibujados en SVG line-art procedural
• Panel del buscador en tres columnas: sugerencias por frecuencia, categorías/marcas con conteos y recursos
• Facetas con conteos instantáneos que se recalculan según query + filtros (OR interno, AND entre facetas)
• Slider de precio con histograma de distribución de los resultados actuales
• Búsqueda debounced en tiempo real sobre 10k docs con tiempos reales en ms visibles
• Modo debug: resolución token a token, candidatos antes de rankear y pipeline cronometrado por fases
• Estado completo en la URL (query, facetas, precio, orden) — cada búsqueda es compartible
• Imágenes de producto en SVG procedural derivadas de los atributos de cada SKU (color, textura, acabado)
• API en consola: window.tesela.query(), .explain(), .levenshtein() para inspeccionar el motor