Problem
Borsa İstanbul verisini Excel dosyası olarak alıp incelemek isteyen biri iki kötü seçenek arasında kalıyor: dosyayı Excel'de açıp elle süzmek, ya da bir siteye yükleyip veriyi başkasının sunucusuna vermek. Amacım üçüncüsünü kurmaktı: dosya tarayıcıdan hiç çıkmadan yüklenip süzülen, sıralanan, renk skalasıyla okunur hale gelen ve tekrar Excel/PDF olarak dışa aktarılabilen bir arayüz. Bu kısıt aynı zamanda bir dağıtım kolaylığı getiriyor — sunucu yoksa statik olarak yayınlanabiliyor.
Yaklaşım
Vite + React 19 tek sayfa uygulaması. Dosya FileReader ile readAsArrayBuffer olarak okunuyor, SheetJS (xlsx) tarayıcı içinde parse ediyor, ilk sayfa sheet_to_json ile satır dizisine dönüyor. Durumu bilinçli olarak iki hook'a ayırdım: useBistData yalnızca yükleme ve fiyat kolonunun min/max'ını hesaplıyor, useTableState arama, sıralama ve sayfalamayı tutuyor. Filtrelenmiş ve sıralanmış liste useMemo ile veriden türetiliyor, ayrı bir state'te kopyalanmıyor. Fiyat hücreleri yedi duraklı bir gradyanla renklendiriliyor ve metin rengi hücrenin parlaklığından hesaplanıyor. Dışa aktarma iki yol: SheetJS + file-saver ile xlsx, jsPDF + autoTable ile pdf. Dağıtım GitHub Actions ile GitHub Pages'e; Vite tarafında manualChunks react/xlsx/pdf paketlerini ayırıyor.
Kararlar ve takaslar
- Dosyayı hiç sunucuya göndermemeyi seçtim — FileReader + readAsArrayBuffer ile parse tarayıcıda oluyor — çünkü finansal bir tabloyu yüklemek gereksiz bir gizlilik riski; alternatif bir upload endpoint'iydi ve o hem barındırma maliyeti hem veri sorumluluğu getiriyordu. Yan kazanç büyük oldu: sunucu olmadığı için uygulama GitHub Pages'te statik yayınlanabildi.
- Durumu iki hook'a böldüm (useBistData yükleme + min/max, useTableState arama/sıralama/sayfalama), çünkü dosya değişmediği halde her sıralama tuşunda Excel'i yeniden parse etmek istemedim; alternatif hepsini tek bileşende tutmaktı, o zaman türetilmiş liste ile ham veri aynı state'te karışıyordu.
- Türkçe sayı ve metin biçimini ayrı ele aldım: toNumber binlik ayıracı olan '.' karakterini silip ',' ondalığını '.' yapıyor, metin sıralaması ise localeCompare(..., 'tr') kullanıyor. Çünkü "1.234,56" JavaScript'te doğrudan NaN veriyor ve 'İ/ı' harfleri varsayılan locale'de yanlış sıralanıyor; alternatif Number() ve düz karşılaştırmaydı, ikisi de sessizce yanlış sonuç üretiyordu.
- Renk skalasını yedi duraklı gradyan yapıp metin rengini hücreden hesapladım (0.2126·R + 0.7152·G + 0.0722·B parlaklık formülü, eşik 0.6), çünkü sabit metin rengi gradyanın mavi/mor ucundaki hücrelerde okunmuyordu; alternatif üç kademeli sabit palet kullanmaktı, o fiyat dağılımını çok kabaca gösteriyordu.
- Vite'ta manualChunks ile react / xlsx / pdf paketlerini ayırdım, çünkü xlsx ve jspdf ağır kütüphaneler ve ilk boyama için gerekli değil; alternatif tek bir bundle'dı, o da kullanıcı hiç dışa aktarma yapmasa bile PDF kütüphanesini indirtiyordu.
Sonuç
Bu, listedeki tek CANLI proje: https://msgxr.github.io/bist-excel-app/ — GitHub Pages API'si durumu "built" ve HTTPS zorunlu olarak bildiriyor, adres HTTP 200 dönüyor ve yayınlanan HTML "BIST Dashboard" başlığıyla beklenen react/xlsx/pdf parçalarını yüklüyor (doğrulama tarihi: bu içerik hazırlanırken yapıldı). Dağıtım hattı .github/workflows/deploy.yml: checkout → Node 20 → npm ci → npm run build → upload-pages-artifact → deploy-pages; en son başarılı koşum 2026-05-05. Çalışan yetenekler kodda doğrulandı: .xlsx/.xls yükleme, isme göre arama, ada ve fiyata göre artan/azalan sıralama, sayfa başına 10 kayıtla sayfalama, fiyat bazlı renk skalası, Excel ve PDF dışa aktarma, hata ve boş durum mesajları. Performans ya da kullanım ölçümü YOK — ne bundle boyutu ne Lighthouse skoru ne ziyaretçi sayısı ölçülmüş; bu proje için sayı iddia etmiyorum, iddia ettiğim şey çalışan ve erişilebilir bir adres.
Teknolojiler
Kaynaklar
Bu sayfadaki teknik iddialar aşağıdaki kaynaklardan çıkarıldı.
- https://github.com/msgxr/bist-excel-app
- https://msgxr.github.io/bist-excel-app/
- https://github.com/msgxr/bist-excel-app/blob/main/package.json
- https://github.com/msgxr/bist-excel-app/blob/main/vite.config.js
- https://github.com/msgxr/bist-excel-app/blob/main/src/hooks/useBistData.js
- https://github.com/msgxr/bist-excel-app/blob/main/src/hooks/useTableState.js
- https://github.com/msgxr/bist-excel-app/blob/main/src/utils/colorScale.js
- https://github.com/msgxr/bist-excel-app/blob/main/src/utils/numberParser.js
- https://github.com/msgxr/bist-excel-app/blob/main/src/utils/exportUtils.js
- https://github.com/msgxr/bist-excel-app/blob/main/src/constants/columns.js
- https://github.com/msgxr/bist-excel-app/blob/main/.github/workflows/deploy.yml
Doğrulayamadıklarım
Metni yazarken teyit edemediğim noktalar. Görünür tutuyorum — teyitsizi sessizce iddia etmektense.
- DEPO README'Sİ YANLIŞ (kart metni bunu tekrarlamamalı): README "React + Vite + Tailwind" diyor ama package.json'da Tailwind bağımlılığı YOK ve postcss/tailwind yapılandırması bulunmuyor; stiller elle yazılmış CSS (src/index.css, src/App.css). Vaka sayfası Tailwind demememeli.
- DEPO README'Sİ YANLIŞ: README ve GitHub açıklaması "Formüller, grafikler ve gelişmiş analiz özellikleri" vaat ediyor; kodda formül motoru da grafik/chart kütüphanesi de YOK. Gerçekte olan: tablo, arama, sıralama, sayfalama, renk skalası, Excel/PDF dışa aktarma. lib/projects.ts'teki 'Data Visualization' etiketi de bu yüzden fazla iddialı — renk skalası var, grafik yok. Mevcut kart açıklaması ("Excel benzeri veri görselleştirme ve elektronik tablo uygulaması") düzeltilmeli.
- Kodda doğrulanmış ama README'de yazmayan kısıt: beklenen Excel sütun adları sabit — 'BIST Adı', 'BIST Fiyatı', 'Açılış', 'Kapanış', 'Görev' (src/constants/columns.js). Farklı başlıklı bir dosya yüklenirse tablo boş/anlamsız görünür, hata da vermez. Vaka sayfası demoyu tanıtırken bu beklentiyi söylemeli.
- README'de kişisel e-posta adresi yazıyor. Site içerik ilkesi gereği özel iletişim bilgisi siteye taşınmamalı — vaka sayfasına kopyalanmasın.
- Küçük tutarsızlık: README'deki klon komutu depo adını 'Bist-Excel-App' olarak yazıyor; kanonik ad 'bist-excel-app'.
- DOGRULANAMADI: Uygulamanın gerçek BIST verisiyle mi yoksa yalnızca örnek dosyalarla mı test edildiği. Depoda örnek bir .xlsx yok, bu yüzden uçtan uca hangi veriyle doğrulandığı belirsiz — demo ziyaretçisinin kendi dosyasını getirmesi gerekiyor.