Labels

Homes Connect: A Real Estate Platform Built with MERN Stack

How I built a responsive, full-stack property listing platform using React, Node.js, Express, MongoDB, and Tailwind CSS.

🏠 Project Overview

Homes Connect is a real estate web application that allows landlords to list properties for rent or sale, and buyers to search, view, and contact the owners directly. The goal was to build a user-friendly platform where property management could be simplified without relying on third-party brokers.

Tech Stack:

  • Frontend: ReactJS, Tailwind CSS, React Router
  • Backend: Node.js, Express.js
  • Database: MongoDB (via Mongoose)
  • Authentication: JWT + Google OAuth

🌟 Key Features

  • 🔐 Secure login system using JWT and Google OAuth
  • 📦 CRUD functionality for listings (Create, Read, Update, Delete)
  • 🔍 Search functionality to filter listings by type, price, and location
  • 🧭 Navigation with React Router DOM
  • 📱 Fully responsive UI with Tailwind CSS

🧩 Frontend Highlights

I built the UI using ReactJS and styled it using Tailwind CSS for a clean, modern design. Navigation across pages such as "Home", "Login", "Add Listing", and "Contact Owner" is handled smoothly using React Router DOM.

Components include:

  • ListingCard: For displaying individual properties
  • SearchBar: With dynamic filtering logic
  • ContactForm: Sends messages directly to landlords

🔐 Authentication & Authorization

Authentication was implemented using a combination of JWT and Google OAuth. This allows users to log in using their Google accounts or standard email-password flow.

Admin Functions: Only listing owners can update or delete their property details. All protected routes are guarded on the client and server side.

🧠 Backend Overview

The Express backend exposes RESTful API routes such as:

POST   /api/listings
GET    /api/listings
GET    /api/listings/:id
PATCH  /api/listings/:id
DELETE /api/listings/:id

Middleware used:

  • express-validator for validating form data
  • jsonwebtoken for decoding and verifying user tokens
  • multer for future support of image uploads

📊 Database Schema (MongoDB)

Each listing document contains:

  • title: String
  • description: String
  • price: Number
  • address: String
  • listedBy: User ID reference
  • timestamp: Date

🧪 Testing & Deployment

I used Postman to test backend routes during development. For deployment, I used:

  • Render.com for backend hosting
  • Render static site hosting for React frontend

Live Link: homes-connect.onrender.com

📚 What I Learned

  • How to integrate full-stack authentication securely
  • Designing and validating dynamic search filters
  • Using Tailwind CSS to build a mobile-friendly interface quickly
  • Importance of backend error handling and response consistency

🚀 Future Enhancements

  • 🖼️ Add image upload support for listings
  • 📱 Build a mobile app version using React Native
  • 📍 Integrate Google Maps for location view

🔗 Project Links

👨‍💻 About Me

I'm Rhythm, a final-year B.Tech student at NSUT, passionate about solving real-world problems through web development. I enjoy building full-stack apps and exploring clean UI/UX with strong backend logic.

Let’s connect on LinkedIn or explore more on GitHub.

Labels:

Comments

Post a Comment

Popular Posts