MahabubDecision
Next.js App-style composition
Reason
Needed SEO-ready pages and reusable section patterns for content growth.
Trade-off
Slightly more framework structure than a static marketing site.
Full StackLive2024
Amana Tours & Travel
A production travel product that turns package discovery into confident booking — with clear itineraries, flexible plans, and a stack built for speed and maintainability.
- Role
- Full Stack Developer
- Industry
- Travel & Hospitality
- Team Size
- Cross-functional product team
- Duration
- Ongoing product delivery
- Platform
- Web · Responsive
- Status
- Live
Case narrative
Engineering story
Amana Tours needed a digital product that could earn trust quickly — especially for high-intent travel decisions like Hajj, Umrah, and custom packages.
Problem
Package details were dense and unevenly presented, so visitors struggled to compare options and move toward enquiry with confidence.
Why it was difficult
The hard part was not rendering pages — it was compressing complex travel information into a calm, scannable experience without losing credibility or SEO reach.
Approach
I shaped a Next.js + TypeScript product surface with structured package presentation, enquiry-oriented CTAs, and Express/MongoDB services behind the UI.
Why this approach
Next.js gave us SEO-friendly delivery and maintainable page composition, while a typed full-stack boundary reduced regressions as content and features expanded.
Outcome
The result is a clearer booking-oriented experience that presents packages as products — easier to scan, easier to trust, and easier to evolve.
What I learned
High-intent products need clarity more than decoration Type safety pays off quickly in content-heavy travel flows Reusable sections make marketing updates safer
Responsibilities & features
My responsibilities
- Owned customer-facing UI architecture and package storytelling
- Implemented API-backed content and enquiry pathways
- Collaborated on launch priorities and iterative polish
Key features
- Structured discovery for Hajj, Umrah, and tours
- Responsive decision-oriented package pages
- Clear service communication and enquiry CTAs
- Maintainable content structure for ongoing updates
Trade-offs
Engineering decisions
Choices that shaped the architecture — including what we accepted in return.
Decision
TypeScript across the product UI
Reason
Package and enquiry flows change often — type safety reduces silent breakage.
Trade-off
Upfront typing cost for faster long-term iteration.
Decision
Separate Express + MongoDB services
Reason
Keeps content/ops concerns out of the presentation layer.
Trade-off
Requires intentional API contracts and deployment coordination.
System shape
Technical architecture
- Reusable page sections for package storytelling
- API-driven content and enquiry pathways
- MongoDB for flexible package and service data
- Client
- Next.js
- Express API
- MongoDB
Technology stack
- Next.js
- TypeScript
- Tailwind
- Node.js
- Express
- MongoDB
- Image-conscious layouts for large travel visuals
- Responsive-first structure to protect mobile experience
- Lean component patterns for snappy interaction
Visuals
Project screenshot
A product screenshot from this project. Select it to open a larger view.
Outcome
Business impact
Practical results across experience, maintainability, scale, and value — without invented metrics.
User experience
Visitors can compare packages with less friction and a clearer path to enquiry.
Maintainability
Section-based UI and typed boundaries make content and feature updates safer.
Scalability
The stack supports expanding package types and services without rewriting the shell.
Business value
A more trustworthy digital presence for high-consideration travel decisions.
Explore the live product
Open the deployment, or continue to another case study below.