This project is built using React with Vite and TypeScript, without external libraries.
-
Install dependencies:
npm install
-
Run the project:
npm start
The project consists of two features:
-
Fruits Autocomplete: This feature displays a list of fruits without simulating an API call. It demonstrates the reusability of the Autocomplete component.
-
SuperHero Autocomplete: This feature simulates an API call to fetch superheroes. It showcases the usage of the Autocomplete component with a simulated API.
src
├── components
│ ├── Autocomplete
│ │ ├── SuggestionCard
│ │ └── SuggestionList
│ └── Shared
│ ├── Error
│ ├── Loading
│ └── SearchInput
├── features
│ ├── Fruits
│ │ └── components
│ │ └── FruitsSuggestionCard
│ └── SuperHero
│ │── components
│ │ └── SuperHeroSuggestionCard
│ ├── mocks
│ │ └── marvel.json
│ ├── services
│ │ └── superheroService.ts
│ └── types
│ └── ISuperHero.ts
├── styles
│ └── theme.css
└── hooks
└── useFetch.ts
- Use
// TODO:
comments for personal opinions or additional tasks to be completed. - Use
// POINT:
comments to highlight key points or areas of interest.
![image](https://private-user-images.githubusercontent.com/24545141/310902466-3a8a4fd9-dbaa-4f50-ab44-2ec30b3b9a13.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTcyOTc4NDEsIm5iZiI6MTcxNzI5NzU0MSwicGF0aCI6Ii8yNDU0NTE0MS8zMTA5MDI0NjYtM2E4YTRmZDktZGJhYS00ZjUwLWFiNDQtMmVjMzBiM2I5YTEzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjAyVDAzMDU0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZlZWYxZmQ5M2IyZDk0Yzg3ZmMwZTg2OTg3NzU2ZGQyYTA3OTFkZDc1NmNiNzM1ODk0MDg0YTcyZjExYjEwZjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.tzjfVn_w0fZ25HuPHmA3W8Xzzn-rmmz7cF_xh7kCLqo)
- Deployed Link: https://autocomplete-lib.netlify.app/