Back to Archive
Case StudyYusr Advanced BusinessWeb Frontend

Yusr Advanced Business — Full-Stack Corporate, CMS & Commerce Platform

A modern multilingual business frontend for Yusr that brings a corporate experience, a dynamic CMS, business-sector pages, an online store and strong SEO together in one platform.

Role
Lead Engineer
Timeline
Production
Industry
Web Frontend
Status
Shipped
yusr-business-frontend
Yusr Advanced Business — Full-Stack Corporate, CMS & Commerce Platform
01Overview

What this system is

A complete multilingual business platform that combines the corporate site, content management, the online store, customer accounts, business sectors and the blog in one experience built on Next.js and Laravel, with strong SEO and production-grade performance. Every section the visitor reads — sectors, services, financing, the blog, the store — is a record in the CMS rather than a hardcoded page, so the site changes without a deploy.

02The Problem

What we needed to solve

The public site and the content behind it were two separate concerns: marketing pages were authored in code while products, sectors and articles lived elsewhere, so a content change meant a release and a new language meant rebuilding pages.

03The Solution

How we shipped it

A Next.js frontend that reads every block — hero, sectors, services, financing, blog, catalogue — from the platform REST API, rendered server-side for SEO, with Arabic, English and French content and RTL/LTR handled across the whole surface.

04Architecture

How the system is wired

A modular architecture separating presentation, application, and data layers with REST contracts between the frontend and backend. Designed for clean scaling, observability, and predictable deployments.

Data flow
01
Presentation

Server-rendered + responsive client UI with reusable components and animation primitives.

02
Application

Business logic in service classes, validated input, role-aware authorisation, and queueable side-effects.

03
Data

Relational schema with indexed lookups, soft deletes, and migration-backed evolution.

04
Integration

REST APIs, webhooks, and third-party SDKs surfaced through thin adapters.

05Tech Stack

Engineering choices

Frontend
Next.jsReactTypeScriptTailwind CSS
Backend
LaravelREST API
06Gallery

In the wild

Yusr Advanced Business — Full-Stack Corporate, CMS & Commerce Platform
11Challenges Solved

Hard problems, handled

Impact
Challenge 01

The public site and the content behind it were two separate concerns: marketing pages were authored in code while products, sectors and articles lived elsewhere, so a content change meant a release and a new language meant rebuilding pages.

Resolution

A Next.js frontend that reads every block — hero, sectors, services, financing, blog, catalogue — from the platform REST API, rendered server-side for SEO, with Arabic, English and French content and RTL/LTR handled across the whole surface.

Impact
Challenge 02

Maintaining performance under realistic production load.

Resolution

Indexed queries, paginated lists, image optimisation, and lean client bundles kept the platform responsive end-to-end.

12Performance

Built to stay fast

Optimised images and lazy-loaded routes for fast first paint.
Cached read-heavy endpoints and indexed all hot lookup paths.
Pruned unused dependencies and tree-shook client bundles.
Graceful loading states across every async surface.
13UI / UX

Design and interaction

Consistent design tokens — spacing, type scale, radii, motion curves.
Tuned for both desktop precision and mobile thumb reach.
Empty states, error states, and skeletons across every screen.
Reduced-motion fallbacks and accessible colour contrast.
14Production Readiness

Ready to ship and operate

Environment-scoped configuration with no secrets in source.
Migrations + seeders that recreate the full state from zero.
Error boundaries and logging on critical paths.
Reproducible builds, ready for CI deployment.
15System Features

What it does

Multilingual corporate frontend (Arabic, English, French)
RTL and LTR layouts across every page
CMS-driven sections with no hardcoded content
Business sector and service pages
Online store with catalogue and product pages
Customer account area
16Technical Decisions

Why we chose what we chose

Decision 01

Built on Next.js, React, TypeScript.

Mature ecosystem, strong typing where applicable, and predictable performance characteristics for the workload.

Decision 02

REST-first integration boundary.

Keeps clients (web, mobile, partner) decoupled and trivially swappable without coupling to a single transport.

17Outcome

Results

Production
Status
9+ features
Surface area
7 technologies
Stack depth
Continue exploring

Other case studies

Building something similar?

Let's scope your platform — dashboard, mobile apps, APIs, the full stack.

WhatsApp