Rent Radar is an interactive, multi-city web-based real estate and property dashboard designed to help users visualize rental prices, property distributions, and job growth metrics across 8 major Indian cities.

Built using a highly optimized frontend architecture emphasizing performance, deep insights, and an immersive Cyberpunk / Dark Mode map interface.

• Interactive Leaflet Map: Powered by Leaflet.js using CartoDB's sleek "Dark Matter" tiles.
• Rents & Property Pricing Visualization:
  • Markers Mode: Clickable markers showing precise rent/price estimates alongside configurations (BHK) and area details.
  • Heatmap Mode: A dense heatmap (using Leaflet.heat) visually demonstrating regions with the highest rent density.
• Advanced Search & Filtering:
  • Dynamic Price Filtering: Allows narrowing down properties to specialized constraints (e.g. Under ₹50k, ₹50k-₹1L, etc.)
  • Area Size Filtering: Filter properties by their square footage constraint.
  • Locality Search: Type to instantly filter markers and heat density on the map instead of just navigating to the coordinates.
• Deep Google Charts Integration: Dynamic side-panel populated with data aggregated straight from the parsed CSV:
  • Top expensive localities (Bar Chart)
  • Job Growth distribution (Pie Chart)
• On-the-fly Data Parsing: Replaces bulky backend servers with PapaParse to stream and parse a massive CSV (_All_Cities_Cleaned.csv) directly in the browser. The frontend remains light, agile, and free to host.
• Premium UI Aesthetic: Enhanced glassmorphism elements, gradient-driven visual indicators, and a unified dark mode layout for minimal eye strain.

1. Initial Boot & CSV Streaming: When the application loads, PapaParse streams _All_Cities_Cleaned.csv chunk-by-chunk. It creates a dictionary mapping each city to its respective properties and pre-calculates spatial coordinates.
2. State Management (cityData & filteredData): Once loaded, the user selects a city. The system transfers the specific city's records into a primary state object.
3. Dynamic Filtering Layer: When a user changes the Price Filter, Area Filter, or inputs text in the Search Bar, the applyFilters() function triggers. This generates a subset filteredData array containing only the matching properties.
4. Reactive Rendering Sequence:
   • Metrics UI: Averages and counts are instantly recalculated from the filteredData.
   • Map Layers (Leaflet): Old heatmap and marker layers are wiped. New heatmap gradients and colored markers are rendered based on the dynamic minimum and maximum price distributions of the current filter.
   • Data Visualization (Google Charts): The google.visualization instances are destroyed and redrawn using the new subset of data.

• Frontend Core: Vanilla HTML5, CSS3, JavaScript (ES5/ES6)
• Mapping Engine: Leaflet.js (Open-source interactive maps)
• Data Visualization: Google Charts (Corechart packages)
• Data Streaming / Parser: PapaParse.js (In-browser CSV parsing)
• Heatmap Plugin: Leaflet.heat (Canvas-based heat mapping)
• Hosting & Deployment: Firebase Hosting (Google Cloud Firebase)

Because the website fetches a local CSV file (_All_Cities_Cleaned.csv) using AJAX/Fetch mechanics via PapaParse, you cannot simply double-click index.html. You must serve the directory using a local web server to avoid CORS/filesystem protocol errors.

Using Python (Recommended): Open your terminal in the project directory where index.html resides and run:

python -m http.server 5500

Then head to http://127.0.0.1:5500 in your browser.

Using VS Code:

• Install the "Live Server" extension.
• Right-click index.html and click "Open with Live Server".

This project assumes you will be hosting it entirely for free on Firebase Hosting.

1. Install Firebase CLI:

   npm install -g firebase-tools

2. Login:

   firebase login

3. Initialize: Navigate into the exact project directory and run:

   firebase init hosting

   When prompted:
   • Choose your existing Firebase Project (or create one).
   • What do you want to use as your public directory? Enter . (a single period to denote the current folder).
   • Configure as a single-page app? No
   • Set up automatic builds and deploys with GitHub? No
   • Overwrite index.html? No (Very important! Don't overwrite it!)
4. Deploy:

   firebase deploy --only hosting

   Your app will immediately be available globally via the .web.app URL provided by the Firebase CLI!