Flight Tracker (OpenSky, Amadeus, Three JS)

I'm a sucker for cool visualizations. You always see those insane dev portfolios online built entirely in Three JS with mindblowing graphics rendered on systems that were likely never meant to support them. So, I thought, with absolutely zero knowledge of 3D rendering, how hard could it be? Project can be found here.

Globe Visuals

I really like those old timey spinning globes. Always remind me of that Adventures of Tintin sequel they never made. So thankfully someone already created an interface for it in threeJS that works out of the box: The interface is super intuitive and approachable for newcomers to 3D renders like me, and all you need to get a globe going is the following code:

<Canvas flat camera={useMemo(() => ({ fov: 50, position: [0, 0, 350] }), [])} >
   <OrbitControls
       minDistance={101}
       maxDistance={1e4}
        dampingFactor={0.1}
        zoomSpeed={0.3}
        rotateSpeed={0.3}
    />
   <color attach="background" args={[0, 0, 0]} />
   <ambientLight color={0xcccccc} intensity={Math.PI} />
   <directionalLight intensity={0.6 * Math.PI} />
   <R3fGlobe
       globeImageUrl="//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg"
        bumpImageUrl="//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png"
    />
 </Canvas>

The bindings are already made for React, so there was no need to worry about weird stitching with its HTML API. However, I did have some trouble with components like the HTML layer, which may completely be a product of being a newcomer to this world.

Data (OpenSky and Amadeus)

I'm a programmer working on hobby projects for now, and it can be really difficult to find data sources for free online. Thankfully, after a little bit of research, I was able to find OpenSky, a way to track every flight in the sky through ADS-B sensors. However, the API does not provide commercial data like departures, arrivals, schedules, which I would need so that my app could be more than just a cool visualization of the world's flights. I went through many iterations of these kind of APIs to bridge the missing info, including some with extremely unreliable data, and finally ended up on Amadeus, a huge data provider that I was worried would break the bank. Thankfully, they actually have incredibly honest policies, including a free "trial" quota that gave access to production data which was largely enough for the task I was building for.