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 propertiesSearchBar
: With dynamic filtering logicContactForm
: 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 datajsonwebtoken
for decoding and verifying user tokensmulter
for future support of image uploads
π Database Schema (MongoDB)
Each listing document contains:
title
: Stringdescription
: Stringprice
: Numberaddress
: StringlistedBy
: User ID referencetimestamp
: 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
- Live Site: homes-connect.onrender.com
- GitHub Repo: github.com/rhythm217/Homes-Connect
π¨βπ» 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.
So useful
ReplyDeletethis is really helpfull !!!
ReplyDeleteSuper impressive, Rhythm!
ReplyDelete