The Leeds Code CollectivepresentWhat You Looking App?
What You Looking App? Demo Video
What’s that over there? AR to the rescue.
The idea came about as we wanted to create an interactive app which used augmented reality (AR) technology. We discovered ViroReact and were excited to implement this to make sightseeing and exploring a new city engaging.
The traditional methods of searching for a point of interest using maps and search engines give a clunky user experience, but by integrating AR technology to overlay information about nearby points of interest we were able to improve the user’s ability to navigate around the city, discover interesting activities in the area and save places for future reference.
Key Aims:
1. Location identification: identify and highlight nearby POIs, such as museums, restaurants and events, through displaying icons on the device's camera feed.
2. User-friendly interface: create an intuitive and engaging user interface that simplifies the process of discovering local attractions and provides additional details about the POIs, such as distance, ratings and reviews.
3. Learn new technologies: write good TypeScript code and experiment with AR techniques.
The Team
Avril Hunter
Akiva Kaufman
Dom Francis
Louisa Whitton
Adam Dean
Technologies
We used: ViroReact (AR), React Native including various libraries (Maps, Geolocation, Compass Navigation), TypeScript, Android Studio, ESLint, Husky
ViroReact to integrate exciting AR technology into a mobile app.
React Native for its ability to seamlessly develop cross-platform mobile apps and create reusable components.
TypeScript to learn a new language, building on our JavaScript knowledge whilst making our code robust.
ESLint and Husky to aid collaboration and ensure clean and error-free commits.
Challenges Faced
We couldn’t use Expo or Android Studio Emulator to view our app due to the AR technology, so we had to ensure compatibility with several devices in order to test (using Metro on Android Studio to continually bundle our app). This slowed down the development process, as the app had to be rebuilt when we made changes.
Using ViroReact within React Native made it harder to navigate between screens, manage state and pass down props. Additionally, integrating AR scenes with native components did not always work as expected.