A modern, full-stack Airbnb-style property rental and booking platform built with Next.js, React 19, MongoDB, NextAuth, and Cloudinary.
NextStay is a production-ready, full-stack vacation rental marketplace web application inspired by Airbnb. Built on the modern Next.js App Router with React 19 Server Actions, NextStay enables property hosts to list, manage, and showcase vacation accommodations with high-resolution image galleries, while enabling travelers to discover stays, filter by location and amenities, bookmark favorites, and communicate directly with property owners via an integrated real-time messaging system.
+-------------------------------------------------------------+
| Next.js 16 Web Client |
| - Server-Rendered Catalog & Discovery Pages |
| - PhotoSwipe Lightbox Image Gallery |
| - Client-Side Bookmarking & Dynamic Search Filters |
+------------------------------+------------------------------+
|
Next.js Server Actions & API Routes
|
+----------------------+----------------------+
| |
▼ ▼
+-----------------------------+ +-----------------------------+
| NextAuth.js Engine | | Cloudinary Image CDN |
| - Google OAuth 2.0 Flow | | - Multi-image Upload |
| - Session Cookies & Guard | | - Responsive Resizing |
+--------------+--------------+ +-----------------------------+
|
▼
+-------------------------------------------------------------+
| MongoDB Database |
| - User Profiles & Bookmarked Properties |
| - Properties (Rates, Amenities, Geo-location) |
| - Direct In-App Inquiry Messages & Read Receipts |
+-------------------------------------------------------------+
- 🏡 Comprehensive Property Listings: Add new rental properties with title, description, property type (Apartment, House, Villa, Cottage, etc.), location, rates (Nightly, Weekly, Monthly), and amenities checklist.
- 📸 High-Resolution Lightbox Galleries: Multi-image upload direct to Cloudinary CDN with responsive client preview and immersive full-screen PhotoSwipe lightbox viewer.
- 🔍 Dynamic Search & Filtering: Filter listings by location, city, state, and rental category with instant results.
- ❤️ Bookmark & Favorites: Save desired properties to your personalized "Saved Properties" hub with instant toggle actions.
- 💬 Direct In-App Messaging: Travelers can send inquiries and contact details directly to property owners from any listing page; owners receive unread badge notifications and a dedicated messages inbox.
- 👤 Host Profile & Management: Dedicated dashboard for hosts to view, update, edit, and delete their active rental listings.
- 🔐 Google OAuth Authentication: Single-click secure sign-in powered by NextAuth.js and Google Identity Services.
- 📱 Fully Responsive: Tailored for mobile, tablet, and desktop viewports using Tailwind CSS v4.
| Category | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 | App Router, Server Components & Server Actions |
| Frontend Library | React 19 | Declarative UI rendering |
| Database | MongoDB & Mongoose 9 | Document persistence and schema modeling |
| Authentication | NextAuth.js v4 | Google OAuth 2.0 provider & session management |
| Media Hosting | Cloudinary SDK | Cloud image upload, transformation, and optimization |
| Gallery Viewer | PhotoSwipe & react-photoswipe-gallery | Hardware-accelerated full-screen photo viewer |
| Styling | Tailwind CSS v4 | Utility-first responsive design system |
| Icons & Notifications | React Icons & React Toastify | Modern UI iconography and toast feedback |
next-stay/
├── app/
│ ├── actions/ # Server Actions (CRUD, Bookmarks, Messaging)
│ │ ├── addMessage.js # Send inquiry to property host
│ │ ├── addProperty.js # Upload images to Cloudinary and create listing
│ │ ├── bookmarkProperty.js# Toggle bookmark state on user profile
│ │ ├── deleteProperty.js # Delete property and purge images
│ │ ├── editProperty.js # Update existing property metadata
│ │ └── markMessageAsSeen.js # Toggle read receipts on messages
│ ├── api/
│ │ └── auth/[...nextauth]/# NextAuth Google OAuth handler
│ ├── messages/ # Messages inbox with unread badges
│ ├── profile/ # Host profile and property inventory
│ ├── properties/ # Main listings catalog, details, add, saved, search
│ ├── layout.jsx # Root layout with AuthProvider & Navbar
│ └── page.jsx # Hero landing page with featured stays
├── assets/ # Icons and static images
├── components/ # Reusable UI widgets (Navbar, Footer, PropertyCard, Search)
├── config/ # Database connection manager (db.js)
├── context/ # Global state (GlobalContext for message counts)
├── models/ # Mongoose schemas (Property, User, Message)
├── utils/ # Auth options, session helpers, request utilities
├── next.config.mjs # Next.js bundler configuration & remote image domains
├── package.json # Dependencies and scripts
└── tailwind.config.mjs # Tailwind CSS configuration
Create a .env file in the project root:
# Database
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/nextstay?retryWrites=true&w=majority
# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_generated_secret
# Google OAuth Credentials
GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_google_client_secret
# Cloudinary Storage
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
# Public Domain (For Social Sharing)
NEXT_PUBLIC_DOMAIN=http://localhost:3000- Node.js: v18.17+ or v20+
- MongoDB: Local MongoDB instance or free MongoDB Atlas cluster
- Google Cloud Console: OAuth 2.0 Client ID for web applications
- Cloudinary Account: Free account for image media hosting
git clone https://github.com/gitApurv/next-stay.git
cd next-stay
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run build
npm startApurv
- GitHub: @gitApurv