Navigatop

Abhishek — Sat, 11 Apr 2026 13:58:12 +0000

📖 Overview

Navigato Platinum is a premium...

In a venue hosting 132,000 attendees, congestion and emergency response are critical life-safety challenges. Navigato solves this by aggregating real-time occupancy data and delivering strategic insights via an AI-Grounded Spatial Hub.

🧠 Approach and Logic

Large venues suffer from "Information Blackouts" during peak events. Navigato creates a Single Source of Truth across defined zones (Gates, Food Courts, Pavilions).

1. Strategic Decision Making

Status Derivation: Zone health (Clear, Moderate, Crowded, Critical) is dynamically calculated using a weighted threshold algorithm based on live capacity-to-density ratios.
Pathfinding (Dijkstra's Algorithm): Navigation routes are not just the shortest path; they are the fastest path. The edge weights in our Dijkstra implementation are adjusted in real-time based on the congestion ratio of each zone.
AI Context Grounding: The Gemini assistant is "Stitched" into the stadium's live telemetry. Every prompt is injected with the current JSON state of the venue, enabling hyper-accurate, real-time advice.

⚡ The Twin-Engine™ Architecture

To achieve 100% startup stability on Google Cloud Run, Navigato utilizes a proprietary Twin-Engine boot sequence.

sequenceDiagram
    participant GCR as Google Cloud Run
    participant E1 as Engine 1 (Safe-Start)
    participant E2 as Engine 2 (Platinum Core)

    GCR->>E1: SIGINIT Launch
    E1->>E1: Bind Port 8080 (Instantly)
    Note over E1: Health Check Passed (2ms)
    E1->>E2: Modular Dynamic Import
    E2->>E2: Warm up AI Clusters & GCS Streams
    E2-->>E1: Core Synchronized
    Note over E1,E2: Platform 100% Operational

Engine 1 (The Shield): A lightweight Node.js entrypoint that binds to the assigned PORT immediately to prevent timeout errors.
Engine 2 (The Intelligence): The modular Express 5.0 application logic, loaded after the port is stable.

📂 Full Project Structure

├── server/                 # PLATINUM BACKEND ENGINE
│   ├── boot.ts             # Engine 1: Instant-bind bootstrapper
│   ├── index.ts            # Engine 2: Modular app logic (Express 5)
│   ├── routes/             # API Endpoints
│   │   ├── ai.ts           # Gemini 1.5 Flash Chat & Triage
│   │   └── incidents.ts    # GCS Visual Telemetry Pipeline
│   ├── services/           # External Service Layer
│   │   ├── gemini.ts       # Google Gen AI SDK Integration
│   │   ├── storage.ts      # Cloud Storage Stream Engine
│   │   └── analytics.ts    # BigQuery & Event Logging
│   └── middleware/         # Security & Auth
│       └── auth.ts         # Firebase Admin Token Verification
├── src/                    # ELITE FRONTEND HUB (React 19)
│   ├── components/         # Premium Component Library
│   │   ├── attendee/       # ZoneMap, LiveHub, Dispatch
│   │   └── layout/         # Glassmorphism Framework
│   ├── context/            # Global State (ZoneContext)
│   ├── hooks/              # Custom Logic (useAuth)
│   └── App.tsx             # Main System Entrypoint
├── Dockerfile              # Multi-Stage Production Shield
├── vite.config.js          # Advanced Rollup Code-Splitting
└── deploy.ps1              # One-Click Cloud Run Deployer

🛠️ Google Services Integration

Service	Integration Detail	Location
Google Cloud Run	Multi-stage container runtime with Twin-Engine boot.	`Dockerfile`, `boot.ts`
Google Maps JS API	Satellite imagery + Advanced Markers + Directions.	`ZoneMap.tsx`
Gemini 1.5 Flash	AI Chat Assistant & Visual Incident Triage.	`gemini.ts`, `ai.ts`
Cloud Storage	Visual telemetry streams for emergency dispatch.	`storage.ts`
Firebase Admin	Role-based custom claims & Token security.	`auth.ts`
Google Cloud Logging	Structured JSON logging for 100% observability.	`index.ts`, `boot.ts`

🏗️ System Visualizations

1. The Intelligence Pipeline (AI Triage)

graph TD
    A[Attendee Report] -->|Satellite Telemetry| B(Google Cloud Storage)
    A -->|Contextual Description| C(Navigato AI)
    B --> C
    C -->|Gemini 1.5 Flash| D{Strategic Severity}
    D -->|HIGH| E[Emergency Staff Dispatch]
    D -->|LOW/MED| F[Operational Logging]
    E --> G(Cloud Pub/Sub Alert)

2. The Platinum Cloud Stack

graph LR
    User[Attendee] -->|React 19| FE(Frontend Hub)
    FE -->|Vite 8 / ESM| BE(Platinum Core)
    BE -->|Twin-Engine™ Boot| CR(Cloud Run)
    CR -->|Security| FA(Firebase Admin)
    CR -->|Spatial| GM(Google Maps)
    CR -->|Gen AI| AI(Gemini 1.5)

🚀 Setup & Running locally

Environment Setup: Add your VITE_GOOGLE_MAPS_API_KEY to the .env file.
Install & Build:
```
npm install
npm run build
```
Ignite the Platform:
```
npm start
```

[!IMPORTANT]
Production Note: Navigato Platinum is optimized for the Narendra Modi Stadium geolocation. For local testing, use the "Force Sync" demo mode to bypass live GPS requirements.

Navigato Platinum • Strategic Crowd Intelligence

Built by Abhishek for Promptwars.

Building MovieSync in Public: A Real-Time Dashboard for Smarter Movie Intermissions

Abhishek — Fri, 10 Apr 2026 05:23:53 +0000

Building MovieSync in Public (with Antigravity) 🎬🚀

Building in public means sharing not just the outcome, but the tools and decisions behind it. While creating MovieSync, I also leveraged Antigravity to accelerate development and deployment, making the project faster to ship and easier to scale.

*The Problem
*
Movie intermissions are short, but queues are long. Whether it’s the washroom or food counter, people waste valuable break time waiting. There’s no visibility into crowd density, and decisions are made blindly.

*The Idea
*
MovieSync is a real-time venue dashboard that shows crowd levels across different areas using simple color indicators. Users can instantly decide where to go and avoid congestion.

Tech Stack

1. React + Vite (Frontend)
2. Vanilla CSS (Glassmorphism UI)
3. Docker (Multi-stage build)
4. Nginx (Static hosting)
5. Google Cloud Run (Serverless deployment)
6. Antigravity (Rapid development & cloud workflow acceleration)
7. Frontend Architecture

I built the UI with React and Vite to keep it lightweight and fast. Instead of using heavy UI frameworks, I hand-coded the layout with Vanilla CSS. The interface uses glassmorphism effects, smooth transitions, and micro-animations to create a premium experience.

Real-Time Simulation

Since real sensors were unavailable, I implemented dynamic simulators that mimic WebSocket-based IoT data. The dashboard updates crowd density in real time using:

Green → Low traffic
Orange → Moderate traffic
Red → High congestion
Docker Multi-Stage Build
The project uses a two-stage Docker setup:

Node stage builds optimized assets
Nginx stage serves the static SPA on port 8080

This keeps the container small and production-ready.

Cloud Deployment with Google Cloud Run

The container is deployed serverlessly using Google Cloud Run. It automatically scales based on traffic and integrates with Cloud Build for CI/CD.

Deployment command:

gcloud run deploy moviesync --source . --port 8080
Where Antigravity Helped

Antigravity helped streamline:

Rapid scaffolding of the project structure
Faster iteration during UI development
Simplified deployment workflow
Reduced setup complexity for cloud deployment
Improved developer productivity

Using Antigravity alongside Cloud Run made the entire process smoother and quicker.

Key Features

Real-time queue dashboard
Serverless scalable deployment
Lightweight UI
Dockerized production build
Antigravity-powered workflow
Open-source repository
What's Next
Real IoT sensor integration
WebSocket backend
Predictive analytics
Mobile PWA version
Multi-venue support
Final Thoughts

MovieSync demonstrates how modern tools like React, Docker, Google Cloud Run, and Antigravity can be combined to build scalable real-time applications quickly. Building in public made the journey more transparent and collaborative.

What are you building right now? 🚀

Forem: Abhishek