Amila
Savinda

Verified Learner

AI-Powered Smart Hotel Finder (AI Hotel Management System)

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] Using useEffect , axios , and dispatch together introduces several issues: Repetitive Code : You write similar logic repeatedly for each API call. Boilerplate Overhead : Handling loading, success, and error states manually. Complex State Management : You must manage Redux slices, async thunks, and lifecycle events separately. Manual Caching : No built-in support for caching or re-fetching. This pattern becomes harder to maintain as your app scales. 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.] Reason1: User Expectations Are Evolving Modern users expect applications to behave like intelligent assistants , not simple search boxes. Natural language queries, instant results, and personalization are becoming standard UX Reason2: Reduces Developer Burden Solutions like RTK Query and Clerk reduce boilerplate, simplify state management, and improve scalability. Saves development time and avoids rewriting custom logic for every new feature. 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: May not be tech-savvy; prefers intuitive and modern UI. Uses mobile devices frequently to browse and book. 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? Auto Data Invalidation Keeps UI in sync with backend by auto-invalidating and refetching related data after mutations. Cleaner State Management Keeps your Redux slices lean. You don't need to manage loading/error/success manually. Declarative & Minimal Code You define endpoints, and it generates hooks like useGetPostsQuery() . No need for useEffect , axios , dispatch , or createAsyncThunk boilerplate. 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? All-in-One Authentication Handles sign up, sign in, multi-factor auth (MFA), social logins, email/password , and more — all out of the box. User Management Dashboard Comes with an admin dashboard to manage users, roles, and sessions without writing custom code. Developer-Friendly APIs Easy to integrate with React, Next.js, Node.js , and other modern stacks. Offers server-side and client-side SDKs , plus webhooks for custom workflows. 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) Decision: Integrated OpenAI's GPT-4o with LangChain's RAG pipeline to provide semantic, mood-based hotel search . Implementation: Users can type natural language queries (e.g., “romantic place near mountains” ). The system interprets intent and matches relevant hotels, even if exact keywords don’t exist. Enhanced search accuracy and engagement through contextual AI filtering . Frontend (React.js, Tailwind CSS, ShadCN UI) Decision: Used React.js for a dynamic, component-based SPA and Tailwind CSS for utility-first styling. Implementation: Built a fully responsive mobile-first UI . Used ShadCN UI components for consistency and modular design. Clean routing, fast rendering, and excellent UX across all pages. Backend Development (Node.js, Express.js, TypeScript) Decision: Chose TypeScript with Node.js + Express for better type safety, scalability, and code maintainability. Implementation: Developed RESTful APIs for hotel, booking, and user management. Strong typing across routes and models to catch bugs early. Clean folder structure with service/controller separation. Database Management (MongoDB) Decision: Selected MongoDB due to its schema flexibility and compatibility with JSON-like hotel data. Implementation: Designed relational collections ( users , hotels , bookings ) with ObjectId references. Used indexing on key fields like location , price , and availability . Enabled scalability for future features like reviews and favorites. Authentication & Authorization (Clerk) Decision: Used Clerk to offload auth logic and ensure secure session handling with minimal code. Implementation: Integrated Clerk's prebuilt components (Login, Register, Profile). Used JWT tokens and user roles to restrict admin features. Fully protected admin routes with role-based authorization logic. Payment Gateway Integration (Stripe) Decision: Chose Stripe for secure and global payment handling with minimal PCI compliance complexity. Implementation: Users can securely pay for bookings via Stripe Checkout. Implemented backend session creation and webhook handling. Payment status updates booking records in real-time. Challenges Faced and Solutions Problem 1: Stripe CLI App Integration Webhook Delivery Issues Webhooks sent by stripe listen sometimes failed to reach the local server due to incorrect port routing or firewall restrictions. 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 AI Chatbot Assistant Suggests hotels, creates trip plans, and answers travel-related questions using OpenAI (GPT-4o) + LangChain. Interactive Map Integration Display hotels and attractions on a live map (via Mapbox or Leaflet). "Find nearby" filters using geolocation. 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.

ASAmila Savinda

0

View Project