🏠 BRICKnCLICK

A full-stack real-estate marketplace built on the MERN stack. List properties for sale or rent, browse and filter the catalogue, save favourites, pay through Stripe Checkout, and explore market insights with interactive charts — all in a responsive interface with light and dark themes.

Live Demo — BRICK-HIVE

BRICK-HIVE is the enhanced, deployed evolution of BRICKnCLICK, featuring Stripe payments, purchase history, dark mode and a refreshed UI.

---

Features

Authentication

• Email + password sign-up and sign-in with bcryptjs hashing
• Google Sign-In via Firebase, with a guided /complete-signup step that collects a phone number for first-time Google users
• Stateless JWT sessions (7-day expiry) plus PrivateRoute protection

Property Listings

• Create, edit, delete and view listings, each owned by its author
• Up to 6 images per listing uploaded to Cloudinary with automatic resizing
• Rich attributes: rent/sell type, price, discount price, bedrooms, bathrooms, furnished, parking, offer flag and address
• Automatic view counting, and a lifecycle status (available → sold / rented) shown as an on-card badge

Search & Discovery

• URL-synced live search — every filter change updates the query string, so any result set is shareable and bookmarkable
• Filter by keyword, type, parking, furnished and offers; sort by price or date, with pagination support and a latest-listings home feed

Favourites

• One-tap heart toggle on cards and detail pages, with optimistic updates and automatic rollback on failure, saved per user on a dedicated page

Payments

• Stripe Checkout — "Buy Now" creates an order and redirects to Stripe's hosted payment page
• A signature-verified webhook is the source of truth; paid amounts are checked against the order, and success flips the listing to sold or rented
• Success page polls until the order is final; the cancel page releases it
• My Purchases lists completed orders with amount, order and transaction ids

Analytics Dashboard

• Top Listings — bar chart of your most-viewed properties
• Price Distribution — doughnut charts bucketing rent and sale prices
• Amenities — parking, offers, furnished, rent and sale counts compared, and every chart is theme-aware, recolouring itself in dark mode

Notifications & UI

• Per-user notification feed with read/unread state and Socket.IO wiring for live in-app delivery during local development
• Tailwind CSS v4 with a persisted light/dark theme that respects the OS preference
• Framer Motion transitions, Swiper galleries, toast feedback and a custom 404 page

Tech Stack

Layer	Technologies
Frontend	React 19, Vite 6, React Router 7, Redux Toolkit + redux-persist, Tailwind CSS 4, Framer Motion, Chart.js, Swiper, react-hot-toast, Axios
Backend	Node.js, Express 5, Mongoose 8, Socket.IO
Database	MongoDB
Auth	JSON Web Tokens, bcryptjs, Firebase Authentication (Google)
Media	Cloudinary + Multer (multer-storage-cloudinary)
Payments	Stripe Checkout + Webhooks
Deployment	Vercel (static client build + serverless API)

Project Structure

api/                 # Express backend
├── config/          # Cloudinary + listing-image storage
├── controllers/     # auth, user, listing, favourites, payment, notifications
├── middleware/      # JWT verification, avatar upload
├── models/          # User, Listing, Payment, Notification schemas
├── routes/          # REST route definitions
└── index.js         # Entry point, CORS, webhook mount, Socket.IO server
client/src/          # React + Vite frontend
├── components/      # Header, ListingItem, charts, dialogs, route guards
├── context/         # ThemeContext (light/dark)
├── pages/           # Home, Search, Listing, Profile, Analytics, payments…
└── redux/           # Store + user and favourites slices
vercel.json          # Static build + serverless routing

⚙️ Getting Started

Prerequisites: Node.js 18+, a MongoDB database (local or Atlas), and Cloudinary, Firebase and Stripe accounts.

1. Clone and install

git clone https://github.com/zohaibfast99/BRICKnCLICK.git
cd BRICKnCLICK

npm install                        # backend dependencies
cd client && npm install && cd ..  # frontend dependencies

2. Configure the backend — .env in the project root

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
PORT=3000
CLIENT_URL=http://localhost:5173

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
STRIPE_CURRENCY=PKR

3. Configure the frontend — client/.env

VITE_FIREBASE_API_KEY=your_firebase_web_api_key

4. Run both servers

npm run dev                # API + Socket.IO on http://localhost:3000
cd client && npm run dev   # Vite dev server on http://localhost:5173

Vite proxies /api to http://localhost:3000, so the client needs no base URL. To exercise payments locally, forward Stripe events and copy the printed whsec_… value into STRIPE_WEBHOOK_SECRET:

stripe listen --forward-to localhost:3000/api/payments/webhook

API Reference

Method	Endpoint	Auth	Description
POST	/api/auth/signup · /signin	–	Register, or sign in for a JWT
POST	/api/auth/google	–	Google sign-in / sign-up
PUT · DELETE	/api/user/update · /delete	✅	Update username, password or avatar; delete the account
GET	/api/user/:id	✅	Public contact details for a listing owner
GET	/api/user/listings/:id	✅	The signed-in user's own properties
POST	/api/listings/upload-images	✅	Upload up to 6 images to Cloudinary
POST	/api/listings/create	✅	Create a listing
POST · DELETE	/api/listings/editListing/:id · /delete/:id	✅	Update or delete an owned listing
GET	/api/listings/get/:id	✅	Fetch one listing (increments views)
GET	/api/listings/get	–	Search, filter, sort and paginate listings
GET	/api/listings/top	✅	Your five most-viewed listings
GET	/api/favorites	✅	List saved listings
POST · DELETE	/api/favorites/:listingId	✅	Save or remove a favourite
POST	/api/payments/initiate	✅	Create an order and Checkout session
POST	/api/payments/webhook	–	Stripe callback (signature verified)
GET · POST	/api/payments/order/:orderId · /cancel/:orderId	✅	Poll or cancel an order
GET	/api/payments/my	✅	Completed purchases
GET · PUT	/api/notifications/:userId · /mark-read/:notifId	–	Fetch notifications, mark one read

☁️ Deployment

vercel.json builds client/ as a static bundle and runs api/index.js as a serverless function, routing /api/* to the API and everything else to the SPA. Set every variable from steps 2–3 in the Vercel project settings, point CLIENT_URL at the deployed domain, and register https://<your-domain>/api/payments/webhook as a Stripe webhook endpoint.

📜 Scripts

• root — npm run dev (API with nodemon) · npm start (API with node)
• client/ — npm run dev · npm run build · npm run preview · npm run lint

👥 Contributors & License

Built as a collaborative MERN project by the BRICKnCLICK team. Released under the ISC license.