The WolfpackpresentRoam
The Wolfpack Demo Video
Explore. Discover. Share.
People don’t engage with their local areas as much as they used to. In our cities and towns, there are hundreds of hidden landmarks, buildings and monuments that enrich the cultural canvas of our communities.
Roam solves this problem by creating an app that promotes discovery of your local community off the beaten path. Roam’s target audience is families and young people, embedding game-like features to get everyone out and about learning new things.
Roam is a community-driven app where users create and share landmarks to educate others in the area. Roam lets users post pictures and share stories to entice others to discover the hidden gems of their community.
The Team
Rachel Castola
Tom Smith
Rebecca Wallis
Ali Ashraf
Chris Gillespie
Technologies
We used: Firebase, React Native, Expo, Google Maps API
Our app, Roam, is built using Firebase for our back end, React Native and Expo for our front end.
During the spiking process, we identified Firebase to be a good fit. Using firebase features such as user authentication, database and file upload allowed us to efficiently prototype our app with scalability potential.
For our front end, we gave ourselves the challenge of learning and implementing a new framework- React Native.
Our aim was to build a sleek mobile app with native components which provides a consistent user experience across IOS and Android. We set Roam up using Expo allowing us to include features such as: Expo Camera to allow users to upload images to the app with the option of toggling between their phone’s front and back camera; and React Native Swiper to display uploaded photos in a user-friendly way. We also gained experience using the Expo Go app to support the development process.
Our app centres around our Map Screen built using React Native Maps with a Google Maps API. This includes a MapView component with customised styling that renders a video-game type map which updates based on the user’s location. Our map is hidden by a sophisticated Polygon component, sections of which uncover as the user visits areas of the map. We considered app performance in our design making sure to find the right balance between polygon grid size and upload time.
As well as functionality, UI design was important to us. We invested time embedding React Native’s libraries, such as React Native Paper giving our app an accessible and polished user interface.
Challenges Faced
As a team we were able to overcome a number of challenges. These included the technical challenges of sourcing libraries that remained compatible with our tech stack and working out the best solution to manage and secure API keys as well as the less technical aspects of project management linked to communication and work flow organisation.