// Full-Stack / Hotel Booking Demo Project

FindInn

A full-stack hotel booking web application built with React, Vite, Tailwind CSS, Express, MongoDB, Clerk, Cloudinary, and Stripe.

Live Site ↗GitHub ↗

2025

Full-Stack

01 / Overview

FindInn is a full-stack hotel booking demo application that allows users to browse available rooms, view hotel details, check availability, create bookings, and manage reservations. Hotel owners can register their hotel, add rooms with Cloudinary image uploads, manage room availability, and review booking dashboard data. The project uses React, Vite, Tailwind CSS, Express, MongoDB, Mongoose, Clerk, Cloudinary, Stripe, Axios, and Vercel to demonstrate full-stack architecture, authentication, file uploads, payment flow, REST API design, and responsive UI development.

Booking Flow

Allows users to browse rooms, check availability, and create hotel bookings.

Owner Dashboard

Provides hotel owners with tools to add rooms, manage availability, and review booking data.

Cloud Uploads & Payments

Integrates Cloudinary for room image uploads and Stripe test checkout for demo payments.

02 / Key Features

Hotel Room Browsing

Users can explore available rooms, view hotel details, review amenities, browse room images, and check location information.

Room Filtering & Sorting

Supports destination search, room type filtering, price range filtering, and sorting options for a better browsing experience.

Booking & Availability Flow

Allows users to select check-in and check-out dates, check room availability, and create bookings through the application.

Clerk Authentication

Uses Clerk for user authentication, protected routes, session handling, and user-based booking workflows.

Hotel Owner Dashboard

Provides an owner-facing dashboard where hotel owners can register their hotel, add rooms, manage room availability, and review booking data.

Cloudinary Image Uploads

Uses Multer and Cloudinary to upload and store room images for hotel owner room management.

Stripe Test Payment

Integrates Stripe checkout in test mode to simulate online payment for hotel bookings.

03 / Process

June 2025

Planning

Defined the hotel booking flow, user booking journey, owner dashboard requirements, room data model, and full-stack project structure.

June - July 2025

Frontend Development

Built the React and Tailwind CSS interface, including home page sections, room listings, room details, booking views, and responsive navigation.

July 2025

Backend Architecture

Created the Express and MongoDB backend with routes, controllers, models, authentication middleware, and REST API endpoints.

July 2025

Service Integration

Integrated Clerk for authentication, Cloudinary for image uploads, Stripe for test checkout, and Nodemailer for booking email flow.

July 2025

Deployment & Demo Setup

Deployed the client and server with Vercel, configured environment variables, prepared demo data, and refined the project for portfolio presentation.

04 / Tech Stack

React

JavaScript

Vite

Tailwind CSS

React Router

Axios

Node

Node.js

Express

MongoDB

Mongoose

Clerk

Cloudinary

Stripe

Vercel

Git

05 / Results

📅

Full

Booking Flow

📊

Owner

Dashboard

💳

Stripe

Test Checkout

🚀

Live

Vercel Deploy