Adcreative.ai frontend developer pozisyonu icin hazirladigimiz bu case'de sizden React.js kullanarak multi-select autocomplete component implement etmenizi istiyoruz. Daha sonra bu componenti "Rick and Morty" api'daki karakterleri aramak ve select etmek icin kullanacaksiniz.
Api linki: https://rickandmortyapi.com/documentation/#introduction
- Ornek tasarım assets/multi-select.png.
- React vs Typescript
- Tasarima uygun multi-select implementasyonu
- input alanina yazilan query ile api sorgulanip popup content'de listelenmesi
- Listelenen sonuclarda her bir karater icin karater resmi, ismi ve kac bolumde oynadigi bilgisinin gosterilmesi
- query icin yazilan sozcugun listelenen sonuclarda vurgulanmasi (ornek tasarimda 'ric' aramasi sonuclarinda 'Ric' bold seklinde gosterilmistir)
- secilen sonuclarin input alanina eklenmesi ve cikarilmasi
- Keyboard navigation desteklenmeli. Yon tuslari ve tab kullanarak tum islemler yapilabilmeli, input alanindaki secili ogeler veya sonuc listesindeki satirlar gezinebilmeli ve silme/secme islemleri yapilabilmeli.
- Loading state gosterimi
- Exception handling ve error statelerinin arayuzde gosterilmesi
- Ve tabi ki yazdiginiz kodun mimarisi, temiz ve okunakli olmasi belki de en onemli kriter olacaktir.
- Deploy edilmis calisan hali ve linki (i.e vercel)