RPI Housing Scout

(Hopefully) A better version of the RPI off campus housing website (https://rpi.offcampustech.com/)

Comment

RPI Housing Scout

Inspiration

Every fall, thousands of RPI students face the same stressful question: where should I live next year? The official off-campus housing portal is a basic list — no map, no crime data, no way to compare walkability or nearby food. Students end up with 15 browser tabs open, cross-referencing Google Maps, Reddit threads about "safe neighborhoods in Troy," and scattered Zillow links from friends.

We wanted to build the tool we wished we had as freshmen — a single, interactive map that answers: "Is this place affordable, safe, and close to campus?" in one glance.

What it does

RPI Housing Scout is a Google Maps-powered housing search tool that scrapes real listings from the official RPI Off-Campus Housing database and plots them on an interactive map with layered intelligence:

  • 93 real geocoded listings from rpi.offcampustech.com, each pinned to its exact address via the Google Maps Geocoding API
  • Crime heatmap overlay — ~180 data points rendered as an organic heat-gradient layer across Troy, showing crime intensity from yellow (low) to deep red (high). Students can instantly see which neighborhoods to approach with caution
  • Walking distance rings — Color-coded concentric circles from campus (green = <10 min, yellow = 10–20 min, red = >20 min)
  • Live food/grocery overlay — Pulls nearby restaurants and stores in real-time via the Google Places API
  • Smart filtering — Filter by price range, bedrooms, bathrooms, max walk time, parking, pets, furnished, A/C, and availability
  • Shortlist system — Mark any property as 🟢 Top Pick, 🟡 Maybe, or 🔴 Avoid, all persisted in localStorage
  • Autocomplete search — Google Places autocomplete to jump to any address on the map
  • Custom place addition — Found a listing on Craigslist or Facebook? Add it manually with a blue-outlined custom pin
  • Data source selector — A dropdown with RPI Official Housing enabled, and Zillow & Apartments.com integrations coming soon

My partner has also built a parallel version with NLP-powered natural language search (e.g., "find me a 2-bedroom under $900 near campus with parking"), and we plan to integrate both versions into a unified platform.

How we built it

Frontend: React 18 + Vite 6 for the SPA, styled with Tailwind CSS v4. The map is powered by @vis.gl/react-google-maps (Google's official React wrapper), using AdvancedMarker for custom pin styling and HeatmapLayer from the Visualization library for the crime overlay.

Data pipeline: We wrote a Puppeteer-based scraper (scrape.js) that navigates the Firebase-backed RPI housing portal, extracts every listing's address, then batch-geocodes them through the Google Maps Geocoding API. The result is a clean JSON file with lat/lng coordinates, pricing, bedroom counts, amenities, and more.

Crime data: Since Troy PD doesn't offer a public API, we generated ~180 weighted incident points based on publicly reported crime patterns across Troy neighborhoods. These feed into Google Maps' native HeatmapLayer, producing smooth, organic heat blobs instead of crude rectangles.

State management: Custom React hooks (useProperties, useShortlist, useOverlays) manage filtering, shortlisting (persisted to localStorage), and overlay toggling. The addCustomProperty flow lets users inject manual entries into the same state pipeline.

Architecture highlights:

  • Autocomplete via google.maps.places.Autocomplete for both the search bar and the custom place modal
  • Dynamic marker styling based on shortlist status (source: "custom" triggers a distinct blue outline)
  • Responsive sidebar with collapsible sections and a persistent shortlist panel

Challenges we ran into

  1. Scraping a Firebase SPA — The RPI housing site is a React app backed by Firestore. Traditional HTTP scraping returned empty HTML. We had to use Puppeteer with waitUntil: 'domcontentloaded' plus a manual delay to let Firebase hydrate the DOM before extracting data.

  2. Geocoding accuracy — Some addresses from the housing portal were informal (e.g., "Near ECAV" or missing zip codes). We had to normalize addresses and add Troy, NY context to the geocoding queries to get reliable lat/lng results.

  3. Google Maps library loading order — The visualization library (needed for HeatmapLayer) must be loaded before the component mounts. React's async rendering meant we had to guard every overlay hook with window.google?.maps?.visualization checks to prevent crashes.

  4. Dropdown clipping — Our "Load Properties" dropdown was initially clipped by the header's overflow-hidden. Debugging this required removing the overflow constraint and carefully managing z-index stacking across the header, sidebar, and map layers.

  5. Crime data sourcing — Troy doesn't publish geocoded crime data publicly. We researched neighborhood-level crime patterns from public reports and news to build a realistic weighted point dataset, then validated the heatmap output against known hotspots.

Accomplishments that we're proud of

  • Real data, not mockups — Every single one of the 93 listings is scraped from the actual RPI housing database and geocoded to its real address. This isn't a prototype with fake pins.
  • The crime heatmap — Going from ugly square polygons to a beautiful, organic Google Maps HeatmapLayer with a custom yellow→red gradient was a satisfying evolution. It genuinely looks like a professional mapping product.
  • End-to-end in one session — We went from an empty Vite scaffold to a fully functional, data-driven housing tool with scraping, geocoding, overlays, filtering, shortlisting, search, and custom place addition.
  • The golden header + data source dropdown — A small design touch, but the centered gold title and the "Coming Soon" locked entries for Zillow/Apartments.com make the tool feel like a real product with a roadmap, not a hackathon throwaway.
  • Two parallel tracks — While this version focuses on the map-centric visual experience, our partner independently built an NLP-powered version. The fact that both can converge into one platform speaks to a solid shared vision.

What we learned

Primarily, it's near impossible to collaborate on vibe coding projects.

  • Google Maps APIs are incredibly deep — Between Places, Geocoding, Visualization (HeatmapLayer), and AdvancedMarker, there's a massive surface area. Learning to compose them in React taught us a lot about async library loading and lifecycle management.
  • Scraping !== easy — Modern SPAs (especially Firebase-backed ones) require headless browser approaches. We learned the nuances of Puppeteer's wait strategies and how to handle DOM hydration timing.
  • Design matters for utility tools — Our first iteration was functional but ugly. Adding the gold title, proper spacing, gradient buttons, and glassmorphism effects transformed user perception from "homework project" to "I'd actually use this."
  • Crime data is surprisingly hard to get — Public safety data transparency varies wildly by municipality. Troy is one of many cities where students have to rely on informal knowledge rather than open datasets.

What's next for RPI Housing Scout

  • NLP integration — Our partner's NLP-powered version supports natural language queries like "cheap 2BR near campus with parking." We plan to merge it with the map interface so users can type naturally and see results highlighted on the map in real-time.
  • Zillow & Apartments.com scraping — The dropdown already has placeholder entries. We'll add scrapers for these platforms to dramatically expand the listing pool beyond the official RPI database.
  • Real-time crime feed — We're exploring FOIL requests to Troy PD and integration with CrimeMapping/SpotCrime APIs to replace our static dataset with live incident data.
  • Isochrone maps — Replace the static distance circles with road-aware walking isochrones (via Mapbox or TravelTime API) that follow actual streets rather than drawing perfect circles.
  • User accounts & cloud sync — Move shortlists from localStorage to a backend (Firebase or Supabase) so students can access their picks across devices and share lists with roommates.
  • Roommate matching — Integrate with a roommate-matching system so students can find both a home and housemates in one place.
  • Mobile app — Wrap the PWA in a native shell so students can browse housing on the go during campus tours or apartment visits.

Built With

Share this project:

Updates