A comprehensive full-stack web platform that connects people looking for places to live with flat owners, brokers, or current residents who have spare rooms. Built with Next.js 14, MongoDB Atlas, and modern web technologies.
- Broker (₹1000/month): Registered broker managing multiple properties
- Owner (₹800/month): Property owner renting directly
- Room Sharer (₹500/month): Individual renting spare rooms
Lister Features:
- Full user registration with profile photos
- Secure online payment via Razorpay
- Role-based personal dashboard
- Comprehensive flat listing with multiple images
- Listing analytics (views, inquiries)
- Subscription management and renewal
- Payment history and invoices
- Browse listings without registration
- Advanced filtering and search
- Grid and list layout toggle
- Detailed flat information with image carousel
- Contact listers directly
- Share listings on social media
- Complete platform oversight
- User and listing management
- Real-time analytics dashboard
- Revenue tracking
- Subscription management
- Broadcasting and notifications
- Razorpay integration for INR payments
- Monthly subscription billing
- Secure checkout flow
- Webhook integration for payment verification
- Automated invoice generation
- Email notifications
- Modern, responsive design with Tailwind CSS
- Dark/light theme toggle
- Smooth animations with Framer Motion
- Mobile-first responsive design
- Elegant color palette and typography
- Frontend: Next.js 14 (App Router), React, TypeScript
- Styling: Tailwind CSS, Custom CSS Variables
- Backend: Next.js API Routes, MongoDB with Mongoose
- Authentication: NextAuth.js with Google OAuth & Credentials
- Payment: Razorpay
- Image Upload: Cloudinary
- Email: Nodemailer
- Real-time: Socket.IO/Pusher (configured)
- Deployment: Vercel-ready
- Node.js 18+ and npm
- MongoDB Atlas account
- Cloudinary account
- Razorpay account
- Google OAuth credentials
- Email service (Gmail recommended)
git clone <repository-url>
cd flatup
npm installCreate a .env.local file in the root directory and add the following:
# Database
MONGODB_URI=mongodb+srv://username:password@cluster0.mongodb.net/flatup?retryWrites=true&w=majority
# NextAuth.js
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-super-secret-key-here-change-this-in-production
# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# Razorpay
RAZORPAY_KEY_ID=your-razorpay-key-id
RAZORPAY_KEY_SECRET=your-razorpay-key-secret
# Cloudinary
CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
CLOUDINARY_API_SECRET=your-cloudinary-api-secret
# Email (Nodemailer)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password
# Google Maps
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your-google-maps-api-key
# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000- Create a MongoDB Atlas account
- Create a new cluster
- Create a database user
- Get your connection string
- Replace the MONGODB_URI in .env.local
- Sign up for Cloudinary
- Get your cloud name, API key, and API secret
- Add them to .env.local
- Create a Razorpay account
- Get your Key ID and Key Secret from the dashboard
- Add them to .env.local
- Go to Google Cloud Console
- Create a new project or select existing
- Enable Google+ API
- Create OAuth 2.0 credentials
- Add authorized redirect URIs:
http://localhost:3000/api/auth/callback/google - Add credentials to .env.local
- Enable 2-factor authentication on your Gmail account
- Generate an app password
- Use your Gmail and app password in .env.local
npm run devThe application will be available at http://localhost:3000
src/
├── app/ # Next.js 14 App Router
│ ├── api/ # API routes
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # User dashboard
│ ├── admin/ # Admin dashboard
│ ├── browse/ # Browse listings
│ ├── flat/ # Flat details
│ ├── payment/ # Payment pages
│ └── pricing/ # Pricing page
├── components/ # Reusable components
│ ├── layout/ # Layout components
│ └── ui/ # UI components
├── lib/ # Utility functions
├── models/ # MongoDB models
└── types/ # TypeScript types
- User registers with role selection
- Email verification (optional)
- Redirect to payment page for subscription
- Payment processing via Razorpay
- Account activation and dashboard access
| Plan | Price | Features |
|---|---|---|
| Room Sharer | ₹500/month | Basic listing, 5 photos, email support |
| Property Owner | ₹800/month | Unlimited listings, 10 photos, priority support |
| Broker | ₹1000/month | Premium features, 15 photos, client management |
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy
Update the following for production:
NEXTAUTH_URL: Your production domainNEXT_PUBLIC_APP_URL: Your production domainNEXTAUTH_SECRET: Generate a new secret for production
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start✅ User authentication with NextAuth.js ✅ Role-based access control ✅ Payment integration with Razorpay ✅ Image upload with Cloudinary ✅ Responsive design with Tailwind CSS ✅ Dark/light theme toggle ✅ Advanced filtering and search ✅ Real-time analytics dashboard ✅ Email notifications ✅ Admin panel with full control ✅ Mobile-responsive design ✅ SEO optimization
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
This project is licensed under the MIT License.
For support, email support@flatup.com or create an issue in the repository.
Built with ❤️ using Next.js 14, MongoDB, and modern web technologies.