💍 Royal Digital Invitations & RSVP Platform (دعوات ملكية)

---

📖 Executive Summary

🎯 The Problem

Traditional paper wedding and event invitations introduce several operational and experience limitations:

1. High Costs & Waste: Printing and physically delivering hundreds of invitations can be expensive and environmentally wasteful.

2. Zero Visibility: Hosts have no real-time way to know who has responded, who is attending, or how many guests are expected.

3. Static & Non-Interactive: Printed invitations cannot provide interactive maps, calendar integration, live countdowns, multimedia experiences, or dynamically updated information.

4. Scattered Communication: Managing RSVP responses through WhatsApp conversations and phone calls can make guest tracking difficult, especially close to the event date.

💡 The Solution

Royal Digital Invitations (دعوات ملكية) is a luxury digital invitation and RSVP platform designed for weddings, engagements, katb ketab, and private celebrations.

The platform combines a premium digital invitation experience with real-time guest management, client dashboards, automated order processing, and a centralized administration system.

The experience is designed around the aesthetics of traditional Arabic luxury invitations while providing the flexibility and functionality of a modern web application.

---

✨ Core Features

💌 1. Guest Invitation Experience

Each invitation is generated dynamically through a unique public slug.

Interactive Invitation

• 3D animated wax seal envelope opening.
• Luxury gold-themed visual design.
• Arabic typography using Amiri and Cairo.
• Animated transitions powered by Framer Motion.
• Decorative royal frames and visual effects.
• Canvas-based celebration confetti.

Cultural & Content Presets

The invitation system supports different types of occasions and content:

• Weddings.
• Engagements.
• Katb Ketab.
• Private celebrations.
• Islamic greetings and Quranic verses.
• Neutral or custom greeting messages.
• Custom footer messages and duas.

Event Information

Each invitation can display:

• Event date.
• Event time.
• Venue name.
• Venue address.
• Google Maps navigation.
• Calendar event export.
• Live countdown timer.

---

📊 2. Real-Time RSVP System

The RSVP engine allows guests to respond directly through the invitation.

Attendance Confirmation

Guests can:

• Confirm attendance.
• Specify the number of attendees.
• Submit personalized notes.
• Send an apology if they cannot attend.

The system stores each response and associates it with the corresponding invitation.

RSVP Statistics

The couple dashboard provides real-time metrics including:

• Total responses.
• Confirmed guests.
• Total attendee headcount.
• Declined invitations.

Guest Management

Responses can be filtered by:

• All guests.
• Attending.
• Declined.

Guest records can also be exported for use by:

• Catering teams.
• Venue managers.
• Seating planners.

---

👰 3. Couple Dashboard

Every invitation can have its own private management dashboard.

Private Access

Each couple receives a dedicated password-protected dashboard associated with their invitation.

Dashboard Features

• Live RSVP statistics.
• Guest list management.
• Attendance filtering.
• Guest notes.
• Attendee counts.
• CSV export.
• Invitation-specific information.

The dashboard gives couples a centralized view of their attendance without requiring them to manually track responses across different communication channels.

---

🛡️ 4. Master Administration Suite

The platform includes a centralized administrative system for managing the entire invitation service.

Global Overview

Administrators can monitor:

• Total invitations.
• Active invitations.
• Orders.
• RSVP activity.
• Customer activity.
• Overall platform statistics.

Order Management

Incoming customer orders can be managed through a dedicated workflow:

Pending Proof → Confirmed → In Progress → Completed → Cancelled

Administrators can review:

• Customer information.
• Occasion details.
• Event date and time.
• Venue information.
• Payment information.
• Additional customer notes.

Invitation Generation

An incoming order can be converted into a live invitation directly from the administration system.

The generated invitation can receive:

• Custom slug.
• Customer names.
• Event information.
• Occasion-specific content.
• Venue details.
• Custom Quranic or greeting content.

Demo Management

Administrators can select an active invitation to be used as the public demonstration invitation on the landing page.

WhatsApp Delivery

The administration system can generate pre-filled WhatsApp messages containing:

• Invitation URL.
• Couple dashboard URL.
• Access credentials.
• Delivery information.

---

💳 5. Booking & Payment Workflow

The platform includes a streamlined customer ordering experience.

Order Submission

Customers provide:

• Occasion type.
• Names.
• Phone number.
• Event date.
• Event time.
• Venue.
• Google Maps location.
• Optional Quranic verse.
• Additional notes.

Payment Integration

The platform supports InstaPay-based payment workflows with:

• Direct payment deep links.
• Copyable payment aliases.
• Payment reference submission.
• Administrative payment verification.

Low-Friction Checkout

The customer journey is intentionally designed without requiring traditional account registration.

The workflow is:

Configure Invitation → Payment → Submit Order → WhatsApp Communication → Invitation Delivery

---

🏗️ System Architecture

The platform follows a decoupled architecture consisting of a Next.js frontend and NestJS backend.

graph TD

    Client[📱 Guest / Client Browser] -->|HTTPS Requests| Cloudflare[Cloudflare CDN / Edge Cache]

    Cloudflare -->|Pages, SSR, Dynamic OG| NextJS[⚡ Next.js 16 App Router]

    subgraph "Frontend Layer"
        NextJS --> Landing[Landing Page & Order Form]
        NextJS --> GuestPortal[Dynamic Invitation: /[slug]]
        NextJS --> ClientDash[Couple Dashboard: /[slug]/dashboard]
        NextJS --> AdminDash[Master Admin Panel: /admin]
        NextJS --> DynamicSEO[Dynamic SEO & Metadata]
    end

    NextJS -->|REST API| NestAPI[🛡️ NestJS 10 REST API]

    subgraph "Backend Layer"
        NestAPI --> InvModule[Invitations Module]
        NestAPI --> GuestModule[Guests & RSVP Module]
        NestAPI --> OrderModule[Orders & Booking Module]
        NestAPI --> AdminModule[Admin & Analytics Module]
        NestAPI --> Mongoose[Mongoose ODM]
    end

    Mongoose -->|SSL| MongoDB[(🍃 MongoDB Atlas)]

    subgraph "External Integrations"
        NextJS -.-> WhatsApp[💬 WhatsApp]
        NextJS -.-> InstaPay[💳 InstaPay]
        NextJS -.-> GoogleMaps[🗺️ Google Maps]
    end

---

🗄️ Database Architecture

The platform uses MongoDB with indexed entities designed around the invitation, guest, and order workflows.

Invitations

The invitation entity contains the information required to render a complete personalized event experience.

{
  slug: String,
  groomName: String,
  brideName: String,
  title: String,
  subHeader: String,
  openingPhrase: String,
  quranVerse: String,
  quranSurah: String,
  greetingMessage: String,
  greetingSubMessage: String,
  eventDate: String,
  eventDateFormatted: String,
  eventTimeFormatted: String,
  venueName: String,
  venueAddress: String,
  googleMapsUrl: String,
  footerDua: String,
  dashboardPassword: String,
  isDemo: Boolean,
  isActive: Boolean
}

The slug field is uniquely indexed to provide fast access to individual invitations.

Guests

The guest entity stores RSVP responses associated with an invitation.

{
  invitationSlug: String,
  name: String,
  phone: String,
  status: "ATTENDING" | "DECLINED" | "PENDING",
  attendeeCount: Number,
  notes: String,
  submittedAt: Date
}

A compound index on invitation and status allows efficient dashboard filtering and aggregation.

Orders

Orders represent customer requests for new invitations.

{
  occasionType: "wedding" | "engagement" | "katb_ketab" | "other",
  customOccasion: String,
  groomName: String,
  brideName: String,
  phone: String,
  eventDate: String,
  eventTime: String,
  venue: String,
  googleMapsUrl: String,
  quranVerse: String,
  notes: String,
  amount: Number,
  status:
    "PENDING_PROOF"
    | "CONFIRMED"
    | "IN_PROGRESS"
    | "COMPLETED"
    | "CANCELLED",
  createdAt: Date
}

---

🔍 SEO, Social Sharing & Performance

SEO and social sharing were treated as core parts of the product rather than an afterthought.

Metadata

The platform uses optimized:

• Page titles.
• Meta descriptions.
• OpenGraph metadata.
• Twitter metadata.
• Canonical URLs.
• Dynamic invitation metadata.

Structured Data

The platform uses Schema.org JSON-LD structured data including:

• WebSite
• Organization
• Product
• FAQPage
• Event

This allows both the main product and individual event invitations to expose structured information to search engines.

Dynamic Sitemap

The sitemap dynamically discovers active public invitations so newly created invitations can become discoverable without manually updating the sitemap.

Crawler Protection

Public invitation pages remain indexable while private client dashboards are excluded from search engine indexing.

Social Preview Optimization

Social preview assets were optimized specifically for platforms such as:

• WhatsApp.
• Facebook.
• Telegram.
• LinkedIn.
• X.

The OpenGraph assets were compressed to remain well below platform-specific file size limits while preserving visual quality.

---

💻 Technology Stack

Frontend

• Next.js 16 - App Router and server-side rendering.
• React 19 - Component-based UI architecture.
• Tailwind CSS v4 - Utility-first styling.
• Framer Motion - High-performance animations and transitions.
• Lucide React - Interface icons.
• Canvas Confetti - Celebration effects.
• Amiri - Arabic display and Quranic typography.
• Cairo - Arabic interface typography.
• Sharp - Image processing and optimization.

Backend

• NestJS 10 - Modular REST API architecture.
• Node.js - Backend runtime.
• TypeScript - Type-safe application development.
• Mongoose - MongoDB ODM.
• MongoDB Atlas - Cloud database infrastructure.
• class-validator - DTO validation.
• class-transformer - Request transformation and validation.

Integrations

• WhatsApp - Customer communication and invitation delivery.
• InstaPay - Payment workflow.
• Google Maps - Venue navigation.
• Google Calendar / ICS - Event scheduling.

---

🎨 Design & User Experience

The platform intentionally combines traditional Arabic invitation aesthetics with modern interactive web design.

Visual Direction

• Luxury gold accents.
• Dark and elegant backgrounds.
• Ornamental borders.
• Arabic calligraphy.
• Glass-like layered surfaces.
• Soft shadows.
• Cinematic transitions.
• Interactive micro-animations.

Interaction Design

The invitation experience focuses on making the digital card feel like a physical invitation.

The animated envelope and wax seal create an intentional opening moment before revealing the event information.

From there, the guest moves through:

Invitation → Event Details → Countdown → RSVP → Confirmation

The experience is designed to remain visually rich without compromising usability on mobile devices.

---

📈 Product Workflow

The complete platform workflow can be represented as:

Customer
   ↓
Select Occasion
   ↓
Submit Invitation Details
   ↓
Payment
   ↓
Order Review
   ↓
Invitation Creation
   ↓
Unique Invitation URL
   ↓
Guest Responses
   ↓
Real-Time RSVP Dashboard
   ↓
Guest Export

For guests:

Open Invitation
      ↓
Interactive Envelope
      ↓
Event Information
      ↓
Venue & Calendar
      ↓
RSVP
   ↙     ↘
Attend   Decline
   ↓
Guest Count
   ↓
Confirmation

---

🧠 Engineering Highlights

The project demonstrates several production-oriented engineering concepts:

• Multi-tenant invitation architecture.
• Dynamic routing with Next.js.
• Decoupled frontend and backend services.
• REST API architecture with NestJS.
• MongoDB data modeling and indexing.
• Real-time RSVP aggregation.
• Private client dashboards.
• Centralized administration.
• Order lifecycle management.
• Payment workflow integration.
• Dynamic SEO metadata.
• Event structured data.
• Dynamic XML sitemap generation.
• Search crawler controls.
• Responsive mobile-first invitation design.
• Hardware-accelerated animations.
• Optimized social preview assets.
• Arabic-first interface and typography.
• Dynamic content generation based on occasion type.

---

🏆 Project Outcome

Royal Digital Invitations transforms the traditional invitation into a complete digital event experience.

Instead of functioning as a simple digital card, the platform combines:

Luxury Invitation Design + RSVP Management + Client Dashboard + Order Management + Payment Workflow + Administration + SEO

This creates a complete product ecosystem capable of supporting multiple customers, multiple invitations, different event types, and centralized operational management from a single platform.