Roomie is a modern, responsive hotel booking frontend app built with Next.js.
Discover rooms, explore amenities (gym, restaurant), search availability, and book stays effortlessly. Perfect for hotels, resorts, or vacation rentals.
This project was bootstrapped with create-next-app.
Design credited to Aarondio
| Feature | Description |
|---|---|
| 🏠 Home | Hero banner, featured rooms, quick booking |
| 🔍 Explore | Rooms + Gym Center + Restaurant services |
| 🛏️ Rooms | Search, filter, and browse room listings |
| ℹ️ About | CEO & Hotel story, facilities, and amenities |
| 📞 Contact | Inquiry form |
| 🎯 Book Now | Modal popup for instant reservations |
| 📱 Responsive | Mobile-first Tailwind CSS design |
| ⚡ Fast | Next.js optimized performance |
roomie/src/
├── app/ # App Router
│ ├── globals.css # Tailwind styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ ├── explore/ # Explore page
│ ├── rooms/ # Rooms listing
│ ├── about/ # About page
│ ├── contact/ # Contact form
│ └── components/ # Shared components
├── public/ # Images (room photos, hotel)
│ ├── rooms/ # Room images
│ └── amenities/ # Gym, restaurant
├── components/ # UI Components
│ ├── BookNowModal.tsx # Booking popup
│ ├── RoomCard.tsx # Room listing card
│ ├── SearchBar.tsx # Search component
│ └── Navbar.tsx # Navigation
├── tailwind.config.js # Styling config
└── next.config.js # Next.js config- Node.js 18+
- Package Manager: npm, yarn, pnpm, or bun
# 1. Clone the repo
git clone https://github.com/the-mirage/roomie.git
cd roomie
# 2. Install dependencies
npm install
# or
yarn install
# or
pnpm install
# 3. Start dev server
npm run dev
- Fork the repo
- Clone:
git clone git@github.com:o-brayarn/roomie.git - Branch:
git checkout <new-branch> - Commit:
git commit -m "Add penthouse suite - Push:
git push origin feature/new-room-type - PR to
main