Nexus City

NexusCity
Nexus City green
Nexus City route

Inspiration The inspiration for Nexus City came from studying modern urban innovations in cities like Seoul, South Korea and Shenzhen, China. Seoul’s advanced IoT-enabled smart bus shelters and Shenzhen’s AI-driven traffic command systems demonstrate how technology can make urban spaces safer, greener, and more human-centric. Traditional smart city dashboards are often static, flat web interfaces that fail to capture the complexity of urban dynamics. We wanted to build an interactive, living digital twin where users can visualize and actively participate in urban problem-solving.

How We Built It Nexus City was engineered as a high-performance, single-page web application using Three.js for real-time 3D rendering and procedural geometry generation. The user interface was constructed with modern CSS styling and responsive grid layouts, backed by an event-driven control loop that handles camera positioning, UI telemetry updates, and dynamic object transformations. Real-time simulations—such as autonomous bus transit and emergency green corridor routing—are managed through custom procedural animation loops that translate abstract data points into visible, spatial actions.

Challenges Faced The primary technical challenge involved achieving a high-end, futuristic holographic aesthetic without relying on external 3D asset loaders that slow down page load times. We solved this by procedurally generating structured urban districts and utilizing additive blending shaders in WebGL to create glowing data lines and atmospheric depth. Balancing 3D render performance with real-time DOM-based telemetry feeds required optimizing our requestAnimationFrame loop to maintain a smooth 60 FPS experience across devices.

What We Learned We gained deep technical insight into WebGL spatial rendering, camera interpolation, and real-time state management. More importantly, we learned that a successful hackathon project requires more than just advanced visuals—it needs a compelling narrative. Grounding our technical simulation in real-world civic challenges transformed the project from a technical demo into a meaningful tool for human-centered urban planning.