Hany: In-House Services solution

Overview

Hany is a digital platform that connects Moroccan households with trusted home service professionals — from cleaning and plumbing to self-care and maintenance. Originally launched as a mobile app, Hany needed a web version to expand its reach beyond app stores and capture the growing segment of users who prefer browser-based booking.

As the Lead Web Developer, I built the web platform from scratch using React and Next.js, with a dual focus on delivering a seamless user experience and maximizing organic search visibility. The result was a production-ready web app that dramatically increased Hany's digital footprint in the Moroccan market.

The Challenge

Hany's mobile app had built a loyal user base, but the company faced a strategic limitation: users could only discover and book services through iOS and Android app stores. This created three specific problems:

• No organic search presence — Hany was invisible on Google for high-intent queries like "cleaning service Casablanca" or "plumber near me Morocco"
• Desktop users had no way to browse or book services, limiting the platform to mobile-only audiences
• Marketing campaigns (social media, paid ads) drove traffic to a landing page with no booking capability, creating a conversion gap

The business objective was clear: build a web platform that would make Hany's services discoverable through search engines, accessible from any device, and capable of converting organic traffic into bookings — all while maintaining feature parity with the existing mobile app.

Technical Approach

I chose Next.js as the framework specifically for its server-side rendering (SSR) capabilities. For a platform where SEO was a primary business driver, client-side-only rendering (like a standard React SPA) would have been a non-starter — search engine crawlers need pre-rendered HTML to index content effectively.

The technical stack included:

• Next.js with SSR and ISR (Incremental Static Regeneration) for service and landing pages
• React for interactive booking flows and dynamic UI components
• GraphQL API layer connecting to the existing backend used by the mobile app
• MongoDB as the shared data store across web and mobile platforms
• Node.js backend services for booking logic, payments, and notifications

A critical architectural decision was to share the same GraphQL API and MongoDB database between the mobile app and the web platform. This ensured that service providers, pricing, availability, and user reviews stayed perfectly synchronized across both platforms with zero data duplication.

SEO Strategy and Execution

SEO was not an afterthought — it was a core product requirement from day one. I collaborated closely with Hany's marketing and finance teams to build a search strategy that would drive organic acquisition.

Keyword Research and Content Architecture

We identified high-intent service keywords in both French and Arabic (Morocco's primary search languages) and built dedicated landing pages for each service category and city. This created a programmatic SEO structure with pages like "/services/nettoyage/casablanca" and "/services/plomberie/rabat", each with unique content, local schema markup, and geo-targeted meta tags.

Core Web Vitals Optimization

Performance was critical for both user experience and search rankings. I focused specifically on Cumulative Layout Shift (CLS) — the metric that measures visual stability during page load. By implementing proper image dimension attributes, font-display strategies, and skeleton loading states, we brought CLS scores below 0.1 across all key pages. LCP (Largest Contentful Paint) was optimized to under 2.5 seconds through Next.js image optimization and CDN-level caching.

Indexation Strategy

Getting pages indexed quickly was essential for a new domain. I implemented a dynamic XML sitemap, submitted it through Google Search Console, and used the URL Inspection API to request indexing for priority pages. Within 3 months, over 80% of the platform's pages were indexed in Google Search results — a strong result for a brand-new web property.

My Role

As Lead Web Developer, I owned the web platform end-to-end — from initial architecture decisions through to production deployment and ongoing performance monitoring.

My key contributions included:

• Architecting and building the full Next.js web application from scratch
• Integrating the existing GraphQL API to ensure data consistency with the mobile app
• Designing and implementing the SEO content architecture with the marketing team
• Building responsive booking flows that maintained feature parity with the mobile app
• Optimizing Core Web Vitals (CLS, LCP, FID) for search ranking eligibility
• Setting up Google Search Console monitoring and iterating on indexation strategy

One of the most technically interesting challenges was building the multi-language support. Hany's target audience searches in both French and Darija (Moroccan Arabic), so we needed content in both languages without creating duplicate content issues. I implemented hreflang tags and language-specific URL structures that allowed Google to serve the right version to the right audience.

Impact and Results

Within the first 3 months of launching the web platform, Hany saw measurable improvements across all key metrics:

• Daily Google impressions grew from 30 to 588 — a 1,860% increase in organic visibility
• Over 80% of pages indexed in Google Search within the first quarter — exceptional for a new web property
• Core Web Vitals scores in the green zone across all key pages (CLS < 0.1, LCP < 2.5s)
• Desktop and tablet users gained full access to booking, increasing the addressable audience beyond mobile-only users
• Marketing campaigns could now drive traffic directly to SEO-optimized landing pages with booking capability, closing the previous conversion gap

The web platform effectively opened a new acquisition channel for Hany — one that generates ongoing organic traffic without the per-click costs of paid advertising.

Outcome

This project demonstrated how a well-executed web platform can transform a mobile-first business's growth trajectory. By combining Next.js server-side rendering with a deliberate SEO content strategy, we turned Hany from an app-store-only product into a search-visible platform that captures high-intent users at the moment they're looking for home services.

The project also reinforced a key insight: for service marketplaces in emerging markets, organic search is not just a nice-to-have — it's a critical acquisition channel. Users in Morocco increasingly search Google for local services rather than browsing app stores, and being visible for those queries directly translates to bookings and revenue.