Wunderland

Inspiration

Ever wonder what it'll be like at a dream destination, ever let your mind wander? Discover your dream escape at Wunderland, just a click away – no passports, no tickets. We're revolutionizing travel for those confined to hospital rooms or facing travel challenges. Drawing from my experiences as a hospital volunteer, I've witnessed the yearning for exploration among individuals unable to venture beyond their immediate surroundings. Rooted in the health sector, our project seeks to provide an outlet for imagination and experience for those with physical and mental disabilities. Wunderland aspires to bring the world to everyone, championing the reduction of carbon emissions and fostering awareness about the environmental impact of digital activities. Join us in crafting a revolutionary travel experience that transcends barriers and is accessible to all. U Wonder We Wonder!

What it does

Wunderland is a web platform seamlessly integrated with virtual reality. Users have the unique ability to input their dream vacation destination, and with a simple click, the platform generates a vivid virtual experience. This includes a lifelike representation of the chosen location, complete with current weather conditions incorporated with city views. To enhance the immersive experience, Wunderland goes a step further by curating a custom playlist that perfectly complements the atmosphere of the selected destination. In essence, Wunderland transports users to their dream location while having a full immersive experience of auditory and visual for an unparalleled virtual travel experience.

How we built it

Our project was constructed using the following technologies and tools:

Node.js, Express.js, Google Maps API, Spotify API, OpenWeather API, Tailwind CSS, Figma, React

Challenges we ran into

Figma Integration: As a predominantly backend-focused team, our first-time use of Figma posed challenges. We had many issues in understanding Figma's interface, particularly in handling animations and effectively positioning frames while grasping the overall layering structure and when to add certain features.

Spotify API Implementation: While we successfully generated Spotify API keys, implementing the functionality to play music presented significant difficulties. Navigating the intricacies of the Spotify API to seamlessly incorporate music playback proved to be a challenging task despite having the custom playlist generated.

Google Maps API Connectivity: Integrating the Google Maps API to establish connections between two distant locations and dynamically zooming the map based on the chosen destination posed a substantial hurdle. We worked to decipher the API intricacies and ensure seamless functionality in handling location data and map adjustments.

Accomplishments that we're proud of

Mastering Figma enhanced our design capabilities, while successful collaboration during our first in-person meeting facilitated efficient task delegation without resorting to all-nighters. Connecting multiple APIs, including Spotify, Google Maps, and OpenWeather, showcased our technical prowess and ability to incorporate multiple APIs. Our effective teamwork, leveraging individual strengths and supporting weaknesses, resulted in an effective workflow. Most importantly, we found collective satisfaction in our innovative project idea, reinforcing its value to the world.

What we learned

Integrating multiple APIs, such as Spotify, Google Maps, and OpenWeather, expanded our technical capabilities and deepened our understanding of API interactions overall. Delving into the backstory of Virtual Reality (VR) and designing a project around it provided a unique perspective on the intersection of technology and user experience. Additionally, we acquired proficiency in Figma, mastering animations and overall design. This project also served as an opportunity to broaden our skill set by venturing into frontend development, a departure from our predominantly backend-focused backgrounds, further diversifying our experience within software development.

What's next for Wunderland

Looking ahead, we envision exciting possibilities for further implementations of our project. Beyond real-world locations, we aim to delve into the fictional realm, catering to individuals who seek to immerse themselves in the worlds of books, shows, and movies. Imagine the opportunity to visit iconic fictional places like Hawkins, Indiana, or the Upside Down from Stranger Things. This expansion into imaginative landscapes opens up a new dimension of exploration and adventure. Additionally, we plan to introduce guided tours, offering users the option to receive curated insights and information about the chosen location, especially beneficial for those less familiar with specific places. This move from an open-world tour to a more structured and guided experience aims to enhance user engagement and provide a more tailored and educational journey.

Built With

• express.js
• figma
• google-maps
• node.js
• open-weather-api
• react
• spotify
• tailwind