Project index
Verified liveTravel CommerceProduction

Book Umrah Today 

A responsive package-discovery and booking journey backed by customer, content, support, payment, and media services.

Open live product Open full system flow
Architecture knowledge graph15 connected nodes
System coreBook Umrah TodayTravel Commerce
01 / DiscoverVisitors choose the trip shape before the details
02 / ComposeTravel context becomes a structured booking intent
03 / ServeApplication services own customer and content workflows
04 / PersistRelational state and media use dedicated stores
05 / ConvertBooking and support actions remain close to discovery
06 / DeployWeb, API, and proxy ship as isolated services
Next.js
React
Express
MySQL
Stripe
AWS S3
Docker
nginx
Architecture stage Technology dependencyMove pointer to inspect depth

System brief

Travel discovery and booking for a high-trust journey

Engineering focus
Full-stack product delivery
Domain
Travel Commerce
Delivery window
Production
System state
Verified live
4travel search modes
2responsive booking experiences
1integrated content and support system

The engineering move

Complex behavior, made operational.

Constraint

The product problem

Pilgrimage travel combines emotional trust with dense logistics. The experience had to coordinate origin, destination, dates, stay length, party composition, cabin class, currency, and package context without turning the first interaction into a form wall.

System

The architecture decision

The Next.js experience provides dedicated flows for Umrah-only packages, Umrah holidays, hotels, and flight-plus-hotel discovery. Express services handle customers, authentication, support, blog content, payment events, and media while MySQL and S3 preserve operational state and assets.

Outcome

The operating result

Visitors can move from inspiration to a concrete booking inquiry through one consistent desktop and mobile journey, with editorial guidance and WhatsApp support close at hand.

Delivered capability

What the system actually does.

01

Umrah-only, holiday, hotel, and flight-plus-hotel search modes

02

Date, duration, traveler, cabin, and destination controls

03

Responsive mobile booking flow and persistent footer actions

04

Package merchandising and destination discovery

05

Multi-currency context and customer authentication

06

Editorial guide, FAQ, blog, and admin publishing

07

Support workflows and WhatsApp contact path

08

Stripe events, MySQL persistence, S3 media, and Docker deployment

Full system flow

The Mermaid diagram, rendered.

The interactive graph above is the executive view. This is the detailed service, data, control, and delivery path reviewed from source.
Mermaid / system architecture120%

Rendering the reviewed system flow

Drag the horizontal viewport at higher zoom levelsView .mmd source

Production architecture

A concrete path through the system.

Each stage below comes from the reviewed source tree, routes, services, infrastructure, and deployment evidence.
  1. 01
    Discover

    Visitors choose the trip shape before the details

    The interface separates package, holiday, hotel, and combined travel modes so each flow asks only relevant questions.

    Next.jsReactResponsive UI
  2. 02
    Compose

    Travel context becomes a structured booking intent

    Locations, dates, nights, travelers, rooms, cabin class, and currency are normalized into a consistent request.

    Form stateDate rangesCurrency context
  3. 03
    Serve

    Application services own customer and content workflows

    Express routes separate users, support, blog publishing, verification, password recovery, and payment operations.

    ExpressJWTEmail
  4. 04
    Persist

    Relational state and media use dedicated stores

    MySQL retains accounts and operational records while AWS S3 carries uploaded editorial and product imagery.

    MySQLAWS S3Uploads
  5. 05
    Convert

    Booking and support actions remain close to discovery

    Package cards, booking popups, contact paths, payment callbacks, and WhatsApp support turn research into an assisted next step.

    StripeWhatsAppSupport API
  6. 06
    Deploy

    Web, API, and proxy ship as isolated services

    Docker Compose and nginx define repeatable boundaries for the Next.js client and Express server.

    DockernginxHealth checks

Engineering judgment

The decisions behind the delivery.

Progressive disclosure

Travel modes isolate complexity so the user sees the fields required for the journey they actually selected.

Content supports conversion

Guides, packages, FAQs, testimonials, and support are part of the same application instead of detached campaign pages.

Mobile has a dedicated interaction model

Traveler, dates, destinations, stays, and cabin controls use mobile-specific panels instead of compressed desktop widgets.

Technical constellation

01Next.js02React03Express04MySQL05Stripe06AWS S307Docker08nginx
Book Umrah Today live package-search homepage
Deployment evidence

This is running software.

Live product and source reviewed on 2026-07-16. The public link is provided as evidence, while protected product areas correctly remain behind authentication.

Open Book Umrah Today

Continue through the project archive

Next caseAtlee Chat