Karan Chandekar | Software Engineer

The Challenge

Building an interactive 3D globe with click-to-zoom navigation, real-time data overlays, and smooth flight path animations while maintaining performance.

The Solution

Used React Three Fiber for 3D globe rendering, custom shaders for day/night cycle, Zustand for country selection state, Recharts for data cards, and Framer Motion for panel transitions.

// Click-to-zoom country navigation
const handleCountryClick = (country: Country) => {
  const { lat, lng } = country.coordinates;
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (lng + 180) * (Math.PI / 180);
  const target = new THREE.Vector3(
    -Math.sin(phi) * Math.cos(theta),
    Math.cos(phi),
    Math.sin(phi) * Math.sin(theta)
  );
  gsap.to(camera.position, {
    ...target.multiplyScalar(2),
    duration: 1.5, ease: "power3.inOut",
  });
};