Ceylon Yaathra

📝 Overview

Ceylon Yaathra is a fully responsive, modern web application built for a premier travel and tourism agency. Designed to showcase breathtaking destinations, curated tour packages, and seamless booking inquiries, this platform serves as the digital front door for travelers aspiring to explore the beauty of Sri Lanka.

The website utilizes a modern Jamstack architecture, combining the performance and SEO benefits of Next.js with the dynamic content management capabilities of Contentful CMS.

✨ Key Features

• Dynamic Content Management: Fully integrated with Contentful Headless CMS, allowing the agency to easily manage, update, and publish new tour packages, travel destinations, and customer reviews without deploying new code.
• Engaging UI/UX: Built a highly interactive and visually appealing interface using Tailwind CSS and Framer Motion for smooth, aesthetic page transitions and micro-interactions.
• Tour Packages & Destinations Catalog: Dedicated sections allowing users to browse curated travel itineraries, explore points of interest, and view detailed information.
• Accessible & Reusable Components: Extensively utilized Radix UI primitives and modular components to ensure high accessibility standards and consistent design throughout the app.
• Advanced Form Processing: Developed robust inquiry and contact forms using React Hook Form paired with Zod schema validation, ensuring data integrity and reliable international phone number capturing (react-phone-input-2, libphonenumber-js).
• Integrated Email Service: Back-end email dispatch system powered by Nodemailer to securely handle client inquiries directly from the web interface.
• Customer Reviews: Dynamic review showcase with interactive 5-star ratings (@smastrom/react-rating).
• Optimal Performance & Analytics: Achieved perfect Lighthouse scores with built-in Next.js SSR/SSG capabilities, localized font optimization (next/font), and integrated Vercel Analytics for real-time traffic monitoring.

🛠️ Tech Stack & Architecture

Frontend:

• Framework: Next.js 15 (App Router)
• Language: React 18, TypeScript
• Styling: Tailwind CSS, tailwindcss-animate, @tailwindcss/typography
• Animations: Framer Motion
• UI Libraries: Radix UI, Material UI (icons)
• State/Data Fetching: TanStack React Query

Backend & Services:

• CMS: Contentful (contentful, contentful-management)
• Email Service: Nodemailer
• Validation: Zod
• Deployment & Analytics: Vercel

📂 Project Structure

├── app/
│   ├── (home)/
│   │   ├── about-us/        # About company page
│   │   ├── contact-us/      # Inquiry forms and contact details
│   │   ├── packages/        # Travel itinerary listings
│   │   ├── places/          # Tourist destination highlights
│   │   ├── reviews/         # Customer feedback and testimonials
│   │   └── page.tsx         # Landing page with hero carousels
│   └── globals.css          # Global Tailwind configurations
├── components/
│   ├── ui/                  # Reusable atomic UI elements (buttons, inputs, carousels)
│   ├── NavBar.tsx           # Global responsive navigation
│   └── Footer.tsx           # Multi-column footer structure
├── lib/
│   ├── contentful.ts        # Contentful client configuration
│   └── utils.ts             # Tailwind class mergers and helper functions

🚀 Challenges & Solutions

1. Challenge: Ensuring the content team could update travel itineraries instantly without touching the code. Solution: Executed a seamless integration with Contentful CMS, utilizing the Contentful Delivery API and @contentful/rich-text-react-renderer to dynamically render structured data on Next.js pages.

2. Challenge: Handling internationalization requirements for inquiries (specifically phone numbers and country origins). Solution: Built a complex form using react-hook-form along with specialized packages like country-list and react-phone-input-2 to strictly validate and format international client data before it hits the Nodemailer server.