Bu proje Create React App ile yapıldı.
- NodeJs
Dosyaların bulunduğu dizine girip npm install ve npm start komutlarını çalıştırın.
Tarayıcıda localhost:3000 adresini açınca uygulama çalışıyor olacak.
Önceden belirlenen belli collectionlar içinde aratılacak anahtar kelime query bölümüne yazılarak arama yapılır.
-
Eğer
querygirilmiş ise search butonu sizi '/search/:query/:collection' routeuna yönlendirir ve değerler doğrultusunda sonuçlar getirir. -
Eğer girilmeden butona basılmışsa '/search/random' adresinde yönlendirerek random 15 görsel getirir.
Önceden belirlenen belli collectionlar içinde aratılacak anahtar kelime query bölümüne yazılarak arama yapılır.
-
HomePage'den veya yukarıdaki bardan arama yapılır ve gerekli link oluşturulur.
-
Oluşturulan linkten parametreler alınarak sorguya dönüştürülür.
-
Görseller çekilirken loading animasyonu ekrana gelir.
-
İki ihtimal var:
- Eğer uygun görseller var ise, görseller listelenir:
- Eğer görsel bulunamamış ise noResult componenti çalışır.
-
Her sayfada 15 görsel getirilir ve aşağıdan sayfa değiştirilebilir.
-
Görsellere tıklandığında url sonuna resmin id'sini ekleyerek resmi büyük gösteren ve kullanıcı bilgilerini içeren bir modal açılır. Buradaki bilgiler id yardımıyla yeniden sorguyla elde edilir.
-
Açılan modalda
More Infobutonuna basılırsa, varsa fotoğraf konumunu içeren harita ve kamera EXIF bilgilerini içeren yeni bir modal daha açılır.
App.js dosyasında tanımlanmış Route patternleri dışında bir url girilirse bu sayfa açılır.
- Google Maps: Ücretsiz key alındı sadece develop ortamı için kullanım hakkı sunuyor.
- Unsplash API: Ücretsiz key alındı, saat başı 50 istek hakkı sunuyor. Görsel araması yaparken ve görsel bilgilerini isterken birer istek yapıyor.