Skip to main content

Claude/ChatGPT Prompt to Build an EV Charging Station Finder UI

EV charging finder UI: map with charger pins, connector filters, live availability, pricing, route planner with charging stops, and payment history.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt

                                

What this prompt does

This prompt makes the model a senior mobile UI engineer building map-based apps and asks it to specify an EV charging station finder tightly enough to build, returning working component code rather than pseudocode. It defines six deliverables: a map with availability-styled pins and a list/map toggle, connector and speed filters that update pins and list together, live availability and pricing with a freshness timestamp, a route planner that inserts charging stops, an active charging-session status with progress and stop control, and a payment history list with proper empty, loading, and stale-data states. The structure forces the model to treat live data as fallible, which is the whole challenge of EV finders.

Four variables drive it. [stack] sets the framework and map library (default React Native + Mapbox). [connectors] lists the plug types to filter, like CCS, CHAdeMO, and Tesla. [live_data] names the source of availability, such as an OCPP roaming network API, which determines how freshness is modeled. [core_jobs] captures the primary user tasks — find, route with stops, pay, track session — keeping the build focused. The recurring theme is freshness: a pin that says available when it isn't strands a driver, so the prompt asks for stale states and timestamps from day one.

When to use it

  • You are building an EV charging finder or any map app where live availability can be wrong.
  • You need connector and speed filters that keep the pins and the list in sync.
  • Route planning with inserted charging stops is part of the experience.
  • You want active session tracking with progress and a stop control.
  • Showing data freshness and handling stale data are real requirements, not nice-to-haves.
  • You need components, props/types, and a sample data shape to start building immediately.

Example output

Expect components in your [stack] along with props/types and a sample station/session data shape. The map renders charger pins styled by availability with a list/map toggle; filters for [connectors] and speed update both views together; each station shows live availability and pricing with a freshness timestamp tied to [live_data]; a route planner inserts stops along a destination; an active-session panel shows progress and a stop control; and a payment history list ships with explicit empty, loading, and stale-data states. It is a buildable scaffold, not a finished app.

Pro tips

  • Name a real [live_data] source so the model can model freshness and timestamps realistically instead of guessing.
  • List the exact [connectors] you support; filters are only useful if they match your network's plug types.
  • Keep [core_jobs] tight so the model prioritizes find, route, pay, and track rather than sprawling.
  • Build the freshness and stale-data states first — never render availability without showing how old it is.
  • Swap [stack] to your real map library so pin styling and clustering are idiomatic.
  • If the route planner is weak, re-run asking specifically how charging stops are inserted and recalculated when a waypoint changes.

Frequently Asked Questions

Does this prompt address stale or wrong availability data?
Yes, that is its central concern. It requires a freshness timestamp on every station and explicit stale-data states, because a pin showing available when a charger is busy can strand a driver. The prompt asks you to build these states from day one.
Can I filter by specific connector types?
The `[connectors]` variable lists the plug types to filter, defaulting to CCS, CHAdeMO, and Tesla. The filters update the map pins and the list together, so set this to match the connectors your network actually supports.
Does it include route planning with charging stops?
One deliverable is a route planner that inserts charging stops along a destination route. If the first output is thin, re-run and ask specifically how stops are inserted and recalculated when a waypoint changes.
What data does it expect me to provide?
The output includes a sample station and session data shape, and you specify the live source via `[live_data]`, such as an OCPP roaming network API. The prompt models freshness around that source rather than assuming data is always correct.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Emerging Tech UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

Claude Code Expert · Online

👋

Hey there!

Quick Actions

WhatsApp Instant reply

Chat on WhatsApp

+880 1723 741224 · Instant reply

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

[email protected]

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support