🏡 Property Dashboard (MERN Stack)

A full-stack property listing and favourites management system built using the MERN stack. Users can browse properties, save favourites, and manage them in real time.

---

🚀 Features

• 🔐 User Authentication (JWT based)
• 🏘️ View all available properties
• ⭐ Add properties to favourites
• ❌ Remove properties from favourites
• 📦 Backend-controlled property creation (no UI for adding properties)
• ⚡ UI updates for favourites

---

🧠 Important Design Decision

Properties are NOT created from the frontend UI.

• Properties are added manually through backend (API/Postman)
• You can, for now, use terminal to add properties for testing(server should be running)

curl -X POST http://localhost:8080/property/add \
  -H "Content-Type: application/json" \
  -d '{
    "propertyName": "Sunset Villa",
    "propertyLocation": "Kathmandu",
    "propertyPrice": 250000
  }'

• Frontend is read-only for properties
• Users (buyers) can:
  • View properties
  • Like (favourite) properties
  • Remove from favourites

This keeps:

• Business logic controlled
• No unauthorized property creation
• Cleaner UI

---

🛠️ Tech Stack

Frontend

• React (TypeScript)
• React Router
• Axios
• Tailwind CSS
• React Hot Toast
• Heroicons

Backend

• Node.js
• Express.js
• MongoDB + Mongoose
• JWT Authentication

---

📁 Folder Structure

client/
├── components/
├── pages/
├── lib/
└── ...

server/
├── controller/
├── model/
├── middleware/
├── routes/
└── ...

---

⚙️ Installation & Setup

1. Clone the repo

git clone <your-repo-url>

2. Install dependencies

Frontend:

cd client
npm install

Backend:

cd server
npm install

---

3. Environment Variables

Create .env in server folder (take .env.example for reference)

---

4. Run the app

Backend:

npm run dev

Frontend:

npm start

---

🔗 API Endpoints

Favourite Routes

• Add to favourite:

POST /favourite/add/:propertyId

• Get user's favourites:

GET /favourite/list

• Remove from favourite:

DELETE /favourite/remove/:propertyId

---

Property Routes

• Get all properties:

GET /property/list

• Add property (manual/admin use only):

POST /property/add

---

🧩 How It Works (Simple)

1. User logs in → JWT stored
2. Dashboard loads:
   • Fetch properties
   • Fetch favourites
3. When user clicks ⭐:
   • Sends propertyId to backend
   • Stored with userId
4. When user removes:
   • Deletes using favId
5. UI updates instantly (no reload needed)

---

⚠️ Known Limitations

• ❌ No UI for adding properties (intentional)
• ❌ No admin panel
• ❌ No image upload for properties

---

📌 Future Improvements

• Admin dashboard for property management
• Property images & details page
• Search & filters
• Pagination
• Role-based UI

---

👨‍💻 Author

Kunal Shrestha

---

📄 License

This project is for learning and personal use.