shreebuilds

Output will do the talking

Comment

Sentinel-Nexus Project Reflection

What Inspired Me

The inspiration behind Sentinel-Nexus came from the idea of making complex global data more intuitive and interactive. I wanted to build something that could visualize real-time environmental and geopolitical risks in a way that feels immersive rather than overwhelming. Traditional dashboards often feel static and disconnected, so the goal was to create a seamless experience where users can explore the world dynamically.

The concept of combining a 3D globe with a 2D analytical map was especially motivating. It allowed me to think beyond standard UI patterns and design something that bridges exploration and precision. The cyber-security aesthetic and real-time data angle were also influenced by modern monitoring systems and global intelligence platforms. fileciteturn0file0

What I Learned

This project taught me several important technical and architectural lessons:

  • The importance of state synchronization when working with multiple views of the same data.
  • How to manage concurrent rendering in React 18, especially when dealing with complex visual components.
  • The difference between declarative vs imperative approaches, particularly when switching from react-leaflet to vanilla Leaflet.
  • How to structure a scalable system using modular components and a clear data schema.
  • The value of performance optimization, such as limiting updates and controlling render cycles.

One of the biggest lessons was understanding that the "ideal" design is not always the most stable in production. Adapting quickly and choosing reliability over elegance was a key takeaway. fileciteturn0file0

How I Built the Project

The project was built using a modern web stack centered around React and TypeScript. The architecture followed a modular approach:

  • Frontend Framework: React 18 with hooks and context
  • 3D Visualization: globe.gl (built on Three.js)
  • 2D Mapping: Vanilla Leaflet with leaflet.heat
  • Styling: Tailwind CSS with a custom cyber-themed design system
  • UI System: Draggable panels using react-rnd

The core of the system is the Hybrid Map Engine, which keeps both the 3D and 2D maps mounted at all times. Instead of switching components, I used CSS transitions to smoothly fade between views.

A central piece of the architecture is the shared state:

  • viewMode controls whether the user is in 3D or 2D
  • syncCenter acts as the single source of truth for map position

This allowed seamless transitions between the globe and the heatmap without losing context.

The system also includes:

  • Real-time event visualization using a standardized data schema
  • Heatmaps and markers for spatial analysis
  • Draggable UI panels for a customizable dashboard experience

Overall, the build focused heavily on maintaining a balance between performance, usability, and visual clarity. fileciteturn0file0

Challenges I Faced

The most significant challenge was dealing with react-leaflet compatibility issues in React 18.

Originally, the plan was to use react-leaflet for a clean, declarative approach. However, I encountered a critical error ("render$1 is not a function") when both the 3D and 2D maps were rendered together with concurrent features.

To solve this, I had to:

  • Abandon react-leaflet entirely
  • Rebuild the map logic using vanilla Leaflet (imperative approach)
  • Manually handle lifecycle management using useRef and useEffect

Other challenges included:

  • Ensuring smooth transitions without flickering
  • Keeping both map systems synchronized at all times
  • Preventing WebGL conflicts between libraries
  • Managing performance while handling frequent updates

These challenges forced me to rethink parts of the architecture and ultimately led to a more stable and production-ready solution.

Final Thoughts

Building Sentinel-Nexus was a deep dive into advanced frontend architecture and real-time data visualization. It pushed me to move beyond standard patterns and think critically about performance, synchronization, and user experience.

The biggest takeaway is that strong systems are not just about good ideas, but about making the right trade-offs when things don’t go as planned.

Built With

Share this project:

Updates

Submission history