Demo interactiva · datos simulados
Tesela
Motor de búsqueda · Search & Discovery.
Buscador federado sobre 10.000 referencias: índice invertido, corrección de erratas, ranking explicado y recursos relacionados — sin librerías, todo en tu navegador.
- Cosas que demuestra
- 17
- Función de negocio
- 1
- Sectores que lo piden
- 3
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 os interesa algo parecido para vuestro 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
