Genel Bakış
Mülakat değerlendirmesinin bir parçası olarak bir günde inşa edilen, Google Flights'tan ilham alan modern bir uçuş arama arayüzü. Uygulama, kullanıcıların gerçek zamanlı uçuş aramasına, rota ve fiyat detaylarını görüntülemesine ve hem masaüstü hem de mobil için optimize edilmiş duyarlı bir kullanıcı arayüzüyle etkileşime girmesine olanak tanır.
Odak noktası, gerçek API entegrasyonu, düşünceli bileşen mimarisi ve ölçeklenebilir kullanıcı arayüzü kalıpları ile cilalı bir UX sunmaktı—tümü React, TypeScript ve Tailwind CSS gibi modern araçlarla inşa edildi.
Teknoloji Yığını
Önyüz
React
TypeScript
Vite
Tailwind CSS
React Router
Radix UI
Headless UIReact Day Picker
Veri ve Durum Yönetimi
React QuerySky Scrapper API
Altyapı ve Diğerleri
ESLint
Prettier
pnpmTemel Özellikler
- Sky Scrapper API tarafından desteklenen gerçek zamanlı uçuş arama
- Gelişmiş yolcu seçenekleri ile tek yön ve gidiş-dönüş desteği
- React Day Picker aracılığıyla aralık seçimi ile etkileşimli tarih seçici
- Süre, aktarma ve havayolu bilgileri dahil uçuş detay dökümü
- Uçuş seçenekleri arasında fiyat karşılaştırması
- Mobil ve masaüstü için optimize edilmiş duyarlı tasarım
- Sağlam UX: yükleme durumları, hata sınırları ve boş durumlar zarif şekilde ele alındı
Proje Yapısı
src/
├── components/ # UI ve paylaşılan bileşenler
│ └── ui/ # Yeniden kullanılabilir stillendirilmiş primitifler
├── pages/ # Rota seviyesi bileşenler
├── hooks/ # Özel React hook'ları
├── types/ # TypeScript tanımları
├── lib/ # Yapılandırma ve yardımcı programlar
├── services/ # API servis fonksiyonları
└── assets/ # Statik varlıklar ve stillerÖne Çıkanlar
- Mülakat koşullarını karşılamak için 24 saatten kısa sürede inşa edildi
- TypeScript ile tamamen tiplendirilmiş kod tabanı, sürdürülebilirlik ve geliştirici güvenini artırdı
- Hızlı inşa ve HMR için Vite kullanarak optimize edilmiş geliştirme iş akışı
- Erişilebilirlik ve bileşebilirlik için Radix UI ve HeadlessUI gibi tasarım sistemleri kullanıldı
- Sayfalama, filtreler veya kaydedilmiş aramalar gibi gelecekteki genişletilebilirliğe izin veren modüler mimari
Gelecek Geliştirmeler
Uçuş Arama
- Büyük sonuç setleri için sayfalama ve sonsuz kaydırma ekleme
- Sıralama ve filtreleme ekleme (fiyat, duraklar, havayolları, kalkış saatleri)
- Çok şehirli destek ve geçmiş fiyat görselleştirmesi ekleme
API ve Performans
- Ek Sky Scrapper uç noktalarını entegre etme (havaalanları, uçuş takibi, havayolu bilgileri)
- Yaygın sorgular için istemci tarafı önbellekleme uygulama
- Fiyat uyarıları ve kaydedilmiş rotalar ekleme
UX Geliştirmeleri
- Son aramalar ve favoriler
- Uçuş fiyat trend grafikleri
- Uluslararasılaştırma ve dil desteği
Teknik
- Uçtan uca testler ekleme
- Daha fazla performans optimizasyonu ve paket analizi
Geliştirme Uygulamaları
- Kod Kalitesi: ESLint ve Prettier ile uygulandı
- Tutarlı Tiplendirme: Tam TypeScript kapsamı
- Modüler Tasarım: Endişelerin ayrılması göz önünde bulundurularak inşa edildi
- Duyarlı-öncelikli Düzenler: Mobil-yukarı tasarlandı, sonra masaüstüne ölçeklendirildi
