acikyazilimagi / deprem-yardim-frontend

release canditate: https://rc.afetharita.com/

To support the project

Story of Project

Communications:

• Discord Channel

To Contribute:

• Contributing

Technologies and Systems Used In This Project

• Next.js 13
• React 18
• TypeScript
• Zustand - Global Store
• Absolute Import and Path Alias — Components to import with @/ prefix
• ESLint — To find bugs in your code according to specific rules
• Prettier — To format the code according to specific guidelines
• Husky & Lint Staged — To check whether they comply with the rules before you commit the changes.

To Begin

1. Clone the Repo:

git clone https://github.com/acikkaynak/deprem-yardim-frontend.git

2. Install Dependencies:

yarn is suggested.

yarn

3. Run the Development Environment:

yarn dev

You can open up the http://localhost:3000 address on your browser to see the result.

deprem-yardim-frontend's Issues

[Feature] Harita layerında koordinatların pin ile gösterilmesi

Bir array list içerisindeki lat lon bilgilerine göre Harita component'inde Pin ikonuyla bu adreslerin gösterilmesi

Market bakkal gibi ikonların haritadan gizlenmesi

Harita asset probleminin giderilmesi

BE bağlantısının yapılması ve uygulamaya dağıtılması

Grid Üzerinde Yapılabilecek İşlemler

Kayıtların gösterildiği grid üzerinde paging yapılamıyorsa bile
En azından kayıt tarihi, sıra no gibi bilgilerin gösterilmesi;
Kolonlara tıklandığı zaman ascending ve descending sıralama yapılabilmesi
Siteye girenlerin kendileri veya akraba arkadaşlarını ararken daha hızlı sonuç alabilmelerini sağlayacaktır diye düşünüyorum

Kayıt Sonrası Reload ve CTRL+F Bilgi Yazısı

https://www.depremyardim.com/ sitesine kayıt ekledikten sonra sitenin güncellenmesi için reload, refresh eklenirse yeni kayıtların da düşmesi sağlanabilir. Ayrıca aynı kayıtların girilmemesi için ctrl+F yapılması hakkında bilgi yazısı koyulabilir.

CONTRIBUTION.md eklenmesi

storybook entegrasyonu

Leaflet clustering özelliğinin eklenmesi

Test verileriyle birlikte çalışabilir hale getirilmesi

Harita default merkez konumunu degistirme

Haritanin merkez konumunu asagidaki koordinatlara ayarlayarak depremden etkilenen alanlari ortalayabiliriz.

OpenStreet Map koordinatlari
https://www.openstreetmap.org/#map=9/37.2544/37.3315

Birazdan PR acacagim

Drawer açılırken yaşanan ui hatası

Gorev dagilimi ?

Gorev dagilimi yapildi mi ? Discord uzerinde bir cok insan bilgilendirme bekliyor.

Logonun eklenmesi

Vercel deploy

Cluster'a tıklayınca sol alttan popup açılması

Drawer eklenmesi

https://mui.com/material-ui/react-drawer/

Detaylı Filtreleme

Filtreleme kısmında
Sadece il-ilçe yerine tek bir textbox olsa ve il, ilçe, adres, ad soyad, kaynak alanlarından yüzdeli sorgulama yapsa, daha hızlı bir şekilde aranan kayıtlara ulaşılabilir diye düşünüyorum.
Python ile yazıldığı için çok fazla dahil olamıyorum koda.
Ama yine de elimden geleni yapmaya hazırım

[Feature] Mock service worker ile test datasının oluşturulup bağlanması

Sample test data:

{
   "html_attributions" : [],
   "results" : [
      {
         "formatted_address" : "Bursa, Türkiye",
         "geometry" : {
            "location" : {
               "lat" : 40.1885281,
               "lng" : 29.0609636
            },
            "viewport" : {
               "northeast" : {
                  "lat" : 40.276336,
                  "lng" : 29.202363
               },
               "southwest" : {
                  "lat" : 40.16702,
                  "lng" : 28.862216
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/geocode-71.png",
         "icon_background_color" : "#7B9EB0",
         "icon_mask_base_uri" : "https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet",
         "name" : "Bursa",
         "photos" : [
            {
               "height" : 1080,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/100767885147787735359\"\u003eselami tosun\u003c/a\u003e"
               ],
               "photo_reference" : "AfLeUgOGJJ1BRIMZJ-YFQNZswHpR3BAtmVKi4bwhng7j4xMTXr4mIJvumBbk8mLRouL1PDKGNSlKHy-fNciBQRJBYjpxEv_YOzeMBPXS7z9ET9s1s-Z8vFFQqyUpymknHS5A9xrt8dbvxdGr_4mIvBFRE6M0Cb0Uf8UvSAO-bAciC-A6ctQ",
               "width" : 1920
            }
         ],
         "place_id" : "ChIJlVbU2IIVyhQRkjOX_FUFoGE",
         "reference" : "ChIJlVbU2IIVyhQRkjOX_FUFoGE",
         "types" : [ "locality", "political" ]
      }
   ],
   "status" : "OK"
}

[Feature] Leaflet ile Google Maps entegrasyonu

Google Maps key ile birlikte OpenStreetMap yerine GoogleMaps entegre edilecek

vscode debugging için launch.json oluşturulması

vscode settings.json local proje ayarları

Format on save gibi default formatter ve import organizasyonlarının oluşturulması

mobil kısmı için sağ üst marker larını yeniden düzenlemek

[Feature] Drawer içerisinde detay bilgilerinin gösterilmesi

• Belirtilen adresin yoğunluğunun belirtilmesi
• Pinin işaret ettiği açık adresin gösterimi (İl, ilçe, mahalle, cadde/sokak)
• Pinin işaret ettiği açık adresin alt-lon bilgisinin (koordinat) gösterimi
• Verilen lat-lon'a göre Google Harita'lara yönlendirme yapılacak buttonın yaratılması
• Adres bağlantısının default geleceği text fildin yaratılması
• Adre bağlantısının kopyalanabileceği buttonın yaratılması

[TESTING] Siteye Hız ve Performans Testi Yapılması

Harita sağ üstte taglerin eklenmesi

Prettier entegrasyonu

[Feature] Veri kaynağı banner olarak eklenmesi

Web sitesi canlıya alınırken açıklama kısmına bu bilgi eklenmesi önemlidir:

6 Şubat 2023 depreminde sosyal medyada paylaşılan deprem ile ilgili paylaşımları anlamlandırarak yardım kuruluşlarına destek verilmesi amaçlanmıştır.

[Feature] Implement Tweet List Api

[Feature] Harita layerında pinlerden uzaklaştıkça yoğunluk bilgisinin paylaşılması

https://www.figma.com/file/sctw6xtcdoFOfmE0gC97Ft/Deprem-Yard%C4%B1m?node-id=0%3A1&t=1hg6ltcv5aURnh5N-0

[Feature]Deployment Automation

Which platform are you using to host the app? Maybe, deployment process can be automate by using Github Actions.

npm yerine yarn kullanımı

Iletisim kanallarinin Readme'ye eklenmesi

Iletisim ve Katki bilgilerinin Readme'ye eklenmesi.

Kendim GitHub projesinin Discord kanallarinda paylasilmasi yoluyla bu projeye ulasabildim. O sebeple diger insanlarin da ana iletisim kanallarina ulasabilmesi icin README dokumanina bu kanallarin eklenmesi iyi olacaktir.

PR icin calismaya basladim su an.

Açıklama yazısının kapanabilir hale gelmesi

[Feature] canlı yayın akışını takip etmek

merhaba bu dataların yanı sıra canlı yayın akışının da olduğu bir sağ sidebar veya ayrı bir yapı iyi bir özellik olur mu ? @ozcanzaferayan @eraygundogmus demo : https://emergency-tv.vercel.app/

eslintrc ile kod kalitesinin sağlanması

Harita kütüphanesi?

Iki farkli çözüm var isteginize gore birini secebiliriz
Sadece Google haritalar için şunun gibi bir kütüphane var:
https://www.npmjs.com/package/google-map-react

Birden fazla harita desteklemek istiyorsak şunu kullanabiliriz:
https://react-leaflet.js.org/

Ana Sayfada Çıkan Uyarı

Sayfa yüklendiği zaman ekran görüntüsündeki gibi bir uyarı çıkıyor.
Art niyetli kişilerin siteye saldırması gibi bir durumda herhangi bir bilgi edinememeleri için kaldırılırsa daha güvenli olacağını düşünüyorum
Config dosyası ile ilgili bir uyarı

[TESTING] Stres ve Yük Testleri

Git hooks ile precommit hooklarının eklenmesi

convert images to .webp

Node sürümlerinin locklanması

.nvm dosyalarında 14 sürümüne göre belirlemek lazım. 16'da vercel sorun çıkarabiliyor

no-console rule eklenmesi

[Feature] Heatmap özelliğinin eklenmesi

[Feature] Nextjs PWA Support

https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

Harita ile ilgili copyright iconlarinin gereksinimleri

Haritada sag alta bulunan leaflet/openstreetmap yazisinin gorunurlugu konusundaki yasal gereksinimlerin incelenmesi ve tasarim secimleri dogrusunda silinip silinemeyeceginin belirlenmesi.

1- kullandigimiz Google Maps linkinin gereksinimlerinin incelenmesi
2- kullanilan leaflet kutuphanesinin gereksinimlerinin incelenmesi
3- 1 ve 2. maddelerin sonuclari cercevesinde yasal olarak bu copyright metinlerinin kaldirilip kaldirilamayacaginin belgelendirilmesi gerekmektedir.

[Feature] Harita pinlerine tıklandığında drawer açılması

Haritadaki bir pine tıklanınca solda drawer açılması

fix map overflow issue

[Feature] Farklı harita providerlarıyla çalışabilme Google Maps, KGM, Bing vs

Kayıt Durumu

Girilen kayıtlara bir durum alanı eklenerek, eğer sosyal medyadan veya herhangi başka bir yerden söz konusu şahsın kurtarıldığına dair veya vefat vb. durumuna dair bir bilgi edinilirse, kişilerin durum bilgileri güncellenerek buna göre de filtreleme yapılması sağlanabilir.
Buradan gelecek kurtarıldı durumuna göre bendeiyiyim.com adresine otomatik kayıt girişi sağlanabilir.
Biraz hassas bir durum abi bu konu. Durum güncellemesi yapılırken teyit bilgisi gerekebilir.

[Feature] KGM'nin yayınladığı karayolları ulaşım kısmıyla ilgili layer eklenmesi