DEV Community

Cover image for How I built a 3D Drone Planning Software
Matthew McTighe
Matthew McTighe

Posted on • Edited on

How I built a 3D Drone Planning Software

#webdev #javascript #career #learning

🎉 I just finished building my full-stack drone mission planner!

Live link: https://drone-app-q23f.vercel.app

✈️ What does it do?

Users can create autonomous flight paths for DJI drones through an interactive 2D and 3D interface. These missions can be saved to the cloud — and in the future, a mobile app (still in the works) will let users connect to their drone and trigger the mission in real-time.

🧱 Tech Stack

  • Frontend Hosting & CI/CD: Vercel
  • Backend Hosting & CI/CD: Render
  • Auth: Supabase (JWT-based)
  • Database: MongoDB
  • Backend Language: Go
  • Frontend: React, Tailwind, Vite
  • Maps: CesiumJS (3D), Leaflet (2D)
  • IDE: Cursor
  • UI/UX Design: Magic Patterns
  • Timezone API: TimezoneDB (used lat/lng-based lookup)

📸 Before & After
Before:
This is a photo of my web application at the very start. It's very minimal and all the buttons are overlapping and messy

After:

Here's a photo of my application once I was done building it. It looks a lot more modern and user friendly and I added three-dimensional features to it

🧠 Goals of the Project

I set out to:

  • Build something I thought was fascinating
  • Design and develop a complete full-stack app
  • Learn (and level up in) React, Tailwind, Go, and web authentication — areas I was pretty new to at the start

💡 Inspiration

  • I’ve always been fascinated by the intersection of physical systems and digital interfaces — and drones are a perfect example.
  • While browsing full-stack engineering job postings, I noticed recurring patterns in the skills companies were hiring for… so I decided to build something that put those skills into practice.
  • I also drew inspiration from existing tools like Litchi and wanted to take it a step further by incorporating modern UI and eventually mobile integration.

🛠 Optimizations

3D rendering engines (like Cesium) are powerful but resource-intensive. I implemented optimizations using conditionals based on camera height:

const optimizeTileLoading = () => {
  const camera = viewer.camera;
  const height = camera.positionCartographic.height;

  if (height < 500) {
    viewer.scene.globe.maximumScreenSpaceError = 2;
  } else if (height < 2000) {
    viewer.scene.globe.maximumScreenSpaceError = 4;
  } else if (height < 10000) {
    viewer.scene.globe.maximumScreenSpaceError = 8;
  } else {
    viewer.scene.globe.maximumScreenSpaceError = 16;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • For time zone lookups, I used TimezoneDB, which has API limits — so I added server-side caching using a hash map keyed on lat/lng.

⚠️ Challenges

Too many to list… but here are the big ones:

  1. I originally used @cesium/engine, the modularized version of Cesium, but ran into build issues — likely due to missing dependencies. After a week of debugging, I switched to the full cesium package.
  2. I didn’t know where this project was headed when I started. What began as a small 2D waypoint sim turned into a 3D planner for real drone missions. As the scope grew, I had to revisit and refactor large parts of the codebase — including a complete rethink of the data model and UX flow after reviewing DJI’s Mobile SDK. Let’s just say there were many rabbit holes.
  3. (Coding with AI — A Blessing and a Curse)

Where it struggles:

  • Large outputs — If you let AI generate 800+ lines of code in one go, things get chaotic fast. It’s much harder to review, and you often end up with redundant, messy, or even broken logic buried in there. Stick to 100–200 lines at a time — it’s way easier to review and actually understand what’s happening.
  • Niche technologies — For less mainstream tools like Cesium, AI often gives outdated or flat-out wrong answers. In some cases, it really struggled to generate usable examples or explanations.
  • Refactoring — Don’t let it refactor too much at once. Small, incremental changes are the way to go.

Where it shines:

  1. Fast iteration for isolated components or logic blocks
  2. Handling boilerplate or UI layout
  3. Getting unstuck when you just need a quick idea to move forward

📱 Future Goals

  • Build the companion mobile app using DJI’s Mobile SDK v4 for iOS (data model is already structured for it)
  • Continue optimizing Cesium’s performance
  • Fix known bugs
  • Improve mobile web UI (started but deprioritized for launch)
  • Get user feedback — and maybe monetize it someday

Top comments (0)