https://kkureli.github.io/rick-and-morty-multiple-select/
https://github.com/sahinkutlu/frontend-case/tree/main
The project involves implementing a multi-select autocomplete component using React.js and utilizing the "Rick and Morty" API to search for and select characters.
![](https://private-user-images.githubusercontent.com/33238066/315192946-f7e4a809-9aa3-4067-8c2a-15a6e5856c0e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwNjEyMTQsIm5iZiI6MTcyNDA2MDkxNCwicGF0aCI6Ii8zMzIzODA2Ni8zMTUxOTI5NDYtZjdlNGE4MDktOWFhMy00MDY3LThjMmEtMTVhNmU1ODU2YzBlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDA5NDgzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU5ODYxMTU5NjE5ZjkxYmNiMDg4NDkxYzU1MjczMjNmOTM3NzBhYmUzNjEwZmEwMjkwM2UyNjRiMDE0OTllZjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.HKr1jXlwbNYwOcqqIKxE8OziENFhr7TiHjTkigQl79Y)
In project directory:
- run
npm install
oryarn install
- run
npm start
-
api
: This folder contains base request function and services.assets
: Asset folder to store all images and icons.components
: Folder to store any common component that use through appviews
: Folder that contains all application views.
- React.js and TypeScript: The project is developed using React.js and TypeScript.
- Multi-select Autocomplete Component: The implemented component allows users to search for and select characters from the "Rick and Morty" API, adhering to the provided design.
- API Integration: The component interacts with the "Rick and Morty" API to fetch character data based on user queries.
- Keyboard Navigation: Full support for keyboard navigation is implemented, enabling users to navigate through results and perform actions using arrow keys and tab.
- Loading State and Error Handling: Loading states are displayed during API requests, and error states are handled and presented to the user.