Skip to content

Demo Playground (synthetic data)

> I don't publish client work due to NDAs. Instead, these demos use synthetic data to showcase UI quality, architecture patterns, and realtime flows.

These are not client products. All data is dummy/synthetic.

Demo 1 — Admin App (CRUD + Search + RBAC UI)

A practical admin panel pattern for day-to-day operations.

What it demonstrates

  • >List + detail + create/update/delete (dummy)
  • >Search, filter, sort, pagination
  • >Role-based UI (viewer/editor/admin)
  • >Clean empty/error/loading states

Technical notes

  • #Consistent UI components (simple design tokens)
  • #Form validation + safe error handling
  • #Clean data/state structure
  • #Performance-friendly list rendering

Admin Panel Demo

CRUD with role-based access (dummy data)

Logged in as:admin
NameRoleStatusLast LoginActions

Ahmad Wijaya

ahmad@example.com

admin2024-01-15

Sarah Chen

sarah@example.com

editor2024-01-14

Budi Santoso

budi@example.com

viewer2024-01-13

Lisa Tan

lisa@example.com

editor2024-01-01

Rizky Pratama

rizky@example.com

viewer2024-01-12

5 of 5 users

⚠️ Demo with dummy data. No real database.

Demo 2 — IoT Monitoring (Simulated Stream + Alerts)

A realtime telemetry dashboard pattern—without a real MQTT broker.

What it demonstrates

  • >Realtime stream simulation (synthetic)
  • >KPI cards + compact charts + event log
  • >Threshold alerts (e.g., temperature/voltage)
  • >Per-device drill-down (dummy)

Technical notes

  • #Event-driven frontend architecture (simulated stream)
  • #Efficient UI updates for realtime data
  • #Consistent telemetry data model
  • #Extensible pattern for real broker/pipeline integration

IoT MQTT Dashboard Demo

Synthetic data - updates every 2 seconds

Temperature

28.5°C

2:45:15 PM

Humidity

56.8%

2:45:15 PM

Pressure

1013.6hPa

2:45:15 PM

Power

2377.8W

2:45:15 PM

Flow

63.5L/min

2:45:15 PM

Vibration

2.6mm/s

2:45:15 PM

⚠️ Demo with synthetic data. No real sensors or MQTT broker connected.

Why synthetic demos still build confidence

  • You can assess UI/UX quality and attention to detail
  • You can see how I handle state, errors, and loading flows
  • You can evaluate maintainable, scalable architecture patterns
  • All without exposing client data or breaking NDA

If this approach fits, we can build the production version.

Share your goals and constraints. I'll respond with options and realistic milestones.

Discuss your project

Demos are for showcasing patterns and implementation quality. Production features will vary based on security and operational requirements.