{"id":20239237,"url":"https://github.com/musayar9/country-filter-application","last_synced_at":"2026-04-12T09:02:25.402Z","repository":{"id":221705427,"uuid":"753483655","full_name":"musayar9/Country-Filter-Application","owner":"musayar9","description":"Filtering by entered dollar exchange rate. Grouping data filtered by dollar exchange rate according to the entered number value. Filtering by country group value.","archived":false,"fork":false,"pushed_at":"2024-02-10T10:18:41.000Z","size":1027,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T01:25:10.394Z","etag":null,"topics":["graphql","react-context","reactjs","tailwind-css"],"latest_commit_sha":null,"homepage":"https://country-filter-application.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/musayar9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-06T08:03:37.000Z","updated_at":"2024-02-09T13:52:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"726e2774-b5a1-49fb-8cbd-fa266ac6963c","html_url":"https://github.com/musayar9/Country-Filter-Application","commit_stats":null,"previous_names":["musayar9/country-filter-application"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FCountry-Filter-Application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FCountry-Filter-Application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FCountry-Filter-Application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FCountry-Filter-Application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/musayar9","download_url":"https://codeload.github.com/musayar9/Country-Filter-Application/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241686817,"owners_count":20003112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","react-context","reactjs","tailwind-css"],"created_at":"2024-11-14T08:38:06.407Z","updated_at":"2025-10-18T19:37:21.317Z","avatar_url":"https://github.com/musayar9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Ülke Filtreleme Uygulaması - [Live Demo](https://country-filter-application.vercel.app/)\n\nProjeyi oluştururken javascript'in **React** framework'unu kullandık. Proje'nin tasarımını ise **Tailwindcss** kütüphanesiniz kullanarak yaptık. Graphql üzerinden de appolo kütüphanesini kullanarak verileri kendi localimiz çektik.\n\nProjede state yönetimini React Context yapısını kullanarak  yaptık. Context içinde tanımladığımız değişken ve fonksiyonları farklı bileşenler (components) içinde kullandık.\n\nBu projede girilen para birimine ve seçilen değere göre bir filteleme ve gruplama işlemi yapılıyor.\n\nSayfa ilk yüklendiğinde veriler gelirken bize bir yükleme(loading) animasyonu gösteriliyor. Veriler yüklendikten sonra animasyon kalkıyor ve yüklenen veriler bize bir tabloda sunuluyor.\n\n![img-1](src/images/1.jpg)\n\nFiltreleme işlemleri yapmak içinde 2 farklı input alanı ve bir tanede secenek (select) alanı oluşturduk. Bu input alanına girilen verilere göre bir filtreleme işlemi yapılacak. Secenek alanında ise seçilen değer göre gruplanmış ve filtrelenmiş veriler gelecek.\n\nSayfa ilk yüklendiğinde bize 10. eleman seçilmiş olarak gelecek ve arka plan rengi diğer elemanlardan farklı olacaktır. Biz herhangi bir elemana seçtiğimizde seçtiğimiz elemanın arka plan rengi otamatik olarak değişecektir. Sadece bir tane eleman seçebiliyoruz. Birden fazla eleman seçemiyoruz.\n\nPara birimine (Currency Value) göre filtreleme işlemi yaptığımızda filtrelenmiş olan verinin en son elemanı seçilmiş ve arka plan rengi değişmiş olarak gelecek.\n\n- **1. Birinci input(Currency Value):** Bu input alanına herhangi bir ülkenin para birimini girdiğimizde bize para birimine göre filtrelenmiş veriler gelecek. Eğer filtrelenmiş herhangi bir veri yok ise biz hata mesajı gösterilecek.\n\n| ![img-2](src/images/2.jpg) | ![img-3](src/images/3.jpg) |\n| -------------------------- | -------------------------- |\n\n- **2. İkinci input(Group Size):** Bu input içine de verileri kaçlı olarak gruplamak istiyorsak ona göre bir number değer giriyoruz. Örneğin **eur** para birimine göre bir filtreleme işlemi yaptığımızı  ve bize 35 tane veri geldiğini varsayalım. Biz bu 35 veriyi üçerli gruplar halinde gruplamak istersek groupSize inputu içine 3 değerini girmemiz yeterli. Girilen 3 değeri sonucunda biz toplam 12 tane üçerli bir gruplama işlemi yapacak ve biz gruplar arasında ileri geri tuşları ile dolaşabileceğiz.\n\n  `return list` butonuna tıkladığımız da bizi bütün verilerin olduğu tabloya yönlendirecek.\n\n| ![img-4](src/images/4.jpg) | ![img-5](src/images/5.jpg) | ![img-6](src/images/6.jpg) |\n| -------------------------- | -------------------------- | -------------------------- |\n\n- **3. Secenek Alanı(Select Value):** Bu alanda ise bize verilen secenekler arasından seçtiğimiz değer durumuna göre bize filtreleme gruplama işelemi yapılacak.Filtrelenen değerleri bize altta  gruplanmış şekilde gelecek.\n\n| ![img-7](src/images/7.jpg) | ![img-8](src/images/8.jpg) |\n| -------------------------- | -------------------------- |\n\n- Yukarıdaki resimlerde mavi dikdörtgen içinde belirtilen `return list` butonuna tıkladığımız da bizi bütün verilerin olduğu tabloya yönlendirecektir.\n\n#### Api Kaynaklı Hata Mesajı\n\n| ![img-9](src/images/9.jpg) |\n| -------------------------- |\n\nVeri çekme işlemi sırasında api'den kaynaklı bir hata meydana geldiğinde bize hata mesaj erkanda gösterilecektir.\n\n### Developer\n\n- Developer - [Musa Sayar]\n\n### İletişim\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.linkedin.com/in/musasayar/\" target=\"blank\"\u003e\u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg\" alt=\"musayar9\" height=\"30\" width=\"40\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/musayar9\" target=\"blank\"\u003e\u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/medium.svg\" alt=\"musayar9\" height=\"30\" width=\"40\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmusayar9%2Fcountry-filter-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmusayar9%2Fcountry-filter-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmusayar9%2Fcountry-filter-application/lists"}