Rooms is an open-source MERN stack hotel booking application that pairs a Next.js/React customer-facing booking site with a separate React and Material UI admin dashboard. The template accepts location-based search queries, booking filters, and admin operations as input, and produces a searchable hotel listing with image galleries plus a full back office for managing hotels, rooms, bookings, and user accounts.
What is Rooms?
Rooms is a full-stack hotel booking template with two connected front ends: a customer-facing Next.js app and an admin dashboard built with React and Material UI. The backend runs on Node.js, Express.js, and MongoDB, with JWT-based authentication. The developer is Ashik (GitHub user Ashik045), and the code is publicly available in the rooms repository. The template includes live deployments: the customer project at https://rooms.vercel.app and the admin dashboard at https://rooms-dashboard.vercel.app, the latter with a demo login of email "[email protected]" and password "admin@0".
Key Features
- Location-based search — Users can discover hotels in a chosen city, with results served from MongoDB through the Express API.
- Advanced booking filters — Check-in/check-out dates, room preferences, and budget constraints narrow search results to matching stays.
- Hotel image slider — Each property listing uses a SwiperJs-powered gallery to preview rooms, letting visitors see the space before booking.
- Admin dashboard — Built with React and Material UI, it lets administrators manage hotels, rooms, bookings, and user accounts from a single interface, and includes Recharts visualizations.
- Multistep registration form — The user sign-up flow is split into steps and includes both client-side and server-side validation.
- Sweetalert2 notifications — Interactive confirmation popups appear across customer and admin interfaces for actions like bookings and deletions.
- Cloudinary media integration — Hotel and room images are uploaded to Cloudinary and stored as URLs in MongoDB.
- Responsive styling — The customer site uses SASS, CSS3, and HTML5, while the admin dashboard uses SASS, CSS3, and Material UI components.
Who is it for?
- Travelers — can search and filter hotels by city, dates, and budget and view image galleries before making a reservation.
- Hotel and hostel owners — can use the admin dashboard to add and edit room inventory, set rates, and manage bookings and guest accounts.
- Full-stack developers — can study or extend a production-style MERN architecture with separate customer and admin client apps, JWT auth, and validation patterns.
- Agencies building booking sites — can rebrand the template and deploy it as a private-label hotel reservation platform using the live Next.js project and dashboard as reference.
What can you do with Rooms?
- Test a demo hotel booking flow — Use the live customer site to search by location, apply date and budget filters, and browse property galleries without writing code.
- Manage inventory from a dashboard — Log into the demo admin dashboard with the provided credentials to see how hotels, rooms, bookings, and users are administered.
- Adapt the registration pipeline — The multistep registration form with double validation can be reused in other MERN applications needing secure sign-up.
- Learn a modular MERN structure — The project splits the customer app and dashboard into separate Next.js and React clients sharing one Express/MongoDB backend, serving as a reference for full-stack projects.
