https://github.com/apolo-itnet/nest-buddy-client
Roommate Finder is a full-stack web application that helps users find compatible roommates based on location, budget, and lifestyle preferences. It features authentication, post creation, liking to reveal contact info, and a responsive UI with modern animations.
https://github.com/apolo-itnet/nest-buddy-client
expressjs firebase-auth mongodb nodejs react-router reactjs tailwindcss vercel
Last synced: 2 months ago
JSON representation
Roommate Finder is a full-stack web application that helps users find compatible roommates based on location, budget, and lifestyle preferences. It features authentication, post creation, liking to reveal contact info, and a responsive UI with modern animations.
- Host: GitHub
- URL: https://github.com/apolo-itnet/nest-buddy-client
- Owner: apolo-itnet
- Created: 2025-06-26T04:05:28.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-26T04:37:58.000Z (12 months ago)
- Last Synced: 2025-06-26T05:28:57.237Z (12 months ago)
- Topics: expressjs, firebase-auth, mongodb, nodejs, react-router, reactjs, tailwindcss, vercel
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏠 Roommate Finder
A modern full-stack platform to help individuals find compatible roommates based on location, budget, lifestyle preferences, and interests.
---
## 🌐 Live Links
🔗 **Live Website**: https://roommate-finder-8c107.web.app
🔗 **Client GitHub**: https://github.com/apolo-itnet/Nest-Buddy-Client.git
🔗 **Server GitHub**: https://github.com/apolo-itnet/Nest-Buddy-Server
---
## 🧪 How to Run Locally
> Make sure you have **Node.js**, **MongoDB**, and **npm** installed.
### 1. Clone & Run the Client
```bash
git clone https://github.com/your-username/roommate-finder-client.git
cd roommate-finder-client
npm install
npm run dev
```
### 2. Clone & Run the Server
```bash
git clone https://github.com/your-username/roommate-finder-server.git
cd roommate-finder-server
npm install
npm start
```
### 3. Setup .env Files
Set environment variables in both client and server based on the examples below:
**1. Client .env**
```
VITE_API_URL=http://localhost:5000
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_APP_ID=your_app_id
```
**2. Server .env**
```
PORT=5000
MONGODB_URI=mongodb+srv://:@cluster.mongodb.net/roommateDB
JWT_SECRET=your_secret_key
```
---
### ✨ Key Features
- 🔐 User Authentication : Email/password & Google login using Firebase Auth.
- 📝 Add/Edit/Delete Posts : Authenticated users can manage their own roommate listings.
- 📄 Browse Listings: See all active roommate requests in a searchable, filterable table.
- ❤️ Like & Reveal: Like posts to reveal the contact info (disabled for own posts).
- 🌙 Theme Toggle: Smooth switch between light & dark themes.
- 🎨 Modern UI: TailwindCSS + DaisyUI powered responsive UI for all devices.
- 🔒 Protected Routes: Only logged-in users can access certain pages.
- 🔥 Real-time Feedback: Success and error messages via Toast & SweetAlert.
- 💬 Lottie & Typewriter Effects: For a more engaging UI.
- 🧭 404 & Loader States: Custom not-found and loading pages for better UX.
---
### 📦 Installed Packages
Client:
Server:
---
### 🔐 Environment Variables
**
Client:
**```
VITE_FIREBASE_API_KEY=your-key
VITE_FIREBASE_AUTH_DOMAIN=your-domain
```
**
Server:
**```
DB_USER=yourMongoUser
DB_PASS=yourMongoPass
```
---
### 🚀 Notable Routes
| Route | Description | Protected |
| --------------------- | ------------------------------------ | --------- |
| `/` | Home Page with hero slider | ❌ |
| `/login`, `/register` | Auth pages | ❌ |
| `/add-roommate` | Add new listing | ✅ |
| `/my-listings` | View & manage own listings | ✅ |
| `/details/:id` | Roommate post detail view | ✅ |
| `/like/:id` | Like functionality with reveal logic | ✅ |
---
### ✏️ CRUD Features
**✅ Create** : Add a new roommate post.
**✅ Read** : View all public posts & individual details.
**✅ Update** : Edit own posts only.
**✅ Delete** : Delete your own roommate listing.
---
### 📝 Extra Notes
- Users **cannot like** their own posts.
- **Contact numbers reveal** only after liking a post.
- Proper routing ensures **no page refresh issues.**
- **Password validations** include uppercase, symbol, and length checks.
---
### 💡 Inspiration
This project was inspired by real-world roommate-finding struggles.
The goal was to create a clean, secure, and efficient platform that helps people quickly connect with compatible roommates.
---
### 📬 Submission
This project is submitted as part of Assignment-10 of the MERN Stack Developer Course.
---
### 👨💻 Developer Info
**Apolo Barua Apurbo**
💼 MERN Stack Web Developer
📧 **Email**: apolo.itnet@gmail.com.com
📍 **Location**: Bangladesh