We migrated xWeather from a rigid SPA to an SEO-first Next.js and Storyblok platform, giving their team total visual layout control with zero impact on performance.
Client's challenge
01
Single-page application (SPA) architecture with poor SEO and limited crawlability
02
Legacy CMS lacking flexibility and preventing independent content creation
03
Ongoing brand evolution requiring a full structural and visual redesign
04
No scalable workflow for publishing complex, data-heavy content (maps, reports, charts)
05
Migration of ~150 content-rich articles with custom components without losing structure
Solution
We rebuilt xWeather’s web presence on Next.js and Storyblok using a performance-first architecture. Our solution focused on resolving the tension between rigid CMS structures and the team's need for creative freedom, delivered through transparent partnership:
Balancing Visual Freedom with Code Safety While we typically enforce strict CMS constraints to prevent layout breakage, xWeather’s editors required deep visual control. To solve this, we engineered a custom 3-layer component architecture (Content → Adapters → UI). This gave the marketing team complete visual layout flexibility while keeping the codebase strictly typed, secure, and scalable.
Proactive Scope & Budget Alignment Faced with an extensive enterprise scope, we realized mid-project that the volume of unique pages risked overrunning the budget. Rather than hiding the issue, we proactively presented a detailed breakdown to client lead. This transparent communication allowed us to collaboratively optimize the remaining scope and ensure a predictable, on-time delivery.
Performance-First Storyblok Integration We refused to compromise on speed. Because the native Storyblok SDK forces the component tree into Client Components to enable live preview, we custom-built our own Storyblok Bridge. This workaround preserves React Server Components (RSC) on Vercel for maximum performance while maintaining a real-time, visual editing experience for the team.
A Single-Page Application (SPA) architecture that was invisible to search engine crawlers and severely hurt SEO.
A lightning-fast, fully server-rendered (SSR) Next.js site with automated JSON-LD, dynamic sitemaps, and AI-optimized /llms.txt endpoints.
Rigid legacy CMS where the marketing team couldn't launch new pages or campaigns without developer resources.
Complete editorial freedom with 77 section components, custom visual options, and real-time live preview.
No systemized way to display complex data, requiring manual, hardcoded visualizations for reports.
Dynamic, data-driven components like interactive maps and CSV-to-Chart pipelines managed entirely by editors in the CMS.
Risk of broken layouts or rigid block-structures due to a lack of clean separation between content data and UI.
3-layer component architecture (with typed Adapters) keeping CMS data and frontend representation safely decoupled.
A siloed legacy stack with painful and slow publishing workflows for highly detailed content.
A unified, modern platform on Next.js and Storyblok with real-time editing, custom asset management, and a smart, shareable Resource Hub.
Project Tech Stack
Storyblok
Headless CMS with a visual editor, giving developers flexibility and content teams an easy way to edit and preview pages.
Next.JS
React framework for building fast, SEO-friendly web applications with server-side rendering and static site generation.
Vercel
A cloud platform for hosting and deploying frontend applications, built to work seamlessly with Next.js and modern frameworks.
Tailwind
CSS framework that lets you style websites quickly using utility classes instead of writing custom CSS.
GSAP
Framework-agnostic JavaScript animation library
How we work
Governed and Scalable, by Design
We design content models, editorial workflows, and governance into the architecture from day one to make you Information Architecture clean and usable as your team, markets, and channels grow.
Editorial UX boosts your marketing team's speed and freedom. They can build pages, launch campaigns, and manage content without needing developer help.
Performance & AI SEO by Default
Each project includes a complete SEO + LLM optimization. Performance baseline as standard: Core Web Vitals, structured data, rendering strategy, and AI SEO setup.
Scalable Next.js architecture derived from 7+ years of experience.
Already live? Our Next.js SEO audit gives you an actionable, dev-ready assessment of where you stand.
Predictable & Efficient Delivery
90% of our projects fit the initial budget. That comes from the time we invest upfront — understanding exactly what we're building before a single line of code is written.
Our CMS Kit has page builders, navigation, localization, content models, and SEO settings. It boosts every engagement. Plus, it won’t limit your choices. It's a smart starter refined across dozens of production deployments, not a constraint.
Key Features
1
6
Interactive Lightning Intelligence Map
A multi-dimensional visualization enabling users to explore lightning density by region, year, and time of day, combining static datasets and interactive maps
2
6
Data-Driven Charts from CSV
Custom pipeline converting CSV data into validated, interactive charts with no developer involvement, enabling fast publishing of analytical reports
3
6
Performant Scroll-Based Animations
GSAP-powered animations including pinned sections, synchronized scroll interactions, and dynamic navigation - optimized for smooth performance
4
6
CMS-Controlled Lottie Animations
Lottie integration directly in the CMS, allowing editors to upload and configure animations without code changes
5
6
Developer-Focused Code Display System
Advanced code rendering system with syntax highlighting, typing animations, and multi-tab API views configurable directly from CMS
6
6
Smart Resource Hub with Filtering
Server-driven filtering system for articles and resources with URL-based state, enabling fast navigation and shareable filtered views
Our client says
Patricia Åkerman
“FocusReactive helped us design and build a modern, high-performing website that delivers strong UX and conversion capabilities while enabling full independence for our marketing team. The new platform is faster, scalable, and allows us to create and manage content without relying on developers. The team delivered on time with proactive communication, weekly updates, and continuous improvements. They were highly responsive, technically strong, and great to work with, making the entire collaboration smooth and effective.”
Team behind a project
Anastasiya Sokolova
Project / Delivery Manager
Eugene Boruhov
Eugene writes expert content about content modeling in Sanity, Sanity vs Storyblok vs Contentful; structured content & GROQ; headless CMS migration and SEO migration services.
Storyblok vs. Sanity - A Comparison of Two Leading Headless CMS
We compare Storyblok and Sanity on ease of use, content modeling, integration, scalability, localization, developer support, security, documentation, and pricing.
This article highlights how optimized images enhance user experience and improve SEO rankings by tackling challenges such as slow loading times, high bandwidth usage, and the significance of faster websites in search engine results.
