Guía de ciudad full stack hecha con Next.js 15, Storyblok y Algolia. Búsqueda con sinónimos, tolerancia a errores de tipeo y filtros compuestos. Backend orientado a servicios con inyección de dependencias.
Arquitectura headless: Storyblok maneja el contenido y Algolia la búsqueda. Los componentes se mapean a bloques de Storyblok (hero, cafe, event, card_grid), lo que permite edición visual sin perder el tipado en React.
Búsqueda con Algolia, con sinónimos configurados (quiet↔calm↔peaceful, wifi↔internet↔wireless) y tolerancia a errores de tipeo. React InstantSearch filtra al instante, con scroll infinito de 6 resultados por página.
Búsqueda por facetas sobre noise_level, price_range, wifi, power_outlets y más. El filtro "Work-Friendly" muestra el filtrado compuesto: junta WiFi y tomacorrientes en un solo botón.
Las páginas de detalle usan rutas dinámicas de Next.js (/cafe/[slug]) con llamadas a Storyblok desde el servidor. El texto enriquecido se extrae de estructuras anidadas y se renderiza con el renderer oficial.
Cada lugar incluye datos _geoloc sincronizados a Algolia. React Leaflet dibuja los mapas en las páginas de detalle. El modelo de datos soporta cafés y eventos con la misma búsqueda pero distinto renderizado.
El backend sigue principios SOLID con StoryblokService, AlgoliaService, RecordNormalizer y SeedingOrchestrator. Python siembra Storyblok, Node.js sincroniza a Algolia con upserts idempotentes, seguros de correr otra vez sin duplicar.
Con gusto se lo explico pantalla por pantalla, en el orden en que se construyó.