F-027: Listing Comparison Tool

Status: Proposed · Priority: P2 · Updated: Mar 6, 2026

Summary

Allow users to select up to 4 listings and compare them side-by-side. Common on real estate platforms (Zillow, Realtor.ca). Helps users decide between shortlisted apartments.

Requirements

• [ ] "Compare" checkbox/button on listing cards
• [ ] Floating comparison bar at bottom when 2+ items selected (shows thumbnails, count)
• [ ] Side-by-side comparison page with all key attributes
• [ ] Comparison attributes: price, bedrooms, bathrooms, size, amenities, neighborhood, price rating, transit/walk scores
• [ ] Shareable comparison URL (listing IDs in query params)
• [ ] Max 4 listings in comparison
• [ ] Persist selection in localStorage (survives page navigation)
• [ ] Bilingual (FR/EN) translations
• [ ] Mobile-friendly (horizontal scroll or stacked layout)

Design

State Management

• React context (ComparisonContext) with localStorage persistence
• Actions: add, remove, clear, isInComparison
• Floating bar component rendered in layout

Comparison Page

Route: /compare?ids=1,2,3,4

Table/grid layout:

Attribute	Listing 1	Listing 2	Listing 3	Listing 4
Photo	thumb	thumb	thumb	thumb
Price	$1,200	$1,450	...	...
Bedrooms	2	3	...	...
...	...	...	...	...

Highlight best value per row (lowest price, most bedrooms, etc.)

API

No new endpoints needed — fetch individual listings by ID (already have /listings/:id). Could add batch endpoint /listings/batch?ids=1,2,3 for efficiency.

Discussion Notes

Mar 6, 2026 — Proposed. Medium-high impact, small-medium effort. Pure frontend feature with optional batch API endpoint. Good UX improvement for serious apartment hunters.

Implementation Notes

To be filled during implementation.