Verified evidence01
Public production website
The responsive enterprise website is available through its production domain
Source · https://hawsabah.sa/
Vue 3QuasarResponsive design
Project archive
Project case study · Frontend
Hawsabah Enterprise Web Platform
Component-driven enterprise website and custom CMS interface for publishing service content through REST APIs with consistent responsive presentation.
Vue 3QuasarTypeScriptPiniaREST APIsCustom CMSResponsive Design
2026
Read this case as a
Choose your lens
Outcome-focused delivery
Delivered the public enterprise website and connected publishing experience using reusable components, responsive layouts, and structured API content.
Evidence mode · on
Claims come with context
Each outcome shows its source, related capability, and confidence level. Missing operational data stays visibly unavailable.
Supporting context02
Custom publishing workflow
A purpose-built CMS supplies structured content to the public website
Source · Approved administration screenshots
CMSREST APIs
Supporting context03
Reusable interface system
Shared components preserve layout and visual consistency across dynamic pages
Source · Public website and component implementation
Design systemsTypeScript
Skill → proof
Where each capability shows up
Vue 3Public production website
QuasarPublic production website
Responsive designPublic production website
CMSCustom publishing workflow
REST APIsCustom publishing workflow
Design systemsReusable interface system
TypeScriptReusable interface system
01 / Problem
A fragmented workflow slowed the whole system.
Hawsabah needed a maintainable enterprise website and a tailored publishing workflow without depending on a rigid third-party site builder. Content updates also needed to preserve responsive behavior and visual consistency across public pages.
02 / Solution
One product model, expressed clearly at every layer.
I created a component-driven Vue and Quasar website connected to structured content APIs, together with a custom administration interface for managing published information. Reusable layout and content components preserve consistency as content changes.
Architecture replay
Walk through the system
Select a layer to inspect its responsibility.
Active layer 1
Vue 3 and Quasar public website
Vue 3 and Quasar public website owns the user-facing workflow and consumes a stable contract.
Responsibility stays explicit at this boundary.
Decision log
Constrain content through structured components
- Context
- Completely flexible CMS content could break responsive layouts and brand consistency
- Decision
- Defined reusable content sections and explicit field models
- Trade-off
- Reduced arbitrary layout freedom but improved reliability
Decision log
Build a custom publishing workflow
- Context
- Generic site builders did not match the required content and interface behavior
- Decision
- Connected a tailored administration interface to structured REST APIs
- Trade-off
- Increased initial development but created product-specific control
03 / Challenges overcome
Complexity moved behind durable boundaries.
Dynamic content had to support different page structures without allowing arbitrary updates to break the design system. The implementation also needed to balance reusable components, editorial flexibility, responsive presentation, and page performance.
Next step
Want to discuss a similar system?
Share the context and we’ll find a useful first move.