Prompt - Test 1: Google Earth Simulation - Prompt

PROMPT.md

Build a Google Earth inspired web application called TerraView using Next.js (App Router) with a polished, modern UI and fully working core features. The app should run locally with minimal setup and be structured like a real production app (clean architecture, reusable components, good state management, performance minded).

1) Tech stack and constraints

• Framework: Next.js (latest stable), TypeScript, App Router
• Styling: Tailwind CSS (and/or shadcn/ui if you want)
• 3D globe engine: use a mature library that supports terrain and map imagery well. Pick the option that results in the most functional “Earth-like” experience in a browser.
• Must work without paid keys. If an optional key improves imagery, support it via environment variable, but provide a default that still works.
• The project must include: linting, sensible folder structure, and clear README instructions.

2) What the app should do (functional requirements)

Implement a working 3D globe with:

1. 3D globe viewer

   • Smooth pan, rotate, zoom
   • Home button to reset view
   • Display coordinates under cursor (lat, lon) and camera altitude

2. Search

   • A search bar that lets users search places by name
   • Use a free geocoding option (like OpenStreetMap Nominatim) with rate limiting and debouncing
   • Search results dropdown, keyboard navigation, click to fly to location

3. Fly-to and camera controls

   • Fly-to animation for search and for saved places
   • UI buttons for zoom in/out, tilt, rotate left/right (small increments)

4. Layer system

   • A layers panel with toggles, at minimum:

     • Base imagery layer options (at least 2)
     • Optional overlays (borders, labels, or roads if feasible)

   • Layer state persists in localStorage

5. Pins and saved places

   • Click on the globe to drop a pin

   • Pin modal lets user:

     • Name it
     • Add a note
     • Save it

   • Sidebar “Saved Places” list with:

     • fly-to on click
     • rename, delete
     • export/import JSON

6. Measurement tool

   • Simple distance measurement: click two or more points, show total distance
   • Clear measurement button

7. Performance and UX

   • Viewer loads fast, show a good loading state
   • Avoid blocking renders, use dynamic imports for the globe viewer
   • Make UI responsive for laptop and tablet sizes
   • Error handling for failed geocoding requests and missing imagery support

3) UI and product design requirements (this matters a lot)

The UI should feel like a real app, not a demo.

• Layout:

  • Top bar with logo/title on left, search centered, utility icons on right
  • Left side panel with tabs: “Layers”, “Places”, “Measure”
  • Main area is full-screen globe behind the UI

• Visual style:

  • Clean dark mode by default, with a light mode toggle
  • Smooth transitions, hover states, subtle shadows, consistent spacing
  • Use a modern component system (shadcn/ui is fine) and Tailwind for layout

• Small details:

  • Toast notifications for “Saved place”, “Copied coordinates”, “Exported JSON”
  • Keyboard shortcuts tooltip list (for example: / to focus search, Esc to close modals)
  • Empty states that look good (Places panel when nothing is saved)
  • Make sure UI overlays do not interfere with globe interactions except where intentional

4) Architecture requirements (do not skip)

Implement with a clean structure:

• app/ routes with a single main page
• components/ for UI and viewer components
• lib/ for helpers (geocoding client, localStorage persistence, formatting)
• store/ for state management (Zustand recommended)
• Use dynamic import for the globe viewer so Next.js SSR does not break
• Strong typing everywhere

5) Implementation details (be specific)

• Provide a working globe viewer component that:

  • Initializes the globe
  • Exposes methods like flyTo(lat, lon, height?)
  • Lets user click to create pins
  • Emits cursor lat/lon (throttled)

• Geocoding:

  • Debounce input 300 to 500 ms
  • Abort in-flight requests when query changes
  • Show a “Searching…” state and “No results” state

• Persistence:

  • Save places, layer toggles, theme mode in localStorage
  • Provide import/export with schema validation

6) Deliverables (what you must output)

When you respond, output:

1. A short explanation of which globe library you chose and why
2. A file-by-file project scaffold with code blocks for each file
3. A README with setup steps, scripts, environment variables, and troubleshooting
4. Notes about limitations and next improvements

7) Quality bar

• No pseudo-code for core functionality. The globe, search, pins, layers, and measurement must be implemented in real code.

• Avoid fragile hacks. Prefer standard approaches used in Next.js apps.

• The final result should run with:

  • npm install
  • npm run dev

• Keep the UI polished and consistent.