Web Developer

Full-Stack Web Developer Needed for Luxury Interactive Vector Map (`FishHawkMaps.com`) + Live MLS IDX & AI Concierge **Project Overview:** We are building a custom, high-end, dark-mode architectural vector map platform for a premier master-planned real estate community (**FishHawkMaps.com**). The platform features dynamic GeoJSON neighborhood overlays, a live Stellar MLS IDX feed, multi-layer toggle menus, automated lead capture workflows, local community guides, and an embedded AI chatbot concierge. --- ### Key Responsibilities & Deliverables: #### 1. Interactive Vector Map Engine (`MapLibre GL JS` / `Mapbox`) * Build a responsive vector map utilizing a **luxurious, dark-mode/monochromatic architectural style** (slate charcoal base, thin vector road geometry, frosted-glass UI panels). * Integrate custom SVG map icons (pools, schools, parks, amenity badge locations) provided via vector asset packages (e.g., Infinity Motion). * Implement dynamic **GeoJSON polygon layers** for community phases (FishHawk Phases I–IV, FishHawk West, Trails, Shearwater, Palomaglade, etc.,) and extended neighboring areas (Channing Park, Hawkstone, Waterfield). * Polygons must feature semi-transparent jewel-tone fills (Teal, Amber, Sapphire) with subtle 1.5px white borders. * Build a floating **Multi-Layer Toggle Sidebar**: * `[x]` Neighborhood Boundaries * `[ ]` Walking & Bike Trails * `[ ]` School Districts * `[ ]` Community Amenities & Badge Access Rules * `[ ]` Emergency Shelters & Evacuation Zones * `[ ]` Youth Sports & Community Events Onboarding Tour & Mascot Widget: "Implement a 3-step first-time user tour using Driver.js or Shepherd.js. The tour features a floating frosted-glass card with a mascot graphic (/assets/mascot.svg) pointing users to: 1) Map Layer Toggles, 2) Polygon Click Data Drawers, and 3) The AI Concierge / Showing Request buttons. Save tour completion to localStorage so returning visitors don't see the tour repeatedly." #### 2. Live MLS IDX Data Integration * Connect the map via **RESO Web API / MLS Grid** (Stellar MLS). * When a user clicks a neighborhood polygon or home marker, display a sleek frosted-glass popup drawer with: * Neighborhood Name & Phase ID * Total Home Count, Average SqFt, and Garage Specs (2/3/4-car breakdown) * 5 Most Recent Sold Homes (Photo, Sold Price, Date, $/SqFt) * Dynamic 12-month Average $/SqFt & Active Inventory Count * Standard Stellar MLS copyright/disclaimer text. #### 3. Lead Capture & Showing Modal System * Build **"Schedule Private Showing"** & **"Instant Home Valuation"** interactive workflows. * Enable buyers to upload Pre-Approval Letters and e-sign Buyer Representation Agreements (HelloSign / DocuSign API). * Trigger automated webhooks (via Zapier / Make.com) passing all lead data directly to our CRM (Follow Up Boss). #### 4. Frontend & Community CMS * Build a top navigation bar with dropdown tabs: *Welcome, Buyers Q&A, Sellers Q&A, Military & PCS, Extended Family, FishHawk Pulse (Events/CMS)*. * Connect a CMS (Webflow or WordPress) so dated events (food truck rallies, youth sports registrations) automatically expire 24 hours after event completion. #### 5. AI Chatbot Integration * Embed a custom AI chatbot widget (Botpress / Voiceflow / Chatbase) styled to match the dark-mode glassmorphic theme. * Incorporate our provided knowledge base (Q&As, neighborhood specs, rules) into the AI training data. * Set up lead-generation webhooks when users request a tour or valuation via the chat window. --- ### Required Skills: * `MapLibre GL JS` / `Mapbox Studio` / `GeoJSON` * `RESO Web API` / `MLS Grid` / Stellar MLS integration * `Webflow` or `WordPress` CMS development * `Zapier` / `Make.com` webhooks to real estate CRMs * Custom AI widget integration (Botpress / Voiceflow / Chatbase) * Sleek UI/UX (Glassmorphism, CSS Backdrop Blur, Dark-Mode Cartography) ---