/SafeEscape-PearlHacks-Winner

PEARLHACKS WINNER: "Most Customer Obsessed” Hack (Sponsored by Amazon) ▪ Used HTML, CSS, Bootstrap and Javascript to create website that allows users to travel via Augmented Reality ▪ Implemented EchoAR to bring tourist attractions to users’ homes; Integrated Spotify API for further emersion

Primary LanguageHTML

SafeEscape_PearlHacks2021

Inspiration

Lockdowns, stay-at-home orders, and travel restrictions have meant that, for most people, leaving the country or even visiting another country is off the table because of restrictions to curb the spread of COVID-19. Although the roll-out of vaccines has been increasing, the future is unpredictable.

As more and more day-to-day activities become digitized and made virtual, the average time spent sitting at a desk working has averaged to 8 hours per day. Somehow, we all managed to stay home and held off the pandemic-era cabin fever through summer road trips and winter ski trips. But as the days go by and countless restrictions remain, wanderlust has become a way of life. We long to go to the aquarium, or stroll around an art gallery. While those things might not be possible, we bring the wealth of cultural heritage, renowned historical landmarks, and traditional experiences into the warmth of your home. Stay home and SafeEscape.

What it does

During these times where there are significant travel restrictions, staying at home not only can save lives but with SafeEscape, you can visit every continent you’ve been longing to visit.

With Safe Escape, we make service and accessibility. Anyone can travel! Our creation allows you to navigate to different places around the world and take a POV walking tour through a video. We also incorporated augmented reality to transition some of the most famous landmarks in the world into your room. Experience being in a city where you want to be while being in the comfort of your home.

On trips with SafeEscape, you don’t need to worry about language barriers. Music is the universal language. From bopping to classic 2000s pop in New York City to strolling from the Louvre to the Eiffel Tower with the company of Parisian jazz, SafeEscape immerses users directly into the culture of selected countries.

How we built it

Using Repl.it, we collaborated to create a web application, designing the front end using HTML, CSS, and Javascript. We created a home page that is user-friendly with popular places to travel to. When a place is selected, you are directed to a page that welcomes you with a “Welcome” in the language used where you will be visiting. The button on this page directs you to a walking tour video.

At the bottom, we integrated Spotify’s API to add a menu of music to reflect the culture of the location so our users can have a more immersive experience. Additionally, we have a “Learn More” tab that has cultural facts and an echoAR model of the most popular destination in the area. For each location, we created a corresponding 3D model using echoAR and generated QR codes for users to be able to see these augmented reality models before them, wherever they are!

It was also our first time ever deploying a web application. We navigated between Domain.com, Heroku, Repl.it, and Github to get our code. It was a long process of sending code from Repl.it to Github and then getting on VSCode to add it to Heroku. From there we had to connect a DNS to link Heroku and our domain name from domain.com.

Challenges we ran into

At a certain point, we had problems adjusting and implementing the video into the HTML file. We wanted the user to experience traveling to a city without having the perception of watching a video, but rather “living the video”.

We wanted to implement music using a youtube playlist for the user experience along with the video. However, it was challenging to create functions to enable and disable the additional music along with YouTube tour video. Therefore, we decided to use the Spotify API to implement music and introduce users to new playlists they can add to their libraries.

Our largest challenge, however, was how 7 hours of our time went towards registering a domain on domain.com and deploying our web application using Heroku! With help from mentors (shoutout to Ash, Shahar, and Nick!!), we were finally able to push our code to the cloud.

Accomplishments that we're proud of

We are super proud of the overall project. We are proud of overcoming the challenges we ran into and being able to design, create, and deploy a website in a timeframe of 24 hours. Moreover, we are proud of being able to adjust our main idea in different ways. Using the EchoAR and the 3D models to bring a better experience to the user is another aspect of the project that we are very proud of.

What we learned

We learned that having a good team always leads to creating amazing projects. We had a lot of fun. We all learned to coordinate, contribute, and find solutions for the project at all times. Our main takeaways are learning how to incorporate a video, transition webpages, and register a website with a domain given from domain.com.

Our motto for this project is, by far: ✨Teamwork makes the dream work. ✨

What's next for Safe Escape?

Empowering our travelers by allowing them to visit more locations and learn more about the world around them.

Regardless of COVID-19, some locations may not be accessible to all groups of people due to a lack of facilities, through our web app, anyone can travel to the corners of the globe. We will continue to search for more tourist attractions that our users would love to visit. We look forward to including multiple cities within each country and expanding our base to cover all 7 continents and all countries.

We would like to include toggle buttons that allow a traveler to choose between hearing either the natural street sounds of their location or the cultural music native to their destination.

Built With

TinkerCad, echoAR, HTML, CSS, Javascript, repl.it, Spotify API, Heroku, VSCode