NoSignups (FckSignups)
Arquitectura de NoSignups: carga, filtrado, grupos y presentación
Sigue los datos del cliente y entiende cómo la reserva, las coincidencias y los grupos editoriales determinan el resultado visible.
Qué aprenderás
- Cargar JSON y validarlo en ejecución son fronteras distintas.
- Tras el filtro completo, las estrellas desempatan.
- Los grupos colapsados y la reserva alteran lo que se ve.
Antes de empezar
- JavaScript y JSON básicos
- Una tarea inocua y un registro de muestra
Explica la frontera del capítulo y verifícala con la muestra o ficha propuesta.
Conclusiones clave
- Cargar JSON y validarlo en ejecución son fronteras distintas.
- Tras el filtro completo, las estrellas desempatan.
- Los grupos colapsados y la reserva alteran lo que se ve.
El cargador selecciona los datos antes de buscar
App llama a useTools y pasa datos derivados a cabecera, filtros y Tools. El hook mantiene registros, categorías, estado de carga, consulta y categoría seleccionada. Su efecto intenta el JSON de desarrollo solo en desarrollo, después el de producción y finalmente FALLBACK_DATA. La ruta inspeccionada carga y filtra en el navegador, sin consultar un índice de búsqueda del servidor.
hydrate añade la categoría all si falta y actualiza los arreglos de estado. loadTools afirma que el JSON analizado es ToolsData, pero no valida cada registro durante la ejecución. Un JSON sintácticamente válido puede cargarse y contener campos inutilizables para el código posterior. Una copia robusta necesita validación entre análisis e hidratación, además de una definición clara de datos de reserva aceptables.
La selección precede a la presentación editorial
La consulta se convierte en términos. El hook filtra por categoría, calcula puntuaciones, exige todos los términos, ordena y finalmente divide en grupos. Nombre, descripción y etiquetas forman el texto buscable. La categoría es un filtro exacto previo; las estrellas son una entrada de ordenación, no un modelo de relevancia entrenado sobre intención del lector.
Tras exigir todos los términos, cada resultado conservado tiene la misma puntuación: el número de términos consultados. Por ello, la puntuación no distingue más los resultados de una consulta no vacía; las estrellas desempatan. La agrupación posterior modifica el orden visible. Esta secuencia explica mejor el comportamiento que describirlo como un sistema sofisticado de relevancia.
Los estados y el despliegue de grupos afectan la visibilidad
Tools muestra carga antes de disponer de datos y un estado vacío cuando los grupos no contienen resultados. Si existen grupos destacados, Meets Criteria puede permanecer detrás de Show More; al buscar también se muestran sus coincidencias. Cambiar consulta o categoría reinicia showMore. Son reglas de presentación, no registros que hayan desaparecido del catálogo.
Los datos de reserva pueden proporcionar tarjetas con un estado de error. Sin embargo, la rama de resultado vacío precede al aviso de error en Tools.tsx. Un resultado de reserva vacío puede mostrar ausencia de coincidencias sin ese aviso concreto. Es una observación limitada de las ramas inspeccionadas, no una afirmación sobre todos los fallos del sitio público; sirve como caso de regresión.
Pasos de implementación
- 1
Sigue un registro desde JSON hasta el estado del hook.
- 2
Lee categoría, puntuación, orden y sectionize en secuencia.
- 3
Prueba carga, reserva, vacío y grupos colapsados por separado.
Ejemplo para copiar
Petición JSON -> análisis -> hidratación
consulta -> términos
registros -> categoría -> puntuación -> todos los términos
-> orden -> grupos -> Tools -> ToolCard
La reserva puede conservar un estado de error.Preguntas frecuentes
¿La consulta se envía a un buscador externo?
La ruta useTools inspeccionada filtra registros cargados en el navegador. Obtener el catálogo sí requiere una petición de red.
¿Por qué una entrada requiere Show More?
Con grupos destacados presentes, la interfaz puede colapsar Meets Criteria. La búsqueda y el estado de expansión cambian esa presentación.
Fuentes
- README.mdFuente verificada 2026-09-07
- package.jsonFuente verificada 2026-09-07
- vite.config.mtsFuente verificada 2026-09-07
- src/hooks/useTools.tsFuente verificada 2026-09-07
- src/components/Home/Tools/Tools.tsxFuente verificada 2026-09-07
- src/components/Home/Tools/ToolCard/ToolCard.tsxFuente verificada 2026-09-07
- src/types/index.tsFuente verificada 2026-09-07
- src/constants/fallbackData.tsFuente verificada 2026-09-07
- src/data/schema.jsFuente verificada 2026-09-07
- cloudflare-worker/worker.tsFuente verificada 2026-09-07
- cloudflare-worker/urlHandlers/handleSubmitTool.tsFuente verificada 2026-09-07
- cloudflare-worker/utils.tsFuente verificada 2026-09-07