DEV Community

Cover image for How We Built an AR Indoor Navigation App in One Night and Won a Google Hackathon
Sidharat Sami
Sidharat Sami

Posted on

How We Built an AR Indoor Navigation App in One Night and Won a Google Hackathon

We won 1st place at Google AI Seekho 2026 Karachi. 1,200+ applicants. The app was built overnight. Here's exactly how it works.

The Problem

GPS doesn't work indoors. Hospitals, airports, malls you're on your own once you walk through the door. Existing solutions need BLE beacons, QR codes, or expensive hardware installs. We wanted zero infrastructure.

What We Built

LumenPath a web-based AR indoor navigation system. Map any space once from a browser, guide visitors with AR arrows overlaid on their camera feed. No app install, no beacons, no extra hardware.

The Stack
Next.js 16 (App Router) + React 19 + TypeScript
Tailwind CSS v4 + Framer Motion for UI
Zustand for state
A* pathfinding for routing
Supabase for the backend
Native browser APIs doing the heavy lifting
The Interesting Part — Zero Hardware Dead Reckoning

This is what made the project actually work without any external hardware.

Step detection via DeviceMotionEvent we implemented a pedometer using the device accelerometer. As you walk, your position advances along the computed A* path automatically.

Compass heading via DeviceOrientationEvent real-time heading detection rotates the AR guide arrow in sync with how you're holding your phone. Turn left in real life, the arrow updates instantly.

AR overlay navigator.mediaDevices.getUserMedia streams the camera as a background, directional arrows and turn indicators are calculated against target waypoint vectors and rendered on top.

No BLE. No QR. Pure browser APIs.

The Floor Plan Editor

Venue operators get a visual studio editor at /studio draw walls, aisles, and POIs on a grid. That grid feeds directly into the A* pathfinder which generates the shortest walkable route in real time.

Voice Navigation

Web Speech API (window.speechSynthesis) handles turn-by-turn voice directions. Fully native, no external service.

Fallback Modes

Not every device has motion sensors. Desktop gets an auto-timeline advance, and there's a manual step button for non-sensor environments — so the demo never breaks.

The Hackathon Reality

We came up with the idea after hours of arguing, coded through the night, and nearly got disqualified for a private repo. The pitch had zero rehearsal.

First hackathon. Won't be the last.

GitHub: github.com/saim-x/lumenpath-indoor-ar-nav

Top comments (0)