My City App

An AR web app providing immersive 360° tours to enhance urban planning, tourism, and infrastructure development.

Comment

Inspiration

Cities are rapidly evolving, and technology can play a pivotal role in shaping smarter, more sustainable urban environments. Inspired by the need for accessible digital tools for urban exploration and infrastructure planning, I built My City App, an AR web application that provides an immersive 360° tour of a user’s surroundings. This project aligns with the UN Sustainable Development Goals (SDGs), particularly:

  1. Goal 8: Decent Work and Economic Growth - Using visualization to drive entrepreneurship and local commerce.
  2. Goal 9: Industry, Innovation, and Infrastructure – Enhancing digital infrastructure for smart cities.
  3. Goal 11: Sustainable Cities and Communities – Promoting accessible urban exploration and planning tools.

What it does

My City App allows users to navigate a 360° augmented reality (AR) environment, exploring key locations within a city. Through interactive hotspots and cursor-based navigation, users can seamlessly transition between different points of interest, gaining a deeper understanding of their surroundings.

How I built it

The app is developed using A-Frame, a powerful WebVR framework, along with JavaScript and HTML. It consists of three main components:

  1. CursorEvents.js – Manages user interactions, including clicking and hovering over locations.
  2. Tour.js – Controls scene transitions, rendering of 360° images, and zoom functionalities for enhanced user experience.
  3. Index.html – The core structure of the AR environment, integrating different components and rendering the interactive 360° tour.

Challenges I ran into

  1. Optimizing Performance: Rendering high-resolution 360° images smoothly without causing lag.
  2. Implementing Interactive UI: Designing an intuitive cursor-based navigation system for seamless exploration.

Accomplishments that I'm proud of

Successfully built an interactive AR application using only web technologies, making it accessible on any device without additional installations.

Designed a smooth and immersive user experience, enabling users to explore their city effortlessly.

Integrated zoom functionality for a more detailed view, improving usability.

What I learned

Mastering A-Frame for creating WebVR and AR applications.

Improving UI/UX Design for an engaging and intuitive navigation system.

Enhancing Web Performance to handle high-resolution textures and real-time interactions effectively.

What's next for My City App

Moving forward, I plan to:

  1. Expand City Coverage – Allow users to upload their own environments, enabling community-driven exploration.
  2. AI-powered Insights – Implement machine learning models to analyze urban development trends.
  3. Multi-User Collaboration – Introduce real-time collaboration, enabling city planners and residents to explore and discuss infrastructure improvements together.

Built With

Share this project:

Updates