Almotawer Alzaki (المطور الذكي)

An enterprise-grade, bilingual (Arabic & English) web application built for the Almotawer Alzaki Digital Marketing & Software Agency. This project serves as the primary client-facing website, utilizing a modern Headless CMS architecture. It integrates a secure, dynamic Next.js App Router front-end with a WordPress REST API back-end powered by Advanced Custom Fields (ACF).

---

🏗️ System Architecture

The project decouples content management from presentation, allowing the agency to update pages, blog posts, services, and products inside WordPress while Next.js serves high-performance, statically generated pages optimized with Incremental Static Regeneration (ISR).

graph TD
    A[WordPress CMS & ACF] -->|JSON REST API| B(Next.js Server-Side Fetching)
    B --> C[Static Pre-rendered HTML Pages]
    D[WordPress Publish/Update Webhook] -->|Secure POST Request| E[Next.js API Revalidation Endpoint]
    E -->|Clear Cache / Revalidate Path| C
    C -->|Bilingual Render: Cairo Font| F[Client Browser]
    F -->|Formik & Yup Validation| H[Contact Forms Submission]

---

✨ Core Features

• Bilingual & Directional Support (RTL/LTR): Complete internationalization supporting both Arabic (default) and English using next-intl. Pages auto-detect text direction (rtl/ltr) and render layout grids accordingly.
• Dynamic Headless CMS Integration: Dynamic fetching of services, products, and blog posts from a remote WordPress backend via the WordPress REST API.
• On-Demand Incremental Static Regeneration (ISR): A secure webhook API endpoint (/api/revalidate) allows WordPress to trigger targeted page revalidations immediately after content edits, ensuring instant updates without full rebuilds.
• Modular Styling Design System: Uses styled-components for global and component-level style compilation with predefined design tokens (color variables, shadow definitions, and smooth animation hooks).
• Secure Content Delivery: Pre-configured middleware implementing strict Content Security Policies (CSP), custom nonces, and security headers (STS, Frame Options, XSS Protection).
• Docker Containerization: Custom Docker orchestrations for development and production environments, leveraging multi-stage builds and standalone Next.js bundling.

---

🛠️ Tech Stack

• Core Framework: Next.js 14 (App Router) & TypeScript
• Styling: Styled-Components with styled registry for SSR styling hydration
• Internationalization: next-intl & rtl-detect
• Forms & Validation: Formik & Yup
• UI Components: react-multi-carousel, react-animate-on-scroll, and sonner for toast notifications
• DevOps & Environment: Docker (production & development setups), Compose, and GNU Make

---

📁 Directory Structure

The project organizes styling, pages, and helpers inside a modular structure:

├── docker/                 # Environment-specific Docker configurations
│   ├── development/        # Dockerfile and compose script for local development
│   └── production/         # Multi-stage Docker production pipeline
├── messages/               # Internationalization locale JSON mappings & translation dictionaries
├── public/                 # Static assets, local icons, and favicon
├── src/                    # Source Code Root
│   ├── app/                # Next.js App Router root & API routes
│   │   ├── [locale]/       # Translated localized routes (about, blog, services, products, etc.)
│   │   ├── api/            # Backend API routes
│   │   │   └── revalidate/ # ISR cache clearance webhook receiver
│   │   └── layout.tsx      # Root HTML layout and provider injection
│   ├── helper/             # Format and configuration helpers (dates, pricing formatting)
│   ├── Library/            # UI components and layouts
│   │   ├── _Pages/         # Page-specific sections (About page structure, Policies, Terms)
│   │   ├── common/         # Global shared components (NavBar, Footer, Button, design tokens)
│   │   └── page/           # Multi-section component hubs (Home page sections, Products)
│   ├── redux/              # Redux setup (store initialization, client wrappers)
│   ├── utils/              # Headless WP API fetch fetchers (Posts, Products, Services)
│   ├── i18n.ts             # Internationalization config and loader setup
│   └── middleware.ts       # Security CSP headers, cross-origin rules, and locale routing
├── Makefile                # Task runner for Docker environment orchestration
├── next.config.js          # Next.js config (standalone build output, allowed image domains, compiler flags)
└── package.json            # Node project metadata and dependencies

---

🔒 Security & Middleware

The middleware.ts layer strictly enforces security configurations:

1. Content Security Policy (CSP): Generates random cryptographic nonces on each request to validate script sources, allowing 'unsafe-eval' strictly during development.
2. Access Control: Standardizes origin validation and disables frame embedding (X-Frame-Options: DENY) to mitigate clickjacking.
3. Strict Transport Security (HSTS): Configured with max-age parameters to enforce secure HTTPS channels.
4. Locale Redirection: Manages user language routing patterns securely.

---

🌐 Dynamic Cache Revalidation (ISR)

The application implements dynamic cache busting via src/app/api/revalidate/route.ts:

• Webhook Authentication: Secures requests using a custom webhook token validation (REVALIDATION_SECRET).
• Path Clearance: Resolves changed items and dynamically clears Vercel/Next.js edge server paths:
  • /blog & /blog/[slug]
  • /services & /services/[slug]
  • Root layouts and translations