Adventures Abroad

Interactive map—hover view
Interactive map—click view
Main homepage top view
Routing to North America travel page (upon interactive map click)
Routing to Asia travel page (upon interactive map click)
More content on Asia travel page

Inspiration

Coming into this project, it was clear none of us had any experience with client-side web development, so we knew right away that our focus would be on learning how to develop a user-friendly and aesthetically pleasing project. When we began brainstorming for some of the categories—specifically the Huawei Custom Challenge: Best Pandemic Life-Related Hack—we right away gravitated towards our shared longing to travel and escape the dull monotony of Zoom life. This got us thinking on a service that we could provide to people to connect with destinations in desperate need of tourism to revive their pandemic-battered economy—a win-win situation with a focus on sustainable tourism practices. From there the ideas concretized, and the project outlined below sprang forth.

What it does

The website presents a user with a short mission statement on the home page, guiding them to interact with a map further down. From there, depending on a person's choice of continents, they are guided to a separate page where they can read about some highlighted tourism destinations and how the pandemic has aversely affected their local economies. Finally, each of the blurbs ends with a link to book flights to the destination country, and encourages the users to learn more about sustainable tourism in the pandemic era.

How we built it

We aimed to build the website principally with React.js, but ended up incorporating significant amounts of vanilla CSS/HTML in parallel to the React components. Looking back upon it this was definitely not the most efficient option to choose, however the code ends up working quite nicely regardless. We used specific React libraries at different points as well: react-simple-maps for building out the interactive map, react-router to connect the map to the different webpages, and react-tooltip to allow the user to have a more immersive experience with the map.

Challenges we ran into

Initially, our greatest challenge was figuring Github. As almost completely beginners in independent coding projects, we had to watch tutorials and struggle through understanding branches, merging, and SSH key credential issues. After this was out of the way, we quickly became stumped on the question of connecting the interactive map to the webpages as we envisioned it, since this depended on React being able to identify which continent was clicked on when the action occurred. This took a bit of time to figure out—with tutorials not helping out much—since it involved parsing through and components' deconstruction of geojson objects to build the continents and obtaining unique "keys" for each continent. Even when this was accomplished, we faced further issues when trying to format basic styling using CSS on the homepage, which caused us to mix in parallel vanilla classes with React components.

Accomplishments that we're proud of

We're definitely proudest of figuring out the simultaneous question of map interaction and react routing, as this was one of the few issues in the project that was an all-hands-on-deck effort; half the team had been working on routing while the other had been figuring out the map, so we were faced to communicate precisely what we were doing to the other team so that we could figure out how to link the two initiatives. From a broader point of view, we're also incredibly proud of sticking with this entire initiative—from initial brainstorming to the writing of these very words—without any guidance from an authority figure. It has expanded our perspective immeasurably in terms of programming as a whole, and now we have each taken the step of being able to view programming challenges in terms of creativity, independence, and personal initiative, rather than college assignments or interview questions. This unquantifiable side of the entire experience will likely have the greatest long-run impact on our programming journey, and we can't wait to move on to the next big thing.

What we learned

We learned, first and foremost, how to collaborate as a team. None of us had ever used Github before, as mentioned previously, and we were forced to think through problems as a team and communicate progress and setbacks to our team members as they arose. Some of us, perfectionists by nature, learned to step back from micromanaging and allow more seamless and balanced cooperation among the team members; the others, who might lack motivation without the involvement of friends on such a daunting project, learned to actively involve themselves in their areas of expertise and interest. It truly was a multi-dimensional learning experience, and each of us will think back upon this learning experience for a long time to come.

What's next for Adventures Abroad

Next steps for this website will definitely involve looking over the React hooks and components, and learning how to leverage state more effectively to eliminate the need for bulky static markup and styling. Our more immediate concern is that there was one major shortcoming in our project—we were never able to get around to learning how to host our platform on Domain.com, and instead were forced to stay on localhost for the duration of the project's development. All of these will be areas of future discussion for us both for this project and for other independent initiatives.