Web App · 2024
Platform monitoring real-time dengan visualisasi data interaktif untuk bisnis skala menengah.
Overview
Project ini lahir dari kebutuhan nyata: tim operasional yang bergantung pada laporan Excel manual setiap minggu. Kami membangun dashboard yang mengintegrasikan 12 sumber data berbeda menjadi satu tampilan yang mudah dipahami.
Tantangan utama adalah performa — data harus diperbarui setiap 30 detik tanpa membuat browser pengguna melambat. Solusinya adalah arsitektur WebSocket dengan selective re-render berbasis React Query.
50k
Active Users / Day
99%
Uptime SLA
<200ms
API Response Time
12
Data Sources
Screenshots & Preview
Main Dashboard View
Mobile View
Analytics Detail Page
Settings Panel
Video Demo
Tech Stack
React
Frontend UI
TypeScript
Language
Node.js
Backend
PostgreSQL
Database
Redis
Cache / Queue
Docker
Containerization
AWS ECS
Deployment
WebSocket
Real-time
Frontend
React + React Query
Load Balancer
AWS ALB
API Services
Node.js Microservices
Database
PostgreSQL + Redis
Real-time
WebSocket Server
Monitoring
Datadog + PagerDuty
Setiap service berjalan di container terpisah di AWS ECS, dengan auto-scaling berbasis CPU. Real-time updates menggunakan WebSocket yang terhubung langsung ke Redis Pub/Sub, memungkinkan broadcast ke ribuan klien bersamaan tanpa bottleneck di database.
Process & Story
Kami mulai dengan 2 minggu riset mendalam — mewawancarai 15 pengguna dari tim operasional, sales, dan manajemen. Hasilnya mengejutkan: 80% waktu mereka habis untuk menyalin data antar spreadsheet, bukan menganalisisnya.
Kami membuat 3 iterasi prototype Figma dalam 1 minggu, mengujinya langsung dengan pengguna. Temuan kunci: pengguna lebih memilih grafik yang "berbicara" — perubahan warna dramatis saat angka melampaui target.
Mengadopsi trunk-based development dengan feature flags, kami men-deploy ke production setiap Jumat. Setiap fitur dites A/B selama 2 sprint sebelum di-rollout penuh.
"Pertama kali dalam 5 tahun kami bisa melihat performa seluruh cabang dalam satu layar, real-time."
— Head of Operations, klien
Key Learnings
Optimasi premature adalah musuh — profiling dulu, optimize kemudian.
WebSocket connection management lebih kompleks dari yang diperkirakan di production.
Pengguna non-teknis lebih suka animasi yang "bercerita" daripada angka presisi.
Feature flags menyelamatkan kami dari downtime 3 kali selama development.
Links & Resources