Azure-Samples / contoso-real-estate

Intelligent enterprise-grade reference architecture for JavaScript, featuring OpenAI integration, Azure Developer CLI template and Playwright tests.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Hack-together] feat: levate User Experience with 3D Street View for Property Listings

VictorCodebase opened this issue · comments

Are you accessing the project from the GitHub Codespaces?

  • [✅] Yes, I am using GitHub Codespaces.

Note: The project is optimized to run on Codespaces. We welcome contributions to enhance it for cross-platform local development, but it's not something we will prioritize right now. Thank you!

Feature description

✅ 3D Street View for Property Listings
Incorporating an interactive 3D street view into property listings will provide users with a realistic and immersive understanding of the properties in their real-life context.
This addition is particularly beneficial for users who prioritize their potential neighborhoods and environment before making significant commitments like moving.

✅ Feature Benefits to user
⭕ Users can explore the property's environment from the comfort of their homes, enabling informed decision-making without the need for physical visits.
⭕ The feature enhances users' confidence in their choices by offering a more authentic and tangible experience.
⭕ It saves users time and resources that would otherwise be spent traveling to the property location.

All these together will make Contoso Real Estate user's go-to whenever moving💫.

✅ Feature Details
To illustrate the implementation of this feature, consider the following scenario:

When users access a property listing they are interested in, they will have the option to interact with an embedded 3D street view of the apartment's surroundings.
This interactive experience allows users to virtually navigate around the property's neighborhood, simulating the experience of being there in person.

✅ sample tour of this feature

For demonstration purposes, an example of the proposed feature can be seen by playing this video (or following this link):

Adobe.XD.2023-08-21.00-10-13.mp4

To get the full demonstration; here is an AdobeXD link:
https://xd.adobe.com/view/a3174e9d-4262-437f-acec-f834e9d43ed5-f644/?fullscreen

✅Additional Input:
I'm open to suggestions regarding CSS design and any technical improvements that can further enhance the implementation. Your insights will greatly contribute to creating a seamless and user-friendly experience.
Plus I like learning new stuff🙂🙂

Screenshots
Here are screenshots demonstrating the feature in action
image

Screenshot 2023-08-21 001254

OS (please complete the following information):

  • OS: Windows 11 Home Single Language
  • OS Version:22H2
  • npm version: (codespaces)
  • Node.js version: (codespaces)
  • output of azd version: (codespaces)

Hi @VictorCodebase ! As with the video player suggestion, it is a great feature but out of scope for compliance, for the moment. Thank you for your amazing creativity and in-depth demos!