What is Wanderawe?
Wanderawe is a project that I recently completed with my Altitude Labs team and it focuses on providing travelers with a creative outlet to share their travel experiences through photography.
For this project, we worked together with Yong Cong Choy, a photographer featured in National Geographic. He explained to us his reasoning behind Wanderawe:
As passionate wanderers and travelers, we know it brings us something unique and joyful, and we want to share it with the rest of the world. And that’s the essence of Wanderawe — to connect people and their experiences, to make this grand Earth a bit smaller for all of us to share.
How Altitude Labs was involved?
When YC contacted us, we were extremely excited about this project because we understood his vision — to create a platform that focuses on connecting world travelers and providing a community for them to share their life-changing experiences. In particular, I was excited to partner on this project because I too shared in his excitement for creating a community focused on connecting people through their shared experiences. On top of that, I’d like to think that I’m an amateur photographer and avid traveler ☺ — so obviously working on a project that combined both of my interests was highly compelling!
Having worked as a technical consultant in a previous life, I knew that properly understanding the scope of a project is the single most important task to successfully accomplish — mainly because without a solid understanding and foundation, later implementations will simply crumble from technical debt. So with that in mind, one of our first tasks was to consult with YC and better understand what his vision for Wanderawe. From this back and forth process, we were able to produce a detailed wireframe that highlighted the entire UX / UI flow of the application. We laid out a concrete plan for building all the core features and clearly understood how each feature interacted with each other.
A (mini) Deep Dive into Wanderawe
For this particular project, we decided to use the MEAN (MongoDB, ExpressJS, AngularJS, and NodeJS) stack. Outside of being familiar with these technologies, we wanted Wanderawe to be a single page application with seamless transitions and minimal refreshes to the backend whenever a photo is modified. We felt the MEAN stack fit our particular use case really well and made the most sense for our team.
In particular, MongoDB, ExpressJS, and NodeJS all seem pretty standard nowadays if you’re building an application using JavaScript. The most interesting choice was choosing AngularJS over another front-end framework like BackboneJS. After discussing the pros and cons between both frameworks, we decided on AngularJS mainly because we really wanted to leverage the 2-way data-binding for displaying photos on our gallery — if users modified photos by liking them, we could reflect that change immediately on the front-end while pushing the changes to the back-end at some later time so that user’s had a more responsive experience. And honestly, another reason we decided to choose AngularJS over BackboneJS was because we were itching to use some more modern JavaScript front-end frameworks!
In addition to deciding on AngularJS, we knew we’d follow the Agile process for this project so we came up with a list of user stories for the entire application. Each of these user stories focused on how the user of the application would be able to interact with it. Discussion about each of these user stories led us to discovering the different JavaScript libraries we would end up using for our project:
- PassportJS for logging into the application using different social media options
- Digging into the source code for Isotope and implementing our own version that works with AngularJS
- Using D3.js for our map visualization
- Google’s Autocomplete API for attaching location information for photos
Part of the fun of working on a larger scale project is to be able to dissect these different aspects of a project and try out new technologies, as well as integrating all these parts together into a coherent and functional application.
The final cool aspect of this project was deploying this application using Amazon Web Services (AWS EC2). Previously, we’ve had experience deploying applications using several different services including Windows Azure, Heroku, and Amazon EC2. For this particular project, we quickly realized that we would need a service that allowed us to play around with the file system and in particular, allowed us to store any uploaded images. Our past experience with Heroku told us that it would be difficult using Heroku because unfortunately, Heroku dynos are restarted on a daily basis which means that any photos uploaded would be lost ☹ That’s when we decided to move to Amazon EC2 — and for what it’s worth, our experience with Amazon EC2 has always been not as cumbersome as what the internet seems to say. For me, it’s always been surprisingly fun setting up your own virtual machine and customizing it to fit your needs!
Conclusion
From consulting with our client, to designing the wireframe, to implementing the core features of the product using different JavaScript technologies, and deploying the finished product, Wanderawe was an incredibly fun and challenging project to work on. At Altitude Labs, we take pride in producing the highest quality of products and at the same time, using the most modern technologies to push the boundaries forward. Hopefully everyone will check out Wanderawe and let us know any feedback you may have!
Written by Willson, a full-stack engineer and co-founder at Altitude Labs, where he designs and develops web and mobile applications for startups and corporates.