Proje 01 · CANLI
Live Pulse
Dünyanın nabzını canlı izleyen bir operasyon paneli: deprem, döviz, kripto, hava durumu ve GitHub aktivitesi tek ekranda.
YIL
2026
ROL
Tasarım ve geliştirme
YIĞIN
Next.js · TypeScript · GSAP
DURUM
Canlıda
livepulse
DEPREM
M 4.2
USD/TRY
41.80
BTC
$68k
Vaka çalışması
Problem, yaklaşım, kanıt.
1
Problem
Dağınık halka açık veri kaynaklarını (deprem, döviz, kripto, hava durumu, GitHub) sunucu maliyeti olmadan tek ekranda canlı göstermek.
2
Yaklaşım
Her kaynak için sunucu tarafı proxy ve önbellek; istemcide aralıklı yenileme, akarak değişen sayılar ve haritada büyüklüğe göre boyutlanan canlı noktalar. Bir kaynak yanıt vermezse son bilinen veri sessizce gösterilir.
3
Kanıt
Masaüstünde Lighthouse 98 ve 1.0 sn LCP; yerleşim kayması 0.001. Mobilde harita yüzünden 69; bu alanda iyileştirme yapıyorum.
Veri kaynakları
Beş kaynak, beş ritim.
USGS Earthquake
60 snDeprem akışı ve harita
Open ExchangeRate-API
5 dkDöviz kurları
CoinGecko
60 snKripto fiyatları
Open-Meteo
10 dkŞehir hava durumu
GitHub Events
60 snAçık kaynak nabzı
Mimari
Limitlere takılmadan canlı kalmak.
01
Tarayıcı
kart bileşenleri, aralıklı yenileme
02
API route
her kaynak için ayrı proxy
03
Önbellek
sunucu tarafı, kısa ömürlü
04
Dış API'ler
anahtarsız, ücretsiz
↑ Tarayıcı dış API'ye hiç dokunmaz; limit sorunu burada çözülüyor.
Ölçümler
Rakamla kanıt.
LIGHTHOUSE
98 · 69
masaüstü 98, mobil 69 (Lighthouse 12)
İLK İÇERİK (LCP)
1.0 sn
masaüstü; mobilde 5.9 sn, iyileştirme planlı
YERLEŞİM KAYMASI
0.001
CLS · TBT 120 ms · sunucu yanıtı 90 ms
SIRADAKİ PROJE
Bir sonraki işi birlikte yapalım.
Proje, işbirliği ya da teknik bir sohbet için yazın. Ortalama 24 saat içinde dönerim.