The Leeds Code Collective
presentWhat You Looking App?

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.

Description imagePreview: Description image

The Team

  • Team member imagePreview: Team member image

    Avril Hunter

  • Team member imagePreview: Team member image

    Akiva Kaufman

  • Team member imagePreview: Team member image

    Dom Francis

  • Team member imagePreview: Team member image

    Louisa Whitton

  • Team member imagePreview: Team member image

    Adam Dean

Technologies

Logos for React Native Navigation, React, Android Studio, ESLint and TypeScriptPreview: Logos for React Native Navigation, React, Android Studio, ESLint and TypeScript

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.