HomeWay

Find the perfect house and build a personalized mortgage plan based on your income, expenses, and family needs.

Comment

Inspiration

Canada's housing market is one of the most stressful in the world for Canada's youth and first-time buyers. We watched friends and family spend weeks bouncing between mortgage calculators, listing sites, neighbourhood research tabs, and spreadsheets only to still feel uncertain. We wanted to build something that actually thinks with you, not just shows you data. The idea of a buyer persona that evolves as you ask questions, shaping both the AI's voice and its advice, was the core insight that made HomeWay feel different.

What it does

HomeWay is an AI-powered real estate platform for Canadian home buyers. You explore live property listings on an interactive Mapbox map, filtered by city and budget. When you find a property you're interested in, you open the AI advisor and it speaks to you in a synthesized voice that morphs in real time based on what you care about. Ask about schools and the voice becomes warm and nurturing. Ask about ROI and it becomes crisp and analytical. Your buyer persona is a live breakdown of Family, Finance, Community, and Investment priorities as it updates with every question and is visible throughout the app. HomeWay also includes a budget planner with AI-generated PDF reports, a property comparison tool, and a mortgage advisor.

How we built it

Frontend: Next.js 16 + React 19 + TypeScript, styled with Tailwind v4 and custom CSS design tokens Map: Mapbox GL JS with custom price marker overlays and fly-to animations Auth + Database: Supabase for user authentication and profile storage (income, budget, city preferences) AI Backend: Node.js/Express server powered by Google Gemini, with a multi-agent Backboard.io debate system where specialist agents (Family, Finance, Community, Investment) each evaluate a property and an Oracle synthesizes their verdicts into a final recommendation with persona weights Voice: ElevenLabs TTS with real-time voice morphing and persona weights map directly to ElevenLabs stability, similarity boost, and style sliders. Falls back to browser SpeechSynthesis if ElevenLabs is unavailable PDF generation: Server-side budget insight reports generated from Gemini analysis and delivered as base64-encoded PDFs

Challenges we ran into

The hardest problem was the persona voice pipeline. Getting the ElevenLabs voice settings to actually feel different across personas required careful tuning of three independent sliders simultaneously and we had to make sure the useCallback dependency array included language or the voice would silently use a stale language value after switching. We also hit issues with the Anthropic API being called directly from the browser (a CORS and security problem), a headerPersona is not defined crash from missing state initialization, and the ElevenLabs free tier flagging our account which forced us to build a complete browser TTS fallback that also morphs by persona. Coordinating the multi-agent Backboard.io response format with the frontend's PersonaWeights type across two separate servers was also non-trivial.

Accomplishments that we're proud of

The real-time persona orb is something we're genuinely proud of, a conic-gradient sphere that repaints live as your buyer profile shifts, appearing in both the chat panel and the navbar. The voice morphing actually works and is perceptibly different between the four personas. We also built a fully functional auth + onboarding flow that reads a user's saved city and budget from Supabase and instantly pre-filters the map on login. And the hardcoded demo scenarios backed by real certificate JSON from the Backboard mean the AI responses are grounded in actual property analysis data, not generic answers.

What we learned

React's useCallback dependency arrays are not optional a missing language dependency silently broke language switching in a way that was very hard to trace. We learned that browser TTS is a surprisingly capable fallback when tuned properly. We also learned that building a multi-agent AI system with a shared type contract between frontend and backend requires extremely careful interface design upfront like PersonaWeights appearing in elevenlabs.ts, geminiAPI.ts, PersonaButton.tsx, and AIChatPanelV2.tsx meant any colour or shape mismatch cascaded everywhere (we had Finance and Community colours swapped across files for a while).

What's next for HomeWay

Full Backboard integration: We will continue to build and fix the scenarios with live multi-agent debate responses, passing real certificate.personaWeights back to the frontend Persistent persona: Works well with saving and restoring the buyer persona between sessions via Supabase, so the voice and advisor remember you, test that this continues to work with a lot of discussions, maybe have a reset filter, or user selection on the type of persona? Neighbourhood intelligence layer: Overlay school ratings, transit scores, and crime data directly on the map. Currently we are scouring the internet for this information Future Calculations precision: We tried to implement a future look ahead for investment and again currently it is scouring the internet for development plans and verifies that they are real but we would make this stronger Multilingual support: the ElevenLabs eleven_multilingual_v2 model supports 12 languages; we want to expose all of them with flag-based switching and locale-aware property descriptions and ensure speech to speech with more time. Mobile app — the persona orb and voice advisor are natural fits for a native mobile experience

Built With

Share this project:

Updates