ROOMLY - A Roommate Finder Web App

Live website: https://roomly-app.netlify.app

About ROOMLY

Roomly is a modern web application for finding and listing roommates and rooms, designed for trust, privacy, and real connections. Built with React, React Router, Tailwind CSS, DaisyUI, Firebase, Express, and MongoDB. Roomly offers a seamless, professional, and accessible experience for users seeking safe and compatible living arrangements.

Related Repositories

• Client-side: Roomly Client Side Repo
• Server-side: Roomly Server Side Repo

Key Features

• Browse and search roommate/room listings
• Add, edit, delete, and manage your own listings
• Like listings to reveal contact details
• Responsive, modern UI with light/dark theme toggle
• Professional homepage with animated hero slider
• Accessible, mobile-friendly navigation and layout
• Secure authentication (Sign Up, Sign In, Google Auth)
• User profile dropdown and session management
• Animated title & subtitle, error handling, and smooth transitions

Tech Stack

• React (Vite)
• Tailwind CSS & DaisyUI
• Firebase Authentication
• React Router
• Swiper.js (Slider)
• SweetAlert2, React Hot Toast (feedback)
• Express (API integration)
• MongoDB (API integration)
• Lottie React
• React-simple-typewriter
• React Awesome Reveal
• CORS (middleware, API)

Getting Started

1. Clone the repository:

   git clone https://github.com/omarfaruk-dev/roomly-client.git
   cd roomly-client

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open in your browser: Visit http://localhost:5173

Install Required Packages

npm install react-router
npm install tailwindcss @tailwindcss/vite
npm install firebase
npm install swiper
npm install react-hot-toast
npm install sweetalert2
npm install react-icons
npm install lottie-react
npm install react-simple-typewriter
npm install react-awesome-reveal

Project Structure

• src/components/ – UI components (NavBar, Footer, HeroSlider, etc.)
• src/pages/ – Main pages (Home, SignIn, SignUp, RoommateDetails, etc.)
• src/context/ – Auth context and provider
• src/assets/ – Images and static assets
• src/firebase/ – Firebase config

Customization

• Update branding, colors, and logo in tailwind.config.js and /public/
• Edit homepage sections in src/pages/Home.jsx
• Adjust authentication logic in src/context/AuthProvider.jsx

License

This project is for educational/demo purposes. All rights reserved.

---

Contact

For collaboration or suggestions:

• GitHub
• LinkedIn