Skip to main content

Claude/ChatGPT Prompt to Build a Livewire 3 Real-Time Dashboard

Build a Livewire 3 real-time dashboard with polling or Reverb websockets, loading states, optimistic UI, and error recovery.

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 Laravel engineer and asks it to build a working Livewire 3 real-time dashboard, returning real component code and Blade rather than pseudocode. It defines six deliverables: a Livewire 3 component class with typed public properties and computed properties for the metrics, live updates via your chosen transport (wire:poll at an interval or Reverb broadcasting with listeners), loading and skeleton states using wire:loading so the dashboard never flashes empty, optimistic UI for user actions with rollback on failure, error recovery with retry on transient failures and a visible reconnecting indicator, and eager-loaded queries to avoid N+1 on every refresh. All data is scoped to the current user/team. The structure works because it confronts the real trap: re-running heavy queries on every poll until the database melts.

Three variables drive it. [use_case] describes what the dashboard shows, like a live orders dashboard, which shapes the metrics and component. [transport] chooses the realtime mechanism, such as Laravel Reverb websockets, which decides whether you get wire:poll or broadcasting wiring. [interval] sets the poll/refresh cadence, like 5s, used when polling. The eager-loading and caching guidance is load-bearing: pick Reverb over polling once you pass a few hundred concurrent users, and cache the aggregate queries so the DB doesn't melt under refresh pressure.

When to use it

  • You are building a real-time dashboard in Laravel with Livewire 3 for a client SaaS.
  • You need to choose between wire:poll and Reverb websockets and wire it correctly.
  • Heavy aggregate queries risk re-running on every poll and overloading the database.
  • You want loading and skeleton states so the dashboard never flashes empty.
  • Optimistic UI with rollback on failure is part of the experience.
  • Error recovery with retry and a visible reconnecting indicator matters.

Example output

Expect the component class, its Blade view, and any event/listener wiring in separate code blocks. The Livewire 3 component has typed public properties and computed properties for the [use_case] metrics, scoped to the current user/team; live updates use [transport] — wire:poll at [interval] or Reverb broadcasting with listeners; wire:loading drives loading and skeleton states; user actions get optimistic UI with rollback on failure; error recovery retries transient failures and shows a reconnecting indicator; and queries are eager-loaded to avoid N+1 on every refresh. It is buildable Livewire code you adapt to your app.

Pro tips

  • Set [use_case] specifically so the computed properties target the right metrics rather than generic placeholders.
  • Pick Reverb over polling once you pass a few hundred concurrent users to spare the database.
  • Tune [interval] carefully when polling; too tight a cadence multiplies query load across all viewers.
  • Cache the aggregate queries so heavy metrics don't re-run from scratch on every refresh.
  • Keep all data scoped to the current user/team, since the prompt requires tenancy-safe queries.
  • Rely on wire:loading skeleton states so the dashboard never flashes empty between refreshes.

Frequently Asked Questions

Should I use polling or Reverb websockets?
The `[transport]` variable lets you choose either, and the wiring differs accordingly. The guidance is to pick Reverb over polling once you pass a few hundred concurrent users, since frequent polling multiplies query load across every viewer.
How does it avoid melting the database on refresh?
Queries are eager-loaded to avoid N+1 on every refresh, and the advice is to cache the aggregate queries. The core trap with real-time dashboards is re-running heavy queries on every poll, so caching and eager loading address it directly.
Does the dashboard handle loading and reconnection states?
Yes. It uses wire:loading for loading and skeleton states so the dashboard never flashes empty, and includes error recovery with retry on transient failures plus a visible reconnecting indicator. Optimistic UI with rollback on failure is also part of the deliverables.
Is the data scoped to the right user or team?
The prompt requires all data to be scoped to the current user/team for tenancy safety. The component uses typed public and computed properties for the `[use_case]` metrics, queried within that scope rather than across all records.
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 Laravel & PHP 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