Full stack city guide built with Next.js 15, Storyblok CMS and Algolia search. Search with synonyms, typo tolerance and composite filtering. Service oriented backend with dependency injection.
Headless CMS architecture with Storyblok powering content and Algolia handling search. Components are mapped to Storyblok blocks (hero, cafe, event, card_grid) enabling visual editing while maintaining type safe rendering in React.
Search powered by Algolia with configured synonyms (quiet↔calm↔peaceful, wifi↔internet↔wireless) and typo tolerance. React InstantSearch provides instant filtering with infinite scroll pagination loading 6 hits per page.
Advanced faceted search across noise_level, price_range, wifi, power_outlets, and more. The "Work-Friendly" filter demonstrates composite filtering: combining WiFi and power outlet availability into a single smart toggle.
Detail pages use Next.js dynamic routing (/cafe/[slug]) with server side Storyblok fetches. Rich text content is extracted from nested Storyblok structures and rendered with the official rich text renderer.
Each venue includes _geoloc data synced to Algolia. React Leaflet renders interactive maps on detail pages. The data model supports both cafes and events with shared search infrastructure but type specific rendering.
Backend follows SOLID principles with StoryblokService, AlgoliaService, RecordNormalizer, and SeedingOrchestrator. Python seeds Storyblok, Node.js syncs to Algolia with idempotent upserts, safe to re-run without duplicates.
Happy to walk through this one screen by screen, in the order it got built.