Nooora - Rebuilding a Half-Built Beauty Services Website into a Dynamic Next.js and Strapi Platform

Project Context#

Nooora was not a clean greenfield build. It was a rescue and modernization project.

When I came in, the website was already started, but it had the usual problems that happen when a fast-moving marketing site grows without a clear content model. The homepage and service pages had a mix of static code and CMS content. Some images, service sections, testimonials, blog references, navigation items, and footer data were still fixed inside the frontend. Updating simple content meant touching code, rebuilding, and risking layout regressions.

For a beauty services business in Dubai, that was a serious limitation. The site needed to support many services such as nails, massage, facial, eyelashes, body care, hair, makeup, wedding beauty, gift cards, and promotional offers. It also needed to support changing prices, seasonal offers, service descriptions, client reviews, service-area messaging, and SEO pages without turning every change into a development task.

My job was to take the existing work, stabilize it, improve the structure, and make the website easier for the client to operate.

The Problem#

The project had four main issues:

• Inconsistent Content Sources: Strapi existed, but it was not being used as the complete source of truth. Important page sections were still hard-coded, which made updates slow and created a gap between the CMS and the live website.
• Tangled Code Structure: The project had grown section by section, and the frontend needed clearer separation between pages, reusable sections, common layout elements, Strapi data fetching, service detail screens, shared SEO utilities, and API routes.
• Unrefined User Experience: The website had many visual sections, carousels, menus, service cards, mobile views, loading states, and CTA areas. Small issues on mobile, Safari, mega menus, image sizing, spacing, and sticky actions could directly hurt conversion because most beauty service bookings happen on mobile.
• Weak Technical SEO: Nooora competes in local search around keywords such as home beauty services Dubai, massage at home Dubai, nail spa home service Dubai, manicure and pedicure at home, facial at home, and similar high-intent service searches. That required dynamic metadata, canonical URLs, structured data, sitemap coverage, redirects, clean service URLs, and content that search engines could understand.

My Role#

I worked as the full-stack developer responsible for taking the existing Next.js and Strapi setup from a mixed static/dynamic build into a production-ready service website.

My role covered frontend architecture, Strapi data integration, responsive UI development, SEO implementation, dynamic routing, sitemap logic, payment flow integration, contact and gift card email handling, performance work, bug fixing, and client-requested content updates.

This was not just a "build the page from a design" task. It required reading the existing code, understanding where data was coming from, deciding what belonged in Strapi, protecting live routes, fixing mobile behavior, and keeping the site moving while the client kept refining content and offers.

What I Built and Improved#

Turned Strapi into the Main Content Source#

The biggest structural improvement was moving content out of the frontend and into Strapi wherever it made sense. Homepage sections, service tiles, beauty service tabs, offers, wedding content, about page content, contact page content, common questions, testimonials, featured posts, header data, mega menu data, footer service lists, and service detail content were wired to Strapi.

This gave the client a much better operating model. Instead of asking a developer to change every title, description, image, price, service card, or FAQ, the business could manage a much larger part of the website from the CMS.

Rebuilt Service Page Architecture#

Nooora has a large service catalog, so the website needed more than a few static pages. I implemented dynamic service detail pages, category pages, subcategory pages, breadcrumb data, service navigation, and static parameter generation for service URLs. The structure supports parent categories such as nails, massage, face, body, hair, and eyelashes, while also supporting deeper service detail pages for individual treatments.

This made the site better for both users and SEO. Users can land directly on the service they searched for, and search engines can index pages with focused service intent instead of one generic services page trying to rank for everything.

Improved SEO and Answer-Engine Visibility#

The site includes dynamic SEO fields from Strapi, metadata generation, canonical URL support, Open Graph data, breadcrumb schema, website schema, FAQ schema, product schema, service schema, and local service-focused structured data for key pages.

I also worked on XML sitemap generation so static pages, dynamic service URLs, navigation URLs, service detail URLs, WordPress blog posts, and blog categories could be included. Duplicate URLs and unwanted categories were filtered out, and redirects were added for old or incorrect routes so existing links and search traffic had a cleaner path forward.

Later updates also included AEO-focused content and schema refinements, including homepage FAQ alignment and JSON-LD updates.

Refined UI Across Desktop and Mobile#

A lot of the work was practical frontend polish: fixing responsive layouts, improving image sizing, adjusting headings, making mobile hero titles fit better, fixing mega menu behavior, improving sticky mobile buttons, refining CTA topbar styling, updating icons, adjusting footer layouts, improving service detail page spacing, and handling Safari and iPhone menu issues.

These were not cosmetic changes only. For a home beauty services website, the UI has to make booking feel easy and trustworthy. The user needs to quickly understand the service, see pricing or offers, trust the brand, and reach WhatsApp, phone, or gift card purchase flows without friction.

Connected Gift Card and Payment Flows#

The project includes a gift card experience with Telr order creation, live payment return URLs, payment success/failure/cancelled screens, Strapi gift card record saving, and confirmation emails to the business.

The payment flow uses a server-side API route to create Telr orders, generate cart IDs, pass return data, and handle gateway responses. On successful payment, the site stores gift card details through Strapi and sends the confirmation through email.

Added Contact and Email Handling#

The contact flow sends submitted details to the Nooora team by email, including name, email, phone, message, and location. This gives the business another conversion path beyond WhatsApp and phone calls.

Resolved Performance and Stability Issues#

The git history shows a large performance and stabilization phase: asset optimization, image handling, dynamic imports, loading screens, page-level suspense, LCP work, carousel changes, route fixes, build fixes, no-cache headers, React Server Component security updates, 404 and 500 pages, and multiple deployment-related fixes.

This mattered because the site was not a simple brochure. It had CMS requests, media-heavy sections, videos, sliders, animations, service pages, dynamic routes, and third-party integrations. My work was to keep the experience visually rich without letting the implementation become fragile.

Handled Ongoing Client Content and Review Changes#

After the core migration and structure were in place, a lot of work involved client-requested refinements: content updates for facial and massage pages, footer notes, header text updates, booking offer changes, service route redirects, policy page fixes, UI feedback from Asana, sitemap corrections, mobile read-more behavior, sticky button changes, and SEO copy/schema updates.

This is an important part of the story because production websites rarely finish at "first build complete." The value was in being able to keep shipping changes without breaking the system, while gradually making the structure cleaner and more CMS-driven.

Key Features Delivered#

• Dynamic homepage sections managed through Strapi
• Dynamic services index page
• Dynamic category and subcategory service pages
• Dynamic individual service detail pages
• CMS-driven header, footer, mega menu, testimonials, featured posts, FAQs, service cards, offers, and page content
• Responsive mobile navigation and mega menu
• SEO metadata pulled from Strapi
• Canonical URLs and Open Graph metadata
• JSON-LD structured data for website, FAQ, product, service, and breadcrumbs
• Dynamic XML sitemap for static pages, CMS service pages, navigation URLs, and WordPress blog URLs
• Redirect handling for renamed or legacy routes
• Noindex handling for selected low-value pages
• Gift card page and Telr payment integration
• Payment success, failed, and cancelled states
• Gift card record saving in Strapi after payment
• Gift card and contact email notifications
• WhatsApp booking links and booking CTAs
• Loading states, skeletons, and Lottie-based UI feedback
• 404 and 500 error pages
• Performance, image, responsive, and accessibility fixes

SEO & Answer Engine Optimization#

Nooora's website needed to rank for location and service-intent keywords, not just look good. Technical SEO was approached from multiple angles:

• Dynamic Page Metadata: Connected to Strapi so titles, descriptions, canonical URLs, Open Graph values, robots settings, categories, language fields, and preview images could be managed per page.
• Structured Data Markup: Added for search engines and answer engines, including FAQPage schema, BreadcrumbList schema, WebSite schema, Product schema, and Service schema for important home beauty service pages.
• Automated XML Sitemaps: Made dynamic so new service pages, service detail pages, navigation URLs, blog posts, and blog categories had a path into the XML sitemap without manually editing a static file.
• Redirect Mapping: Added for changed service URLs, old blog category capitalization, incorrect service paths, legacy account/login URLs, and renamed service pages. This helped protect existing links and reduce broken search paths.
• High-Intent Landing Pages: Content updates were made around high-intent service pages such as massage, facial, nail spa, nail polish, manicure and pedicure, makeup, and related Dubai home service terms.

Why This Project Mattered#

This project was valuable because it solved the real problem behind the code: the client needed a website they could keep growing.

A half-static marketing site can work for a small launch, but it becomes a problem when the business has many services, changing offers, seasonal campaigns, local SEO pages, client reviews, blog content, and conversion flows. Every hard-coded section adds friction.

By moving the site toward Strapi, cleaning up the frontend, improving service routing, and strengthening SEO, I helped turn Nooora into a more flexible digital platform for a real service business.

The website became easier to update, easier to expand, easier to index, and easier for customers to use on mobile.

The Result#

The final product is a modern Next.js website for Nooora Beauty Concierge with a Strapi-powered content structure, dynamic service pages, improved responsive UI, technical SEO foundations, payment support for gift cards, contact email flows, and production-level route handling.

• Client Win (Control): The business could update more content from the CMS instead of relying on code changes for every small update.
• User Win (Clarity): The site presents services, offers, booking options, reviews, FAQs, and trust signals in a cleaner mobile-friendly experience.
• SEO Win (Structure): Service-specific pages, metadata, schema, sitemap generation, and redirects gave the website a better foundation for competing in Dubai beauty service search results.

What This Says About My Work#

This project is a good example of the kind of full-stack work I do best: taking an existing product that is messy, incomplete, or hard to maintain, then turning it into something stable, structured, and useful for the business.

I did not just add components. I looked at the content model, the CMS, the frontend structure, the SEO needs, the mobile experience, the payment flow, and the client's day-to-day update process.

That is the difference between building screens and building a working business website.

If a project needs a developer who can inherit existing code, understand the real product flow, clean up the structure, connect the backend and CMS properly, and keep shipping while requirements keep changing, this Nooora project is a strong example of that work.

Portfolio Summary#

Nooora Beauty Concierge is a Dubai home beauty services brand offering salon-style treatments at home, in hotels, and at offices. I joined the project after the website had already been partially built, but the structure was inconsistent: some data came from Strapi, some content was hard-coded, and routine updates still required code changes.

I rebuilt the project into a cleaner Next.js and Strapi-powered website. My work included restructuring the frontend, moving major content areas into Strapi, building dynamic service pages, improving the responsive UI, implementing SEO metadata and structured data, generating dynamic sitemaps, adding redirects, integrating Telr payments for gift cards, and wiring contact and confirmation emails.

The project grew into a production-ready service platform with CMS-managed homepage sections, service pages, testimonials, featured posts, FAQs, header and footer content, booking CTAs, and gift card flows. I also handled a long cycle of client feedback, content changes, mobile fixes, sitemap fixes, and SEO/AEO updates.

The result was a faster-to-manage, more search-friendly, and more conversion-focused website for a business that depends on local SEO, mobile bookings, and frequent service updates.