Project Overview
Super Speed Security is a custom full-stack web application developed for a security and cash-in-transit services company.
I designed and developed the entire application from scratch using native PHP, MySQL, PDO, and vanilla JavaScript, following a lightweight MVC-inspired / Front Controller architecture.
A major part of the project is a custom visual content management system built directly into the website.
Instead of requiring administrators to open a traditional CMS dashboard, authorized users can browse the website normally and simply right-click on editable content.
Depending on the selected element, the CMS allows them to:
Edit text directly
Replace images
Replace videos
Update bilingual English and Arabic content
Manage visual assets without modifying source code
See their changes directly within the page they are editing
This creates a WYSIWYG-style editing experience where the website itself becomes the content-management interface.
The application also contains a dedicated admin and editor management system. Administrators can create additional users and give other team members access to edit website content without sharing a single administrator account.
The system combines database-driven content, multilingual support, secure authentication, media management, responsive design, RTL support, and asynchronous JavaScript communication with the PHP backend.
The result is not simply a corporate website, but a lightweight custom CMS platform tailored specifically to the client's workflow.
I designed and developed the entire application from scratch using native PHP, MySQL, PDO, and vanilla JavaScript, following a lightweight MVC-inspired / Front Controller architecture.
A major part of the project is a custom visual content management system built directly into the website.
Instead of requiring administrators to open a traditional CMS dashboard, authorized users can browse the website normally and simply right-click on editable content.
Depending on the selected element, the CMS allows them to:
Edit text directly
Replace images
Replace videos
Update bilingual English and Arabic content
Manage visual assets without modifying source code
See their changes directly within the page they are editing
This creates a WYSIWYG-style editing experience where the website itself becomes the content-management interface.
The application also contains a dedicated admin and editor management system. Administrators can create additional users and give other team members access to edit website content without sharing a single administrator account.
The system combines database-driven content, multilingual support, secure authentication, media management, responsive design, RTL support, and asynchronous JavaScript communication with the PHP backend.
The result is not simply a corporate website, but a lightweight custom CMS platform tailored specifically to the client's workflow.
Business Problem
Super Speed needed more than a traditional static corporate website.
The company required a professional digital presence capable of presenting security, VIP protection, facility protection, event security, cash-in-transit, secure transportation, vault storage, and related services to both Arabic- and English-speaking customers.
The website also needed to remain maintainable after delivery.
The company needed the ability to change marketing copy, images, videos, client logos, and other content without modifying source code or contacting a developer for every update.
Another important constraint was deploying the application to the client's existing hosting infrastructure without introducing unnecessary framework complexity or server requirements.
The company required a professional digital presence capable of presenting security, VIP protection, facility protection, event security, cash-in-transit, secure transportation, vault storage, and related services to both Arabic- and English-speaking customers.
The website also needed to remain maintainable after delivery.
The company needed the ability to change marketing copy, images, videos, client logos, and other content without modifying source code or contacting a developer for every update.
Another important constraint was deploying the application to the client's existing hosting infrastructure without introducing unnecessary framework complexity or server requirements.
Proposed Solution
I developed a custom CMS rather than integrating WordPress or another third-party content-management platform.
The central idea was to remove the separation between the website and its administration interface.
When an authenticated editor visits the website, editable elements become manageable directly within their normal page context.
A right-click interaction identifies the selected CMS element and opens the appropriate editing controls.
For example:
Text
Right-clicking editable text allows the editor to change its content.
Images
Right-clicking an editable image allows it to be replaced with another image.
Videos
Editable video content can similarly be replaced without touching the underlying source code.
JavaScript handles the interactive editing experience and communicates with PHP endpoints asynchronously. PHP validates the request, processes the content or uploaded media, and persists the changes in MySQL or managed storage.
Because the content is database-driven, the same CMS architecture also supports both English and Arabic.
A separate administration system manages authorized users, allowing administrators to add additional editors who can maintain the website.
This gives the client control of their website while keeping the underlying application lightweight and custom-built.
The central idea was to remove the separation between the website and its administration interface.
When an authenticated editor visits the website, editable elements become manageable directly within their normal page context.
A right-click interaction identifies the selected CMS element and opens the appropriate editing controls.
For example:
Text
Right-clicking editable text allows the editor to change its content.
Images
Right-clicking an editable image allows it to be replaced with another image.
Videos
Editable video content can similarly be replaced without touching the underlying source code.
JavaScript handles the interactive editing experience and communicates with PHP endpoints asynchronously. PHP validates the request, processes the content or uploaded media, and persists the changes in MySQL or managed storage.
Because the content is database-driven, the same CMS architecture also supports both English and Arabic.
A separate administration system manages authorized users, allowing administrators to add additional editors who can maintain the website.
This gives the client control of their website while keeping the underlying application lightweight and custom-built.
System Architecture
Public / Presentation Layer
PHP views render the normal bilingual website.
CMS Interaction Layer
Vanilla JavaScript detects editable elements and handles:
Right-click/context-menu events
Element identification
Text editing
Image replacement
Video replacement
Fetch API requests
Updating the rendered page after successful changes
PHP Application Layer
PHP endpoints receive CMS requests and perform:
Authentication checks
Request validation
Content updates
File processing
Database operations
Media replacement
Data Layer
MySQL stores database-driven content and application information using PDO.
Media Layer
Uploaded images and videos are validated, stored and associated with the correct content entries.
Administration Layer
Authenticated administration functionality manages users who are permitted to access the CMS and edit website content.
PHP views render the normal bilingual website.
CMS Interaction Layer
Vanilla JavaScript detects editable elements and handles:
Right-click/context-menu events
Element identification
Text editing
Image replacement
Video replacement
Fetch API requests
Updating the rendered page after successful changes
PHP Application Layer
PHP endpoints receive CMS requests and perform:
Authentication checks
Request validation
Content updates
File processing
Database operations
Media replacement
Data Layer
MySQL stores database-driven content and application information using PDO.
Media Layer
Uploaded images and videos are validated, stored and associated with the correct content entries.
Administration Layer
Authenticated administration functionality manages users who are permitted to access the CMS and edit website content.
Technical Challenges
Building context-aware editing
One of the main technical challenges was connecting visual elements rendered on the frontend to their corresponding stored content.
The CMS needed to identify exactly which text, image, or video the administrator selected and map that element to the correct stored content.
JavaScript handles the context-menu interaction and identifies the editable element, while the PHP backend processes and persists the requested change.
Supporting different content types
Text updates and media replacements require different workflows.
The CMS therefore needed to distinguish between content types and provide the correct editing experience and backend processing for each one.
Maintaining the editing experience across languages
Because the website supports both English and Arabic, the CMS also had to associate edits with the correct language version while preserving the same page architecture.
Designing editing for non-technical users
The biggest UX goal was removing the need for administrators to understand a CMS hierarchy.
Instead of:
Dashboard → Pages → Find Page → Find Section → Find Field → Edit
the workflow becomes:
Open Page → Find Content → Right Click → Edit
One of the main technical challenges was connecting visual elements rendered on the frontend to their corresponding stored content.
The CMS needed to identify exactly which text, image, or video the administrator selected and map that element to the correct stored content.
JavaScript handles the context-menu interaction and identifies the editable element, while the PHP backend processes and persists the requested change.
Supporting different content types
Text updates and media replacements require different workflows.
The CMS therefore needed to distinguish between content types and provide the correct editing experience and backend processing for each one.
Maintaining the editing experience across languages
Because the website supports both English and Arabic, the CMS also had to associate edits with the correct language version while preserving the same page architecture.
Designing editing for non-technical users
The biggest UX goal was removing the need for administrators to understand a CMS hierarchy.
Instead of:
Dashboard → Pages → Find Page → Find Section → Find Field → Edit
the workflow becomes:
Open Page → Find Content → Right Click → Edit
Lessons Learned
This project reinforced the importance of selecting architecture based on the actual problem rather than automatically choosing the largest available framework.
A structured native PHP application can remain clean and maintainable when responsibilities such as persistence, content retrieval, media storage, routing, and presentation are intentionally separated.
I also gained deeper experience designing editable multilingual applications where content should be treated as structured application data rather than static text embedded inside templates.
Building the inline CMS highlighted the value of designing administration tools around the user's workflow. Allowing a client to edit the actual page they are viewing can provide a significantly simpler experience than requiring them to understand a traditional CMS dashboard.
The project also strengthened my experience with secure file handling, authentication, PDO, asynchronous JavaScript communication, RTL interfaces, environment-aware development, and deploying custom PHP applications to traditional hosting infrastructure.
A structured native PHP application can remain clean and maintainable when responsibilities such as persistence, content retrieval, media storage, routing, and presentation are intentionally separated.
I also gained deeper experience designing editable multilingual applications where content should be treated as structured application data rather than static text embedded inside templates.
Building the inline CMS highlighted the value of designing administration tools around the user's workflow. Allowing a client to edit the actual page they are viewing can provide a significantly simpler experience than requiring them to understand a traditional CMS dashboard.
The project also strengthened my experience with secure file handling, authentication, PDO, asynchronous JavaScript communication, RTL interfaces, environment-aware development, and deploying custom PHP applications to traditional hosting infrastructure.
Project Gallery
