# DDPro website review, technology and learning guide

Updated 11 October 2026: Oil & Gas is the primary sector; buildings, villas, architecture and MEP are secondary. The revised layout follows the image-led presentation requested with Optimal as a reference, using DDPro content. The page now includes six project summaries and a separate seven-image gallery. This is a reviewable design preview, not a completed operational client portal.

## What the review found
The current home page combines 25 slideshow subjects, a UAE activity list, registration information and several lengthy paragraphs repeating the same introduction. Its strongest differentiator is the specific engineering and subcontract project experience in the 19-page company profile. The redesign puts that evidence beside concise services and a clear inquiry path. The old contactonline.php page could not be retrieved by the review tools, so its fields and behaviour have not been verified. No claim is made that every hidden page has been audited.

The profile has useful technical detail but repeats broad claims such as exceeding standards without explaining deliverables or acceptance criteria. The as-built chapter spends substantial space defining terms. The rewrite focuses on what DDPro provides, how reviews work and what the client receives. It retains all eleven original numbered sections and all eleven project references. Images are taken from the supplied profile; confirm publication rights. They are labelled as capability illustrations rather than photography of named projects.

Owner clarification, 11 October 2026: UAE registration is at SPC Sharjah Free Zone using shared facilities, with no dedicated UAE office or business activities in the UAE. All activities are conducted from Multan or Lahore, with personnel sometimes deputed overseas from these locations. The Dubai property is privately owned and is not a company operating address; omit its address from public company content. This location distinction is now reflected in the redesign and rewritten profile. The Maps screenshot uses a different business name from the domain; align public business naming after confirmation. The screenshot's rating and reviews are not reproduced as independently verified testimonials.

## Recommended production technology
For the requested custom portal and eventual mobile apps, my recommendation is Next.js with TypeScript for the public website and API, PostgreSQL for records, and Payload CMS for an editor-friendly admin interface. Use tested authentication with verified email and server-side authorization; do not implement accounts through browser storage. Use a maintained internationalization library with /en and /ar routes and separate reviewed content. Support RTL layout for Arabic.

This first preview deliberately uses plain HTML, CSS and JavaScript. You can learn and review the content without a framework installation. It can be served on shared hosting or a VPS. It is a design starting point, not an already implemented Next.js application. A full production system is a separate implementation stage.

If easy self-management and minimum development effort become the main priority, WordPress is a reasonable alternative for the brochure site. The custom client portal and native apps make a shared API and structured database more attractive for the full brief.

Next.js self-hosting guidance: https://nextjs.org/docs/app/guides/self-hosting
Payload deployment documentation: https://payloadcms.com/docs/production/deployment

## Hosting recommendation
Keep the existing domain and email service at Namecheap while reviewing the redesign. The static preview can run on shared hosting. Full Next.js server behaviour needs a compatible Node runtime or separate application hosting; do not assume the current shared plan supports it.

The supplied Contabo specification (6 vCPU, 12 GB RAM, 200 GB NVMe, 300 Mbit/s) is a plausible starting point for a modest-traffic site, database and chat service, subject to load tests and actual CPU performance. The plan availability and performance have not been verified. A VPS adds responsibility for updates, security, monitoring and recovery; it is not automatically faster or safer than managed hosting.

Proposed deployment: HTTPS reverse proxy (Nginx or Caddy), application container, PostgreSQL on a private network, and separate media storage where practical. Keep database ports private. Maintain off-server encrypted database/media backups and test restoration. The two snapshots supplied with the plan do not replace application-consistent backups. Use external transactional email delivery and preserve existing MX/SPF/DKIM records when changing website DNS. Serve videos through the approved social/video providers rather than filling the VPS disk with video files.

Migration sequence: inventory URLs and email settings; back up the old site; build on staging; verify forms, translations, permissions, mobile layouts and recovery; map old URLs to 301 redirects; switch only web DNS; monitor errors; retain the prior site and rollback instructions.

## Your requirements and current status
| Requirement | In this preview | Production work remaining |
|---|---|---|
| Existing headings and services | All 25 visible slideshow topics mapped below; licensed activities and original profile chapters retained in rewrite | Inspect inaccessible contact page and any other unlisted legacy URLs before declaring complete migration |
| Rewritten text and layout | New responsive home page, service copy, project summaries and complete profile draft | Owner fact check; full individual service pages and final visual profile PDF |
| Free WhatsApp messaging | Click-to-chat and validated form prepare a message for the visitor to send | Confirm active number; no paid WhatsApp API is connected |
| Text chat; voice/video | WhatsApp and email inquiry routes; meeting-request guidance | Configure live web chat and agent availability; agree a meeting provider |
| Inquiries, contacts, email registration | Inquiry categories and draft message handoff | Database-backed forms, delivery logs, spam prevention, separate newsletter consent and double opt-in |
| English and Arabic | Website text, cards, forms, gallery captions and RTL layout; separate editable Arabic fields | Human review of Arabic copy, translated downloads and multilingual SEO routes before launch |
| Help, comments, admin guides | FAQ, Feedback inquiry category and this guide | Moderated public comments, staff roles and a real admin dashboard |
| Project picture/video gallery | Filterable selected-experience gallery | CMS upload/edit/publish workflow and approved YouTube/Facebook/TikTok links; no channel URLs were supplied |
| Registration and follow-up | Clearly labelled client access request | Verified accounts, secure file access, inquiry tracking, ownership, reminders and audit trail |
| Utility downloads | Resource section with honest availability message | Actual DDPro installers, release versions, checksums, system requirements and malware scanning |
| Android APK and iPhone | Responsive website, manifest, initial service worker | Device testing, production PWA icons, native builds/signing and app distribution |

## Coverage of the visible old website
| Old slideshow subject | Redesigned destination |
|---|---|
| Office building 3D modelling | Architecture & interiors |
| Power generation 3D modelling | Detailed design; power sector |
| Oil & gas 3D modelling | Detailed design; energy projects |
| Reception interior | Architecture & interiors |
| House front elevation | Architecture & interiors |
| Lobby interior | Architecture & interiors |
| Instrumentation & controls | Detailed design & drafting |
| Oil & gas 3D layout | Detailed design & drafting |
| Stairs interior | Architecture & interiors |
| Solar panels & control layout | Detailed design; solar capability in profile |
| Building 3D front elevation | Architecture & interiors |
| Pumps & compressors layout | Mechanical and piping services |
| Vessel design drafting | Mechanical and piping services |
| Pumps & vessels layout | Mechanical and piping services |
| P&ID drawings | Detailed design & drafting |
| Solar panels installation | Construction support; solar capability in profile |
| Factory design & construction | Industrial projects; construction support |
| 3D P&IDs | Detailed design & drafting |
| 3D design drafting | Detailed design & drafting |
| Pipe works | Mechanical and piping; construction support |
| 3D vessels layout | Mechanical and piping services |
| Interior design | Architecture & interiors |
| Building front elevation | Architecture & interiors |
| Electrical panels installation | Construction support; electrical services |
| Oil & gas, electrical, controls and other works | Detailed design; construction and project support |

The UAE licence activity list is retained in profile chapters 12-13, including engineering consultancy, project management, IT, HR/skilled manpower and e-commerce. Online contact, meetings, help and training are represented by Contact, Help and Simulation & training.

## Chat and meetings
Start with free WhatsApp click-to-chat. This is a link into WhatsApp, not an API automation or a shared support inbox. Visitors review and send their messages themselves. Standard internet/data costs can apply.

For embedded text chat, consider self-hosted Chatwoot Community Edition with named staff accounts, working hours and offline contact handling. Its software licence is free but hosting and maintenance are not. Community Edition does not include native voice calls; arrange voice/video consultations via a separately configured meeting service initially. Avoid promising an unattended widget is a human conversation. Official references: https://faq.whatsapp.com/5913398998672934 and https://www.chatwoot.com/pricing/self-hosted-plans

## Android and iPhone plan
1. Responsive website first: one content source, one backend, both phone browsers.
2. Production PWA: app icons (192/512 PNG and Apple touch icon), HTTPS, installation instructions, offline fallback and update strategy. Do not cache private project documents or authentication responses. This preview caches only the public shell; installation and offline behaviour have not been device-tested.
3. Native client app after portal completion: consider Capacitor to reuse web UI and the same authenticated API. Android requires Android Studio/SDK, signing keys and a signed APK for direct distribution; Play distribution typically uses an app bundle. iOS requires an iOS build/signing workflow with Xcode/macOS or suitable hosted build infrastructure, provisioning and Apple distribution.
4. Give the apps useful client functions: inquiry status, project notifications, document upload and meeting access. App-store acceptance of a basic website wrapper is not guaranteed. Test uploads, camera permissions, expired sessions, poor connectivity, push notifications and account deletion on real devices.

No APK, IPA, app-store submission or signed native build has been created in this stage. Apple currently lists its Developer Program at US$99 per membership year (or local currency where available); organizational enrollment requires a legal entity and D-U-N-S details. Confirm current regional terms before enrollment: https://developer.apple.com/support/compare-memberships/ . Capacitor documentation: https://capacitorjs.com/docs

## Proposed data structure and staff workflow
Collections: Services, Projects, Media, DownloadReleases, FAQs, Translations, Clients, Inquiries, InquiryActivities, Comments, NewsletterSubscriptions and Staff. Projects store category, location, contractual role, scope, approved images, external video URLs and publication status. Downloads store version, release date, supported systems, file size, SHA-256 and support instructions.

An inquiry should store a unique reference, client identity, consent, topic, status, assigned staff member, next-action date and activity history. Suggested statuses: New, Clarification needed, Quoted, In progress, Closed. Clients see only their own inquiries and files. Staff authorization is checked on every server request. No public registration may grant admin rights.

Nooe E Shar can receive new-inquiry alerts, assign the next action, record a follow-up date and close the request when complete. Moderate comments before publication and never turn submitted feedback into a testimonial without permission. Keep newsletter opt-in separate from consent to answer an inquiry.

## Learn the preview, step by step
**Lesson 1 - HTML:** Open index.html. A section contains a meaningful heading and content. The navigation uses links such as #services to jump to matching IDs. Change a paragraph, refresh the browser and observe the result.

**Lesson 2 - CSS:** Open style.css. The :root variables hold the palette. Grid controls the main layouts. The @media rules switch to a phone-friendly single column. Try changing --lime and inspect both desktop and mobile widths.

**Lesson 3 - JavaScript:** Open app.js. The services and projects arrays hold repeatable content. renderProjects builds the filtered gallery. The form validates browser fields and prepares a URL-encoded WhatsApp message. Nothing is stored on a server.

**Lesson 4 - Backend:** A real form submits to an HTTPS API. The API validates, rate-limits, stores the inquiry and sends an email. The browser receives a reference only after success. A database provides durable shared records; localStorage is not a secure client portal.

**Lesson 5 - Admin:** A CMS lets authorized staff edit content without touching source code. Draft -> review -> publish is the appropriate workflow for case studies, translations and downloads. Export and back up both the database and uploaded files.

**Lesson 6 - Deployment:** The dist folder is the complete static preview. Serve it with a local HTTP server; opening files directly does not test service workers. For production, deploy a versioned build, verify HTTPS and contact delivery, and record a rollback version.

## Preview editing and operation
From the redesign directory run `python -m http.server 4173 --directory dist --bind 127.0.0.1`, then visit http://127.0.0.1:4173 . The bundled Python executable can be used if Python is not in PATH. No npm packages are required. Stop with Ctrl+C.

Edit service/project arrays in app.js, page text in index.html and styles in style.css. Replace the WhatsApp number in both index.html and app.js together. Bump the service worker cache name when changing offline files. Key heading translations live in app.js; this is not yet a full localization system. The typeface is currently fetched from Google Fonts; self-host licensed font files before final production if desired.

## Information to collect for the next stage
Confirm legal entity names, current addresses, public phone/WhatsApp, management spelling, permission to show project/client names and media, logo source, dates and outcomes for case studies, official social links, utility installers and support policy, preferred mail delivery account, staff roles and app distribution goals. No hosting passwords or signing keys belong in public source files or chat messages.

## Launch acceptance criteria
All copy and full translations approved; contact delivery and newsletter verification tested; role isolation proven with two distinct client accounts; file download authorization tested; uploads checked and size-limited; comment moderation working; backups restored in a test environment; redirect inventory complete; mobile keyboard and RTL layouts checked; real Android/iPhone installation tested; no dead buttons or invented testimonials; monitor and rollback owners assigned.




## Current laptop editor

Open `/admin` and sign in with username **admin** and your own password. Every text has English row 1 and Arabic row 2. Public visitors see only their chosen language, with English as the default for new visitors.

Header pictures supports adding slides and setting slide change time (1–120 seconds, default 5). Gallery has separate Project Pictures and Videos; add HTTPS video links and both title rows, set Visible and save. Links open on the original social platform.

Client / Visitor Comments lists pending and approved submissions. Save & approve publishes; Save pending unpublishes; Delete comment removes. Comments stay private until approval.

The free translation shortcut is [Google Translate, English to Arabic](https://translate.google.com/?sl=en&tl=ar&op=translate). Review technical terms before pasting into the Arabic row.

Back up `.local/editor`, including comments.json and uploaded media. This is the local laptop implementation; external launch still needs deployment configuration.

## Inquiry documents and CVs

In **Inquiry upload settings**, set **Maximum total inquiry upload (MB)** from 1–500, then **Save changes**. The default is 250 MB, shared across up to five files. Customers see this limit on the inquiry form. Supported formats: PDF, DOCX, XLSX, TXT, JPG, PNG, ZIP and RAR. Uploads stream to disk rather than loading whole documents into server memory.

Customers upload first, then select **Open WhatsApp draft** and send the message themselves. The draft contains their email, document names and inquiry reference. It does not send documents or expose download links through WhatsApp.

The footer **Apply for Job** link opens a private application form. Applicants can upload one PDF or DOCX CV, with a fixed **10 MB** limit, independent of the inquiry limit. Job applications appear in **Inquiry documents**, labelled **Job application**.

Private folders on this laptop are `.local/editor/ProjectsDocs` and `.local/editor/AppliedCVs`. Neither is inside `public`. Admin downloads are authenticated attachments, marked with email and date/time in GST (UTC+4). Never publish these folders or make an IIS static-file alias to them. Optional `DDPRO_PROJECT_DOCS_DIR` is an absolute private path for inquiry documents; include it in backups if configured.

In **Inquiry documents**, search by email or reference, download files and update follow-up status. **Delete from server** permanently removes the selected file after confirmation and frees its disk space; the small inquiry record remains. A combined 5 GB storage safeguard prevents unchecked accumulation. Files are customer supplied and are not virus-scanned by this app. Archives are never extracted on the server.

Before hosting deployment, verify the host accepts the chosen request sizes and upload durations, preserve private directory permissions and backups, and configure production authentication and HTTPS. The laptop upload tests do not establish Namecheap’s account-specific upload limits.

## Client Downloads

The footer **Client Downloads** page lets clients enter the supplied link and password. In Admin, choose **Client Downloads** to create a delivery, then choose either **Upload to ClientDownloads** or **OneDrive / Google Drive sharing link**. Enter a title, optional recipient email/WhatsApp number, a password of at least 12 characters and a future expiry date (within one year).

Hosted files support the same PDF, DOCX, XLSX, TXT, JPG, PNG, ZIP and RAR formats. They are private under `.local/editor/ClientDownloads`. **Client download settings** controls their maximum size from 1–500 MB, default 500 MB. This setting is a file-size allowance, not a total bandwidth quota. A separate 5 GB hosted-delivery storage safeguard applies. Back up this private folder too.

After creating a delivery, Admin receives a prepared message with its link, password and expiry in GST. **Prepare WhatsApp message** and **Prepare email message** open drafts for you to review and send. No message is automatically sent, and there is no SMTP integration yet. Laptop links only work locally; recreate deliveries on your public website after deployment.

Passwords are stored as salted hashes and cannot be viewed later. To resend a delivery, use **Set new password & prepare message**. You can also change expiry, revoke/reactivate links and delete hosted files. These changes invalidate existing download sessions. Clients unlock access for up to 15 minutes, bounded by expiry. A download already transferring may finish after expiry or revocation.

Cloud links support Google Drive (`drive.google.com`, `docs.google.com`) and OneDrive (`1drv.ms`, `onedrive.live.com`, Microsoft SharePoint tenant links). DDPro does not copy or fetch cloud files. The protected page reveals/opens their link only after password verification. The cloud provider controls the file itself, its size and its permissions. A previously copied cloud link cannot be revoked by DDPro expiry: change its sharing permissions in OneDrive/Google Drive. Removing a DDPro cloud-link record does not delete the cloud file.

For external links, confirm the intended client can access the cloud file before sharing. For hosted files, **Delete file from server** frees disk space and leaves a small audit record. Include all three private document folders in your backup and deployment plan.