Discover hotels effortlessly with our AI-powered search system that personalizes your journey. Whether you're looking for a romantic getaway or a peaceful escape, we match you with the perfect stay.
Secure your reservation with instant payments and enjoy luxury, comfort, and seamless service—all in one platform.
🤔 Problem space
Problems to solve/Requirements to Create
A full-stack web application built on MERN stack. Uers can quickly find hotels that match their feelings using AI. I have used LangChain for the RAG pipeline. hotels Booking, payment and a significant number of features have been provided to both users and admins. Since Redux is used for both synchronous and asynchronous state management, there is the ability to perform these tasks quickly.
👉 Problem: Application[Slower , Less user-friendly , Less scalable]
Current solution
RTK Query
RTK Query is a powerful data fetching and caching tool included in Redux Toolkit.
Why RTK Query?
Built-in caching and re-fetching – no manual logic needed.
Auto refetch on window focus or background updates.
Automatic loading/error state handling.
Mutations and optimistic updates with simple syntax.
Less code, more features compared to axios + useEffect.
How do we know it is a problem
Performance Metrics
Increased API call frequency due to lack of caching.
Higher bounce rate on pages with manual filtering.
Long Time to Interactive (TTI) due to repeated axios + useEffect calls.
User Feedback
Users report difficulty finding relevant results unless they type exact keywords.
Complaints about needing to apply too many filters manually.
Feedback shows frustration with slow or outdated data on page refresh
👉Problem : Poor User Experience
Because the system only matches exact words:
Users struggle to find what they’re looking for
They must try many word combinations manually
Need to apply multiple filters just to narrow results
Get “No results” even when suitable options exist (but use different wording)
Real Example:
User search: “Romantic getaway with a mountain view”
Normal search fails if:
Hotel listing uses “honeymoon cottage in the hills”
Because “romantic”, “getaway”, or “mountain view” don't match exactly
Current solution
Add the AI Search
How do we know it is a problem
User Feedback
Users often report not finding relevant results unless they use very specific keywords.
Complaints like:
“I typed ‘calm place by the lake’ but nothing showed up.”
“Too many filters. I just want to explain what I need in one sentence.”
Users prefer natural language input and expect results that match their intent, not just exact words.
Why solve these problems? (Highly Optional)
[Summarize why it is important to address these problems, and why it should be done now.]
User Satisfaction Matrix
Feature | Without Solution | With AI + RTK Query |
|---|
Search Result Accuracy | ❌ Low | ✅ High (semantic match) |
Time to Find Relevant Info | ❌ Long | ✅ Short |
User Satisfaction | 😕 Frustrated | 😄 Smooth & smart |
Developer Maintenance Effort | ❌ High | ✅ Low |
Conversion Rate | ❌ Lower | ✅ Higher |
Goals
Company objective 🎯
To develop an intelligent, user-centric hotel booking platform that leverages the power of AI and modern full-stack technologies to simplify travel decisions. The system aims to provide emotion-aware hotel recommendations, seamless booking and payment workflows, and real-time admin control, delivering an experience that is faster, smarter, and more personalized than traditional booking platforms.
Project goals
Integrated an AI-powered semantic search system using LangChain to allow users to find hotels based on mood, intent, or natural language queries.
Built a full-stack MERN architecture with role-based access, enabling separate user and admin functionalities for scalable system control.
Implemented Redux Toolkit (RTK + RTK Query) for efficient and predictable state management across booking, search, and user interaction flows.
Developed a secure authentication system using Clerk, providing smooth sign-in, sign-up, and user session handling.
Designed and deployed a responsive, mobile-first UI using Tailwind CSS and React, ensuring accessibility and performance across all devices.
Enabled payment integration and real-time booking confirmation with intuitive flow and smart error handling.(Stripe)
Used LangChain's RAG pipeline to dynamically retrieve and generate hotel-related information from external or custom knowledge bases.
User Stories
User Type: Visitor (Guest User / Traveler)
The Visitor is someone exploring the platform to discover hotels that match their mood, location preferences, or travel plans. They may not know exactly what they're looking for, so they expect smart recommendations and a smooth browsing experience.
Goals:
Discover hotels that align with personal preferences or emotions (e.g., relaxing, romantic, adventurous).
Easily book a hotel with secure payment.
Access a seamless and responsive UI on both mobile and desktop.
Needs:
AI-powered search that understands natural language queries.
Filtering options (location, rating, price, amenities).
Fast-loading pages and minimal steps to complete booking.
Other characteristics:
User Type: Admin
The Admin is responsible for managing hotel listings, bookings, user data, and overseeing platform operations. They need control over both content and user activity.
Goals:
Add, update, or delete hotel listings.
Monitor and manage all bookings and payments.
View real-time activity and system statistics.
Needs:
A dedicated admin dashboard with CRUD functionality.
Secure authentication and role-based access control.
Notification system for new bookings or user actions.
Other characteristics:
Requires high-level visibility of platform usage.
Prioritizes data accuracy, consistency, and security.
🌟 Design space
UI Design
The UI is designed with a user-first mindset, ensuring that both guest users and admins can navigate, search, and interact with the platform smoothly. The interface is built using Tailwind CSS, ShadCN UI and React, following a responsive and mobile-first approach.
Core Principles:
Minimalist & clean layout to reduce cognitive load
Consistent components using modular design (e.g., buttons, cards, modals)
Clear visual hierarchy using size, spacing, and color
ShadCN component ecosystem (if applicable) for reusable design patterns
Low-fidelity Wireframe
Design Concept
The concept behind the wireframe is to deliver a simple and intuitive hotel search and booking experience, supported by AI-powered discovery. Key design ideas include:
A clean home screen with an AI-enhanced search bar
Card-based hotel listings for easy browsing
A responsive layout that adapts to mobile and desktop
Clear booking flow with minimal steps
Admin dashboard with sidebar navigation and action cards
Wireframe
Home Page Wireframe
Hotel Listing component Wireframe.
Hotel Page Wireframe.
Complete page Wireframe.
Development Phase
Technology Stack Selection
Frontend - React.js with RTK Query
Why React.js?
Component-Based Architecture: Enables reusable UI components, making the frontend modular and maintainable.
Efficient UI Updates: Uses a virtual DOM for faster rendering and smooth user interactions.
Rich Ecosystem: Vast library support and active community ensure continued improvements.
Why RTK Query for Data Fetching?
Backend - Node.js , Express and TypeScript
Node.js – A fast, scalable JavaScript runtime used to build high-performance server-side applications.
Express.js – A lightweight and flexible web framework for handling routing, middleware, and HTTP requests with ease.
TypeScript – Adds static typing to JavaScript, improving code reliability, maintainability, and developer productivity through powerful tooling and IDE support.
AI Integration - OpenAI GPT-4o.
Semantic search and intelligent filtering (via RAG pipelines or embedding-based matching).
Scalability: GPT-4o handles multiple concurrent interactions, which is essential for a high-traffic hotel booking platform with many users seeking real-time recommendations.
User Authentication - Clerk Authentication
Why Use Clerk for Authentication?
High-Level Architecture Diagram
Architecture Diagram
Activity Diagram and Entity-Extended Relationship Diagram
Activity Diagram
Entity-Extended Relationship Diagram
Key Features of the Software
AI-Powered Hotel Discovery (OpenAI + LangChain)
Frontend (React.js, Tailwind CSS, ShadCN UI)
Backend Development (Node.js, Express.js, TypeScript)
Database Management (MongoDB)
Authentication & Authorization (Clerk)
Payment Gateway Integration (Stripe)
Challenges Faced and Solutions
Problem 1: Stripe CLI App Integration
Solution:
Future Vision / next steps
Long-Term Vision
Transform the app into an AI travel companion that helps users plan, book, and explore entire trips — not just hotels.
Create a smart map-based discovery system for hotels, landmarks, restaurants, and activities.
Build a tourism-focused ecosystem with user reviews, guides, seasonal events, and local insights.
Version 2 (V.2) – Feature Expansion
Version 3 (V.3) – Tourism Guide Application
Tour Guide Section
City-wise travel recommendations, things to do, best times to visit.
AI-written + human-reviewed articles.
Get visibility from recruiters & peers