Complete Case (Rick&Morty)

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=https://rickandmortyapi.com/graphql

.eslintignore

@@ -0,0 +1 @@
+postcss.config.js

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["next/core-web-vitals","airbnb", "airbnb/hooks","airbnb-typescript"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+"rules": {
+  "react/react-in-jsx-scope":0,
+  "react/prop-types":0,
+  "react/require-default-props":0
+}
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "eslint.validate": ["javascript"]
+}

assets/Readme.md

@@ -0,0 +1,23 @@
+## Case:
+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
+
+## Verilen assetler:
+* Ornek tasarım assets/multi-select.png.
+
+## Gereksinimler:
+* 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.
+
+## Olsa iyi olur
+* Deploy edilmis calisan hali ve linki (i.e vercel)

next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images:{
+        remotePatterns:[
+            {
+                protocol:'https',
+                hostname:'rickandmortyapi.com',
+            }
+        ]
+    }
+};
+
+export default nextConfig;