AlMuraba CMS: Admin Panel
The admin panel of AL Muraba’s headless CMS. Admins design their own content types, and editors publish in Arabic, Kurdish and English.
Blurred on purpose: client work under NDA
Slide 1 of 9
Frontend developer · v2 redesign
AlMuraba CMS is AL Muraba’s own headless content management system, and this is its admin panel: an Arabic, right-to-left Vue 2 app. Admins define content types in a visual builder, and each type gets its own list, editor, statuses and permissions, while editors publish in Arabic, Kurdish and English. I led its v2 redesign and refactor and built its nested-content feature.
- Content types built in the UI, each with its own list, editor and permissions
- One entry in Arabic, Kurdish and English, with the type’s fields as a form
- Statuses, scheduled publishing, featured and pinned flags, and a field-level audit trail
- Nested content in a table that loads children when a row opens
- A media library with crop, alt text, search, replace and download
- Site menus as drag-and-drop trees in three languages
- Vue 2.7
- Vuetify 2
- Vuex
- Vue Router
- Vue CLI
- webpack 4
- Sass
- Axios
- Vuelidate
- CKEditor 5
- he-tree-vue
- vue-advanced-cropper
How I built it
- Schema-driven forms: one JSON schema drives both the builder and the per-language entry form
- ABP policies merged with per-content-type permissions, checked in routes, menus and buttons
- A recursive Vuetify data table that lazy-loads child rows by parentId
- A shared CRUD dialog with three save modes, built on reusable mixins
- Arabic, right-to-left UI on Vuetify 2 with light and dark themes
- A custom CKEditor 5 build inside dialogs, with an insert-from-library button