🏨 Roommate.Finder Website

Roommate.Finder is a modern web app that streamlines the process of finding roommates and shared housing. Users can easily post and browse listings, connect with potential roommates, and manage shared living—all within a secure and intuitive interface. Built with React.js, Express, and Firebase, it ensures fast performance, real-time updates, and a smooth user experience.

📍 Live Site: Roommate.Finder Live Link

---

🚀 Main Features

🔍 Explore Listings

• Browse available roommate listings by:
  • Location, rent range, availability date
  • Lifestyle preferences (e.g., smoker/non-smoker, gender)
  • Room/property type (single, shared, apartment, etc.)

🔒 Secure Matching & Contact System

• Firebase Authentication for secure sign-up/sign-in
• Users can bookmark favorite listings
• Real-time updates when listings are added or modified

📝 Roommate Post Management

• Users can add, edit, and delete their own roommate posts
• Update listing details including rent, location, room type, and availability
• Like system to show popular listings

👤 Personalized Dashboard

• View and manage:
  • Your listings
  • Favorite/bookmarked posts
  • Edit/Delete your own posts only

🎨 Rich & Interactive UI

• Responsive, mobile-first design
• DaisyUI and Tailwind CSS for styling
• Smooth animations with Framer Motion
• Toast notifications for actions
• SweetAlert2 for confirmation modals

---

⚙️ Tech Stack

🔧 Frontend

• React.js with Vite
• Tailwind CSS + DaisyUI
• Framer Motion for animation
• Firebase Hosting for deployment
• React Router for route management
• SweetAlert2, Toastify for UI alerts

🧰 Backend & Auth

• Firebase Authentication
• Firebase Firestore for data storage

---

📦 Dependencies

• @tailwindcss/vite
• axios
• firebase
• framer-motion
• lottie-react
• react
• react-datepicker
• react-dom
• react-icons
• react-lottie
• react-router
• react-simple-typewriter
• react-toastify
• sweetalert2
• swiper
• tailwindcss

---

🖥️ Local Setup Guide

📁 Clone the repository on terminal or bash

• git clone https://github.com/MdNurulIslam99/prime-lodge-bookify-client-side.git
• cd created own folder name

📦 Install dependencies on terminal or bash

• npm install

🔐 Setup environment

• Create a .env file in the root and add your Firebase config:

• VITE_API_KEY=your_api_key

• VITE_AUTH_DOMAIN=your_auth_domain

• VITE_PROJECT_ID=your_project_id

• VITE_STORAGE_BUCKET=your_storage_bucket

• VITE_MESSAGING_SENDER_ID=your_messaging_sender_id

• VITE_APP_ID=your_app_id

▶️ Run the frontend app

• npm run dev

🖥️ Run the backend (if in separate repo)

• cd created own folder name
• npm install
• npm run dev
• nodemon index.js

🔗 Useful Links

🔴 Live Site: https://modern-hotel-bookings.web.app/

🟡 Client Repository: https://github.com/MdNurulIslam99/Roommate-Finder-client-side/tree/main

🔵 Server Repository: https://github.com/MdNurulIslam99/Roommate-Finder-server-side