RoomMate is a full-stack web platform designed to help individuals find compatible roommates based on shared preferences such as location, budget, lifestyle, and personal interests. Users can create listings, browse others’ posts, and manage their interactions — all within a clean and responsive interface.

🔗 Visit Live Site

RoomMate was built to modernize and simplify the roommate-hunting experience through:

• Smart filtering for lifestyle compatibility
• Full control over personal roommate listings
• Safe and private user experience using authentication and access control
• Optimized UX/UI for mobile and desktop users

• React
• React Router DOM
• Tailwind CSS + DaisyUI
• Swiper.js (for banners)
• React Toastify & SweetAlert2
• React Icons
• React Helmet (for dynamic page titles)

• Firebase Authentication (Email/Password + Google login)

• Node.js + Express.js
• MongoDB (Native Driver)
• JSON Web Token (JWT)

• Client: Firebase Hosting
• Server: Vercel

• 🔍 Smart Filtering: Browse roommate listings by rent, location, lifestyle habits, and more
• 🧾 Post Management: Add, update, and delete your own roommate listings
• ✅ Authenticated Access: Only logged-in users can post or edit listings
• 🎭 Dynamic Contact Reveal: Users must interact (like) to reveal contact info — adds privacy
• 🌙 Dark/Light Theme Toggle: Easily switch between light and dark modes
• 🧭 Interactive UI: Swiper slider banners, dynamic route titles, custom toast/alert feedback
• 📱 Fully Responsive: Optimized for mobile, tablet, and desktop
• 🔐 Secure Backend APIs: Protected routes using JWT; client uses Firebase-authenticated tokens
• ⚙️ Environment-based Config: API keys and secrets managed via .env files
• ❌ 404 Page + Loaders: Graceful handling of unknown routes and loading states

• react
• react-router-dom
• tailwindcss + daisyui
• swiper
• firebase
• react-toastify
• sweetalert2
• react-helmet
• react-icons
• react-tooltip
• react-awesome-reveal

• express
• cors
• dotenv
• mongodb
• jsonwebtoken
• cookie-parser

# Client
git clone https://github.com/redoy49/roommate-client.git

# Server
git clone https://github.com/redoy49/roommate-server.git

# Client
cd roommate-client
npm install

# Server
cd roommate-server
npm install

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_BACKEND_BASE_URL=https://your-vercel-server-url.com

PORT=5000
DB_USER=your_mongo_user
DB_PASS=your_mongo_pass
JWT_SECRET=your_jwt_secret
CLIENT_URL=https://roommate-finder-e1587.web.app

# Run Server
npm run dev

# Run Client
npm run dev

• 🔴 Live Website: https://roommate-finder-e1587.web.app
• 🟠 Client GitHub Repo: https://github.com/redoy49/roommate-finder
• 🟢 Server GitHub Repo: https://github.com/redoy49/roommate-finder-server

• 🔐 Store Firebase and MongoDB credentials securely using .env files
• ✅ Protect all private routes using Firebase Auth + JWT
• ✅ Provide user feedback using Toast and SweetAlert
• 🧠 Use Helmet for SEO-friendly dynamic titles
• ❌ Avoid placeholder content or generic UI messages

🐦 Twitter: @mdredoyhasan49
📧 Email: [email protected]