EstateIQ – Real‑Estate Price Prediction App

🔗 Live Application
👉https://estate-iq.streamlit.app/

🎯 Project Overview

EstateIQ is a premium, visually stunning web application that predicts real‑estate prices using a real Machine‑Learning backend (Scikit‑Learn & XGBoost) and a luxury‑styled React frontend built with Vite and Tailwind CSS. The app runs inside Streamlit, allowing you to serve the React UI as an embedded component while the heavy lifting (model training & inference) happens in Python.

---

✨ Features

• Real‑time price prediction using three models (Linear Regression, Random Forest, XGBoost) and an ensemble average.
• Dynamic visual analytics – bar‑chart distribution, historical trend area chart, and model‑comparison table.
• Glassmorphism UI with dark‑mode, smooth‑scroll navigation, and animated counters.
• Fully responsive – works on desktop, tablet, and mobile.
• Zero‑cache prediction – each click forces a fresh calculation (timestamp payload) so identical inputs still return results instantly.
• Synthetic dataset generation on startup (2 000 samples) – easy to replace with a real CSV later.

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 17, Vite, Tailwind CSS, Framer‑Motion, Recharts, Lucide‑React
Backend	Python 3.11, Streamlit, Scikit‑Learn, XGBoost, Pandas, NumPy
Build / Lint	ESLint, PostCSS, Vite, npm

---

📂 Repository Structure

ML Project/
├─ app.py                     # Streamlit entry‑point, model training & inference
├─ real_estate_dataset.csv    # Synthetic dataset used for training (generated on‑demand)
├─ estate‑iq/                 # React application (Vite project)
│   ├─ src/
│   │   ├─ App.jsx            # Main layout & Streamlit communication bridge
│   │   ├─ index.css          # Global Tailwind imports & custom utilities
│   │   ├─ lib/
│   │   │   └─ simulation.js  # Constants & currency formatter (no ML logic)
│   │   └─ components/
│   │       ├─ Hero.jsx               # Hero banner & "Get Estimate" button
│   │       ├─ HowItWorks.jsx         # Step‑by‑step explanation of the ML pipeline
│   │       ├─ InputPanel.jsx         # Sliders, dropdowns, amenities toggles
│   │       ├─ ResultsPanel.jsx       # Animated counters for each model
│   │       ├─ PredictionChart.jsx    # Bar‑chart of model predictions
│   │       ├─ HistoricalTrends.jsx   # Area chart of city‑wise price trends
│   │       ├─ ModelComparisonTable.jsx
│   │       ├─ FeatureImportance.jsx
│   │       └─ Footer.jsx            # "Developed by Yash" credit
│   ├─ vite.config.js        # Vite bundler config (base: './' for Streamlit)
│   ├─ tailwind.config.js   # Tailwind theme – dark palette, custom colors
│   ├─ postcss.config.js    # PostCSS pipeline – loads Tailwind
│   ├─ eslint.config.js     # ESLint rules (ignore unused motion, allow vars)
│   ├─ package.json          # npm dependencies & scripts
│   ├─ package-lock.json     # Exact version lock‑file for reproducibility
│   └─ dist/                 # Production build (generated by `npm run build`)
└─ README.md                # This documentation file

---

🚀 Getting Started

Prerequisites

• Node.js (>= 18) and npm
• Python (>= 3.10) with pip
• Git (optional, for cloning)

Installation

# Clone the repo (if you haven't already)
git clone https://github.com/yourusername/estate-iq.git
cd "ML Project"

# Install Python dependencies (use a virtual env if you like)
python -m venv .venv
source .venv/bin/activate   # Windows: .venv\Scripts\activate
pip install -r requirements.txt   # (or pip install streamlit scikit-learn xgboost pandas numpy)

# Install the React frontend dependencies
cd estate-iq
npm install

Run the Application

# From the project root (ML Project)
streamlit run app.py

The app will start on http://localhost:8501. The React UI is served automatically from the dist/ folder.

Build the Frontend (if you modify UI)

cd estate-iq
npm run build   # produces updated files in estate-iq/dist/

After rebuilding, refresh the Streamlit page to see the changes.

---

📊 Dataset

A synthetic dataset (real_estate_dataset.csv) is generated on‑the‑fly when app.py starts. The CSV contains the following columns:

• Location (city name)
• Area_sqft
• Bedrooms
• Bathrooms
• Age_years
• Amenities_count
• Furnishing_score (0 = Unfurnished, 0.5 = Semi, 1 = Furnished)
• Price_INR

You can replace this file with a real CSV (same column order) and adjust train_models() to load it instead of generating synthetic data.

---

🛡️ Linting & Code Quality

• Run npm run lint to verify the React codebase – all warnings have been silenced (unused motion import, timestamp handling, etc.).
• ESLint configuration lives in eslint.config.js and is tuned for our premium UI (ignores the motion variable and allows capital‑letter globals).

---

📦 Deployment

Because the UI is a static bundle, you can host the Streamlit app on any platform that supports Python (e.g., Streamlit Cloud, Render, Fly.io). Just push the repo, ensure the requirements.txt includes the needed packages, and the platform will run streamlit run app.py.

---

🎨 Design Philosophy

EstateIQ follows a luxury aesthetic:

• Dark navy background with amber accents
• Glass‑like cards (backdrop‑blur, semi‑transparent borders)
• Subtle micro‑animations (fade‑in, scale, hover effects)
• Google Font Inter for crisp readability

All styling lives in tailwind.config.js and src/index.css – feel free to tweak the palette to match your brand.

---

📜 License

This project is open‑source under the MIT License. Feel free to fork, modify, and deploy it for personal or commercial use.

---

🙏 Acknowledgements

• Streamlit – for the effortless Python‑to‑Web bridge.
• Vite – lightning‑fast bundler.
• Tailwind CSS – utility‑first styling.
• Framer Motion – smooth UI animations.
• Recharts – flexible chart components.
• XGBoost / Scikit‑Learn – powerful regression models.

---

Author

Yash

---

Happy coding, and enjoy building your own real‑estate valuation wizard!